/*
    Оформление мини-CRM (410).

    Это рабочий инструмент, а не витрина: владелец разбирает здесь заявки
    подряд, и всё сделано ради читаемости строки — крупный шрифт таблицы,
    спокойный фон, чёткая линия между строками. Ни украшений, ни движения.

    Шрифты — системные. Внешние подключать нельзя: сервер российский, и
    шрифтовые сервисы из России или недоступны, или медленны (501, раздел 10).
    Сборки JavaScript в проекте нет, поэтому и цвета заданы простыми
    переменными CSS, а не через инструменты сборки.
*/

:root {
    --ink: #1c1e21;
    --ink-quiet: #75797f;
    /* Подсказка в пустом поле светлее и текста, и подписи: она приглашение,
       а не значение. Темнее рамки поля (#c9cdd3), чтобы остаться читаемой. */
    --ink-hint: #a2a7ae;
    --line: #e4e6e9;
    --bg: #f6f7f9;
    --card: #ffffff;
    --accent: #2f6fd0;
    --accent-dark: #24589f;
    --danger: #b3261e;
    /* Отправка клиенту — зелёная, тот же тон, что у включённого канала
       оповещений (`.switch--on`): второго зелёного в кабинете не заводим. */
    --otpravka: #2e7d46;
    --otpravka-dark: #235f36;

    /* ОДНА ШИРИНА НА ВСЕ УЗКИЕ СТРАНИЦЫ — вход, смена пароля, «заявка не
       найдена». Слово владельца 14.09.2026: «у нас есть страницы, например для
       входа в личный кабинет, её ширина выставляет мобильную версию даже на
       ПК… чтобы стандартный размер был установлен для всех страниц на ПК с
       подобным форматом текста».

       ПОЧЕМУ ОДНО ЧИСЛО, А НЕ ПО ЧИСЛУ У КАЖДОЙ. Было 340 у входа и 520 у
       «заявка не найдена»: две страницы одного рода выглядели как две разные
       вёрстки, а карточка входа на широком экране читалась как открытая на
       телефоне. Рабочие страницы кабинета и мини-CRM сюда не входят — у них
       таблицы, и они тянутся во всю ширину (его же оговорка: «за исключением
       самих страниц личного кабинета»). */
    --stranica-uzkaya: 520px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ОТСТУП СНИЗУ У ОБЛАСТИ РАБОТЫ (владелец, 06.09.2026: «добавь в ЛК отступ
   снизу страницы — там сейчас ноль»). Таблица, упирающаяся в край окна,
   выглядит обрезанной: непонятно, кончилась она или страница не долистана. */
main.wrap {
    padding-bottom: 48px;
}

/* ВО ВСЮ ШИРИНУ МОНИТОРА — кабинет клиента (владелец, 06.09.2026, по снимку 20:
   «экран расширен на всю ширину монитора… нужно сделать на всю ширину»).
   Мини-CRM остаётся в колонке: там строки текста, а длинную строку глазом не
   пройти. У таблицы с десятком столбцов забота обратная — ей нужна ширина. */
.wrap--vo-vsyu {
    max-width: none;
}

/* Полоса сверху отделяет служебное — имя системы и выход — от работы. */
.top {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    margin-bottom: 28px;
}

/* ВЕРХНЯЯ ПОЛОСА НЕ ПРИЖИМАЕТСЯ К КРАЮ ЭКРАНА (владелец, 06.09.2026, о
   телефоне: «нет отступа от верхнего края»).

   Откуда бралось. Высоту полосы держал только `min-height`, а собственных
   полей у неё не было: на широком экране содержимое ниже 56 точек, и остаток
   раскладывался сверху и снизу сам. На телефоне же имя, почта и «Выйти» в
   строку не помещаются и переносятся — содержимое становится выше 56 точек,
   свободного остатка не остаётся, и первая строка встаёт вплотную к верхнему
   краю окна. Поля решают это на любой ширине, а не только на измеренной.

   `flex-wrap` объявлен здесь же: перенос уже происходил, но не по правилу, а
   потому что строка не влезала. Без него узкая полоса выталкивала бы «Выйти»
   за край. */
.top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    min-height: 56px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.top__name {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.top form {
    margin: 0;
}

/* Переход между страницами раздела. Появился вместе со вторым продуктом
   платформы: до него раздел был одностраничным и ходить было некуда.

   Стоит слева, сразу за именем платформы, а не справа рядом с «Выйти»: слева
   то, куда идут, справа — то, кто вошёл и как выйти. */
.top__nav {
    display: flex;
    gap: 18px;
    margin-left: 28px;
}

.top__nav-link {
    color: var(--ink-quiet);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}

.top__nav-link:hover {
    color: var(--ink);
}

/* Страница, на которой стоишь, подчёркнута, а не выделена цветом: цвет в
   шапке уже занят состояниями заявок, и второй смысл того же приёма читался
   бы как ошибка. */
.top__nav-link--here {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* Кто вошёл. Пользователей стало трое и больше, и вопрос «под кем я сижу»
   перестал быть праздным: владелец, менеджер и клиент видят разное, и увидеть
   не то, что ожидал, легче всего именно от того, что вошёл не тем. */
.top__who {
    margin-left: auto;
    margin-right: 16px;
    color: var(--ink-quiet);
    font-size: 14px;
}

/* ВЫБОР КЛИЕНТА ИЛИ ПРОЕКТА В ШАПКЕ КАБИНЕТА — слово владельца 27.09.2026
   07:41: «справа от этой надписи сделай кнопку, которая у тебя на в статистике
   выбор проекта». Стоит сразу за именем двери, а не у края: он назвал место сам.

   Подпись рядом с полем, а не внутри его первой строкой: строка «Клиент или
   проект» как пункт списка выглядела бы выбором и была бы выбрана по умолчанию —
   тогда кабинет показывал бы неизвестно чей проект. */
.top__vybor {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
}

/* Пункт списка — кнопка отправки, а не ссылка: выбор живёт в сессии, и в адресе
   его нет. Своего вида у неё не появляется: браузерное оформление кнопки снято,
   остаётся то же, что у ссылок этого списка (`.vypadenie__punkt`). */
.vypadenie__punkt--knopka {
    width: 100%;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

/* Переход во второй сервис платформы (`Section::otherDoor`). Стоит между
   подписью вошедшего и кнопкой «Выйти» — рядом с тем, кто вошёл, потому что
   отвечает на тот же вопрос «где я и куда ещё могу». Не кнопка: кнопка в
   шапке одна, и это «Выйти», а два одинаково заметных действия рядом
   заставляют выбирать. */
.top__door {
    margin-right: 16px;
    color: var(--ink-quiet);
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

.top__door:hover {
    color: var(--ink);
}

h1 {
    font-size: 26px;
    margin: 0;
}

.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

/* ЗАГОЛОВОК РАЗДЕЛА — МЕЛЬЧЕ ОБЫЧНОГО (владелец, 06.09.2026: «шрифт сделай
   меньше, чтобы смотрелось по-деловому»). Крупная надпись уместна там, где
   она единственная на экране; здесь под ней меню, панель отбора и таблица, и
   заголовок в ряду с ними — подпись, а не вывеска. */
.head--razdel {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Заголовок внутри раздела — над письмом, над отдельным блоком. Мельче
   раздельного: он подписывает часть страницы, а не саму страницу. */
.head--podrazdel {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ЛИНИИ МЕЖДУ СТОЛБЦАМИ — тонкие и серые, как в кабинете Директа (снимок 20,
   владелец 06.09.2026: «там разметка видна сразу, в том числе и вертикальные
   линии между столбцами таблицы; они сделаны тонкими и серыми, не сильно
   бросающимися в глаза»). При десятке столбцов взгляд без них теряет строку. */
.leads th:not(:last-child),
.leads td:not(:last-child) {
    border-right: 1px solid var(--line);
}

/* ШИРИНА СТОЛБЦА ТЯНЕТСЯ ЗА КРАЙ ЗАГОЛОВКА, двойной щелчок подгоняет её под
   самое длинное значение (владелец, 06.09.2026). Полоса захвата шире своей
   видимой черты: попасть в линию толщиной в точку трудно. */
.leads th {
    position: relative;
}

/* РУЧКА ВИДНА ВСЕГДА, А НЕ ТОЛЬКО ПОД УКАЗАТЕЛЕМ (владелец, 06.09.2026:
   «место, куда нужно схватить мышью за ползунок, не видно… нужно, чтобы место,
   где можно подвинуть ширину столбцов, выделялось, было немножко шире, чтобы
   было понятно, что за это место можно ухватиться»).

   ОБЛАСТЬ ЗАХВАТА И ВИДИМАЯ ЧАСТЬ РАЗВЕДЕНЫ (владелец, 08.09.2026: «сделай
   немного тоньше линии, за которые можно перетягивать столбцы, они слишком
   толстые, сделай их заметными, но тонкими, чтобы не бросались так сильно в
   глаза»).

   Прежде видимым была сама область: белая плашка шириной 14 точек с рамкой.
   Схватить её было легко, но в таблице на десяток столбцов десяток таких
   плашек читался как второй ряд разделителей. Теперь область захвата осталась
   прежней — 14 точек, попадать мышью не труднее, — а видна вместо неё одна
   тонкая черта поверх линии столбца: тот же разделитель, только темнее и
   короче. */
.leads__ruchka {
    position: absolute;
    top: 6px;
    right: -7px;
    bottom: 6px;
    width: 14px;
    z-index: 1;
    cursor: col-resize;
    user-select: none;
    background: none;
    box-shadow: none;
}

/* Видимая часть: черта в 2 точки посередине области захвата. Стоит она верхом
   на линии столбца и отличается от неё темнотой, а не толщиной. */
.leads__ruchka::after {
    content: '';
    position: absolute;
    top: 0;
    right: 6px;
    bottom: 0;
    width: 2px;
    border-radius: 1px;
    background: var(--ink-quiet);
}

.leads__ruchka:hover::after,
.leads__ruchka:focus-visible::after {
    right: 5px;
    width: 4px;
    background: var(--ink);
}

.leads__ruchka:focus-visible {
    outline: none;
}

/* У последнего столбца тянуть нечего — за ним край таблицы. */
.leads th:last-child .leads__ruchka {
    display: none;
}

/* Таблица шире области работы уезжает внутри своей обёртки, а не растягивает
   страницу: при десятке столбцов и заданных вручную ширинах это обычное
   состояние, а не поломка.

   ПРАВИЛО ОДНО НА ОБЕ ОБЁРТКИ. Имён в разметке два — `.wide` в трёх видах
   «Беру» и `.tablitsa-obertka` в семи остальных, — но дело у них одно, и
   разными они были только по случаю. Слово владельца 21.09.2026: «должен быть
   общий движок на все срм и таблицы, отличается только содержание». Пока имена
   живут оба, правило у них общее: вид расходиться не может. Скругление пришло
   из `.wide` — рамка таблицы скруглена, и обёртка не должна срезать ей углы.

   Прокрутка стоит на обёртке, а не на самой таблице: `overflow` у `table`
   в части браузеров ломает и прилипание заголовка, и рамку, и закреплённый
   первый столбец. */
.tablitsa-obertka,
.wide {
    width: 100%;
    overflow-x: auto;
    border-radius: 8px;
}

body.tyanem-stolbets {
    cursor: col-resize;
    user-select: none;
}

/* СТРОКА «ИТОГО» отделена фоном и не откликается на наведение: она не строка
   списка, а его сумма. */
.leads__total td,
.leads__total td:first-child {
    background: var(--bg);
}

.leads tbody tr.leads__total:hover {
    background: var(--bg);
}

/* Отбор */

.filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ОТДЕЛЬНОЕ ПРАВИЛО НА `[hidden]` ЗДЕСЬ ОБЯЗАТЕЛЬНО, тем же приёмом, что у
   `.copyline__btn[hidden]` ниже: собственный `display: flex` сильнее
   умолчания браузера `[hidden] { display: none }`. Без этой строки поле
   КПП или юридического адреса у предпринимателя осталось бы на экране. */
.field[hidden] {
    display: none;
}

/* Стрелки перестановки столбца: мелкие, серые, вплотную к названию — они
   часть строки, а не отдельная кнопка. Порядок столбцов задаёт клиент
   (владелец, 06.09.2026). */
.stolbtsy__poryadok {
    display: inline-flex;
    gap: 2px;
    margin: 0 6px;
    vertical-align: middle;
}

.stolbtsy__strelka {
    font: inherit;
    font-size: 13px;
    line-height: 1;
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
    color: var(--ink-quiet);
    cursor: pointer;
}

.stolbtsy__strelka:hover {
    background: #eef0f3;
    color: var(--ink);
}

/* Отступ между пояснением и полем выбора под ним (владелец, 06.09.2026: «нет
   пробела до поля выбора частоты, сделай хотя бы минимальный отступ»). Текст,
   вплотную прижатый к полю, читается как подпись этого поля, а он о другом. */
.filter--otstup {
    margin-top: 12px;
}

.field--wide {
    flex: 1 1 260px;
}

/* ПОЛЯ, СТОЯЩИЕ СТОЛБИКОМ, РАЗДЕЛЕНЫ ЗАМЕТНО ШИРЕ, ЧЕМ ЧАСТИ ОДНОГО ПОЛЯ.
   Слово владельца 08.09.2026: «сделай отступы между полями в форме заведения
   клиентов и везде где также — не понятно к какому полю относится подпись,
   нижнему или верхнему». Внутри поля части стоят вплотную (gap 4 точки), между
   полями — 18: подпись притянута к своему полю расстоянием, а не догадкой.

   Правило не трогает панели отбора: там поля выстроены в строку через
   `display: flex` с общим `gap`, и вертикальный отступ сдвинул бы их вразнобой.
   Поэтому оно ограничено формами, где поля идут одно под другим. */
form:not(.filter) > .field + .field,
form:not(.filter) > .field + p,
form:not(.filter) > p + .field,
form:not(.filter) > .field + fieldset,
form:not(.filter) > fieldset + .field {
    margin-top: 18px;
}

/* АБЗАЦЫ ПОЯСНЕНИЯ ДРУГ ЗА ДРУГОМ — тоже нуждаются в отступе, не только поля
   формы. Слово владельца 13.09.2026 (снимок экрана «Интеграции»): «между
   полями нужно делать отступы, между текстом тоже, сейчас всё у тебя
   перемешано». Раньше `.quiet` (margin: 0) шёл сплошной стеной абзацев, и
   подпись первого поля формы сразу за ними читалась как продолжение того же
   текста, а не как подпись, — отсюда и первое его замечание «пропала фраза»,
   хотя она была на месте. */
.quiet + .quiet,
.quiet + form {
    margin-top: 12px;
}

/* ПРЕДПРОСМОТР ОФОРМЛЕННОГО ПИСЬМА. Письмо приходит со своей вёрсткой — своим
   полем, своей рамкой и своим серым полем вокруг, — и здесь оно показывается
   как есть, без правки: владелец пришёл посмотреть, что увидит клиент.
   Ограничение по высоте не ставится: письмо читается целиком. */
.pismo-vid {
    display: block;
    width: 100%;
    /* Высота до пересчёта скриптом: письмо длинное, и окно в двести точек
       показало бы одну шапку. Пересчёт — в `kabinet.js`. */
    height: 900px;
    border: 1px solid var(--line);
    border-radius: 8px;
    /* Серое поле вокруг письма — то же, что в почтовой программе: письмо и
       здесь должно выглядеть письмом, а не куском страницы. */
    background: #f2f2f4;
}

/* ОТКАЗ ПРОВЕРКИ ВИДЕН И СВЕРХУ, И У САМОГО ПОЛЯ (владелец, 08.09.2026:
   «написал название проекта кириллицей, он выдал ошибку, но ошибку в верхнем
   блоке незаметным текстом, поэтому я не мог понять, почему клиент не завелся;
   нужно, чтобы это сообщение выделялось красным и чтобы красным выделялась
   сама форма, которую нужно заполнить правильно»).

   Красный здесь — единственное место, где он уместен в этом деловом наборе:
   отказ обязан отличаться от подсказки, иначе его читают как пояснение. Общее
   правило «не нужно цветов» (06.09.2026) касалось украшений, а не отказов.

   `--otkaz` объявляется рядом, а не в общем наборе цветов: он нужен только
   формам и не должен попадаться на глаза в отчётах, где красным окрашено
   падение чисел. */
.oshibka {
    border: 1px solid #c0392b;
    border-left-width: 4px;
    border-radius: 8px;
    background: #fdf3f2;
    color: #7d241a;
    padding: 10px 14px;
    margin: 0 0 14px;
}

.field--oshibka input,
.field--oshibka textarea,
.field--oshibka select {
    border-color: #c0392b;
}

.field--oshibka .field__label {
    color: #7d241a;
}

.oshibka-stroka {
    font-size: 12px;
    line-height: 1.35;
    color: #7d241a;
}

/* ЗНАЧЕНИЕ, КОТОРОЕ ПОКАЗЫВАЕТСЯ, НО НЕ ПРАВИТСЯ, — стоит на месте поля и
   выглядит его частью, но без рамки: рамка обещала бы ввод. */
.pole-znachenie {
    margin: 0;
}

/* ПОДГРУППА ПОЛЕЙ ВНУТРИ РАЗДЕЛА ФОРМЫ — строка-пояснение, отделяющая часть
   полей от соседних (владелец, 08.09.2026: «дальше только то, что касается
   юрлиц… расчетные счета лучше выделить как-то визуально»).

   Тоньше подзаголовка и с чертой слева: это не новый раздел, а оговорка о том,
   кому следующие поля нужны, а кому их можно не заполнять. */
/* ПОДПИСЬ ПОДГРУППЫ ПОЛЕЙ — «только у организаций», «только для юрлиц».
   Разделение, которое она объявляет, читать НАДО, а не искать.

   Слово владельца 09.09.2026: «в карточке клиента специально отделено текстом,
   что поля КПП и юр. адрес только для юр. лиц. Правда сделано слишком мелко —
   передай 04, пусть поправит, сделает отступ».

   Цена мелкого шрифта названа не рассуждением, а случаем того же дня:
   направление 01 подписи не увидело и спросило у владельца юридический адрес
   для ИП, которого у ИП не бывает, — лишний вопрос ему и лишняя задача в
   списке. Поэтому здесь не косметика: размер поднят до основного текста, вес
   средний, отступ сверху вдвое больше, чем снизу, — подпись явно принадлежит
   тому, что под ней, а не тому, что над ней. Полоса слева стала заметнее и
   держит группу глазом. */
.podgruppa {
    margin: 26px 0 10px;
    padding: 8px 0 8px 12px;
    border-left: 3px solid var(--ink-quiet);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}

/* ЗНАЧОК ПРАВКИ В СТРОКЕ СПИСКА (владелец, 08.09.2026: «значок слева от
   клиента, типа ручки»). Серый, как прочие служебные знаки; темнеет под
   указателем — по этому и видно, что на него можно нажать. */
.pravka {
    display: inline-flex;
    color: var(--ink-quiet);
}

.pravka svg {
    width: 17px;
    height: 17px;
}

.pravka:hover,
.pravka:focus {
    color: var(--ink);
}

/* Подпись под полем мельче самого поля: она объясняет, а не спрашивает.
   Прижата к своему полю сверху и отделена от следующего снизу. */
.field > .quiet {
    font-size: 12px;
    line-height: 1.35;
}

.field__label {
    font-size: 13px;
    color: var(--ink-quiet);
}

input,
select {
    font: inherit;
    color: inherit;
    background: var(--card);
    border: 1px solid #c9cdd3;
    border-radius: 999px;
    padding: 7px 14px;
    min-height: 38px;
}

/* Выключатели и отметки округлению не подлежат: круглая рамка вокруг квадратной
   отметки — рамка вокруг рамки. */
input[type="checkbox"],
input[type="radio"] {
    border-radius: initial;
    padding: initial;
    min-height: initial;
}

/* Многострочное поле остаётся прямоугольным: у пилюли углы съедают первую и
   последнюю строку. */
textarea {
    border-radius: 10px;
}

/* РУЧНОГО УГОЛКА ИЗМЕНЕНИЯ РАЗМЕРА НЕТ — поле растёт само (владелец,
   08.09.2026: «поле проекты сделано с ручным перетаскиванием размера — не
   нужно, пусть автоматически меняется»).

   Высоту пересчитывает `kabinet.js` по содержимому. Скрытая прокрутка нужна
   именно для этого: пока она видна, браузер считает высоту содержимого вместе
   с полосой и поле подрастало бы на её ширину при каждом пересчёте.

   Без скрипта поле остаётся обычным, с числом строк из разметки: работать
   форма продолжает, просто не растёт. */
textarea {
    resize: none;
    overflow: hidden;
}

/* ОБВОДКА ФОКУСА — СЕРАЯ, А НЕ СИНЯЯ (владелец, 06.09.2026: «не нужно цветов,
   это деловой стиль»). Убирать её вовсе нельзя: по ней человек, идущий по
   странице с клавиатуры, видит, где он сейчас. Тёмно-серая заметна не хуже
   синей и не спорит с числами, ради которых экран открыт.

   Подсветку строки в раскрытом списке рисует сам браузер — она не наша и
   правке отсюда не поддаётся. */
input:focus,
select:focus {
    outline: 2px solid var(--ink-quiet);
    outline-offset: 1px;
}

/* Подсказка в пустом поле набирается заметно светлее настоящего текста.
   Правится здесь разом для всех полей раздела, а не в каждом поле по
   отдельности: подсказка, неотличимая от значения, однажды приводит к тому,
   что чужой пример сохраняют как настоящую сумму. `opacity` задаётся явно —
   иначе Firefox приглушает цвет вторично и подсказка пропадает. */
input::placeholder,
textarea::placeholder {
    color: var(--ink-hint);
    opacity: 1;
}

.filter__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* КНОПКИ И ПОЛЯ — ОКРУГЛЫЕ (владелец, 06.09.2026: «у них нормально сделано
   выделение фоном, округлые кнопки — сделай похоже»). В кабинете Директа
   круглыми сделаны и кнопки, и поля отбора: круг отличает то, что нажимают, от
   того, что читают. Правится здесь разом для обоих разделов платформы —
   человек ходит по ним подряд, и два разных вида означали бы, что он каждый
   раз соображает, куда попал. */
/* КНОПКИ РАЗЛИЧАЮТСЯ ЦВЕТОМ ПО СМЫСЛУ ДЕЙСТВИЯ (владелец, 09.09.2026): «я не
   имел в виду, чтобы все кнопки сделать серыми… сделай все кнопки нормальных
   цветов, не сильно ярких, но чтобы было заметно, что кнопки. Нажать, допустим,
   сохранить — это какая-нибудь там синяя кнопка, а отменить — ну, оранжевая.
   Чтобы понятно было, что разные кнопки и визуально было понятно, куда жать,
   во всех разделах».

   ОТМЕНЁННЫЙ ДОВОД ОСТАЁТСЯ РЯДОМ С НОВЫМ — иначе через неделю отмену не
   отличить от ошибки. 06.09.2026 он же сказал: «все кнопки сделай похоже —
   небольшого размера, серым, не нужно цветов, это деловой стиль», и я снял
   разницу между главной и тихой целиком, сославшись на правило 46. Снял
   больше, чем было сказано: «серым» относилось к размеру и к крикливости, а
   не к запрету различать действия. Довод против цвета остаётся верным в своей
   части — синий во всю строку отбора уводит глаз от чисел, ради которых экран
   открыт; поэтому синяя здесь одна на экран, у главного действия, а не у
   каждой кнопки подряд.

   БЫЛО ЧЕТЫРЕ РОДА, СТАЛО ПЯТЬ — пятый заведён по прямому слову владельца
   (25.09.2026 08:20, ниже), а не по своему усмотрению: запрет «больше не
   заводить» держится, пока не назван новый род им самим.
     `.btn`            — главное действие экрана: сохранить, подключить,
                         показать. Синяя заливка.
     `.btn--quiet`     — второстепенное: перелистывание, отборы, «ещё».
                         Белая с серой рамкой.
     `.btn--otmena`    — отменить, вернуться, снять заявку. Оранжевая.
     `.btn--opasno`    — то, чего не вернуть: удалить, отвязать, отключить.
                         Красная.
     `.btn--otpravka`  — отправка сообщения живому клиенту (карточка заявки,
                         переписка через чат-бота). Зелёная, заметнее главной.
   Цвет `.btn--off` (край перелистывания) — не род действия, а состояние.

   `.btn--otpravka` ЗАВЕДЕНА 25.09.2026 (входящее 08:20): «в разделе chatbot...
   сделай кнопку отправки-сообщения... более яркой, она там бледная совсем,
   сделай какую-нибудь зелёную, то есть сильнее кнопку «Сохранить» и зелёная
   кнопка «Отправить»». Прежде «Отправить в переписку» стояла `.btn--quiet`
   (бледно-синяя — то, что он и назвал бледным), а «Сохранить состояние» —
   наравне с ней главной `.btn`; теперь отправка зеленее и заметнее сохранения,
   а «Сохранить состояние» понижена до `.btn--quiet`. Названа по смыслу
   действия, а не по цвету (правило заведения родов кнопок, тот же абзац).

   ВКЛЮЧЕНО 13.09.2026: синяя заливка у `.btn` — владелец прямо попросил
   («я просил сделать кнопки цветными, ты обещал сделать, но в итоге так и не
   сделал, займись кнопками тоже»), отсрочка от 09.09.2026 снята. Синяя кнопка
   на экране должна остаться одна — у главного действия; там, где рядом стоят
   несколько кнопок, второстепенным ставится `.btn--quiet` (белая с серой
   рамкой — тот же вид, что был у `.btn` раньше). */
.btn {
    display: inline-block;
    font: inherit;
    font-size: 14px;
    line-height: 1.2;
    padding: 7px 14px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent);
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

/* Второстепенное действие — БЛЕДНО-СИНЯЯ, а не белая. Слово владельца
   14.09.2026: «кнопка в личном кабинете и в разделе интеграции „настройка за
   меня" не выделена цветом, я сказал все кнопки нужно выделить цветом… все
   кнопки, которые у нас остались с белым фоном, сделали стандартными синим
   либо розовым».

   ПОЧЕМУ БЛЕДНАЯ, А НЕ ТАКАЯ ЖЕ СИНЯЯ, КАК ГЛАВНАЯ. Его же слово 09.09.2026:
   «нормальных цветов, не сильно ярких, но чтобы было заметно, что кнопки».
   Насыщенная синяя на экране остаётся одна — у главного действия; вторая
   такая же спорила бы с ней за внимание, и человек перестал бы понимать,
   куда жать. Белая же не читалась как кнопка вовсе — с этого замечание и
   началось. */
.btn--quiet {
    background: #e9f1fc;
    color: #1a4f8a;
    border-color: #a9c8ec;
}

.btn--quiet:hover {
    background: #dbe8f8;
}

/* КНОПКА, КОТОРАЯ РАСКРЫВАЕТ СПИСОК, — НЕ КНОПКА ДЕЙСТВИЯ, И ВЫГЛЯДИТ ИНАЧЕ.

   Слово владельца 26.09.2026 06:49 (снимок кабинета Яндекс.Директа лежит в
   `09-owner/materialy/4-Модули-платформы/TG-20260926-064835-…png`): «такие вот
   кнопки, как у тебя синим, сделай вот эти выпадающие списки хотя бы цветом не
   синим, а просто белым, серым, как сделано у них… кнопка — это то, на что
   нажимаешь и происходит какое-то действие, а здесь просто выпадает список, это
   просто меню». Его же слово 05:11 того же дня: «не круглыми, как кнопки, но
   прямоугольными… и должна быть там галочка вниз… прямоугольник со скруглёнными
   углами будет нормально выглядеть».

   Отсюда три отличия от `.btn`: белая заливка вместо цветной, серая рамка и
   тёмные буквы вместо синих, скруглённый прямоугольник (8 точек) вместо пилюли
   (999). Класс ставится ВМЕСТЕ с `.btn`, а не вместо: размеры, отступы и
   поведение при наведении остаются общими для всего кабинета.

   ПРАВИЛО «ОДНА СИНЯЯ КНОПКА НА ЭКРАНЕ» ЭТИМ НЕ НАРУШЕНО, а исполнено точнее:
   раскрытие списка — не действие, и синим оно быть не должно вовсе. */
.btn--spisok,
.btn--quiet.btn--spisok {
    background: var(--card);
    color: var(--ink);
    border-color: #c9cdd3;
    border-radius: 8px;
}

.btn--spisok:hover,
.btn--quiet.btn--spisok:hover {
    background: var(--bg);
    border-color: #b4b9c0;
}

/* Галочка стоит в самой кнопке, справа от слова, и поворачивается, когда
   список раскрыт: закрытое и раскрытое состояние должны различаться без
   подписи. Она нарисована знаком, а не картинкой, — значит остаётся и там, где
   картинки не загрузились. */
.btn__galka {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    line-height: 1;
    color: var(--ink-quiet);
    transform: translateY(-1px);
}

details[open] > .btn--spisok .btn__galka {
    transform: translateY(-1px) rotate(180deg);
}

/* РАСКРЫВАЮЩИЙСЯ СПИСОК БРАУЗЕРА — ПО ТОМУ ЖЕ ОБРАЗЦУ, ЧТО И КНОПКИ СПИСКОВ.

   Слово владельца 26.09.2026 07:21, дословно: «я просил сделать все кнопки по
   совпадающим меню, по одному образцу, в мастерной настройке тоже есть такие
   кнопки, там я вижу старый образец, переделай все одинаково, как ты сделал
   сейчас для личного кабинета».

   Старый образец — пилюля (`border-radius: 999px`, правило `input, select`
   выше) и уголок, нарисованный браузером по-своему в каждом: в мастере
   настройки, в отборе заявок и на доске один и тот же список выглядел
   трижды по-разному. Здесь у него становится тот же скруглённый прямоугольник
   и та же галочка вниз, что у `.btn--spisok`.

   ГАЛОЧКА НАРИСОВАНА КАРТИНКОЙ ВНУТРИ САМОГО ПРАВИЛА, а не знаком: у `select`
   нет места, куда положить `<span>`, и `::after` браузеры к нему не пускают.
   Картинка встроена строкой (`data:`), поэтому отдельного запроса не делает и
   политикой содержимого кабинета не запрещена.

   `appearance: none` снимает родной уголок. Поле при этом остаётся обычным
   `select`: список раскрывает браузер, работает палец, клавиатура и чтение с
   экрана. */
select {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 8px;
    padding-right: 32px;
    background-image: url("data:image/svg+xml;charset=utf-8,%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='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}

select:hover {
    border-color: #b4b9c0;
}

/* Список, которому некуда деться, — без картинки: у поля, раскрытого сразу на
   несколько строк, уголок обозначал бы то, чего нет. */
select[multiple],
select[size]:not([size="1"]) {
    background-image: none;
    padding-right: 14px;
}

/* Отмена — оранжевая. Заливка бледная, рамка и буквы насыщенные: рядом с синей
   она обязана читаться как «другое действие», но не спорить с ней за внимание
   («не сильно ярких»). */
.btn--otmena {
    background: #fdf1e3;
    color: #9a5209;
    border-color: #e0a463;
}

.btn--otmena:hover {
    background: #f9e3ca;
}

/* Неотменимое — красная. Тот же бледно-красный, что у сорванного канала
   (`.switch--trevoga`): один цвет беды на весь кабинет, второго не заводим. */
.btn--opasno {
    background: #fdecea;
    color: var(--danger);
    border-color: #e0857e;
}

.btn--opasno:hover {
    background: #fadad6;
}

/* Отправка сообщения клиенту — насыщенная зелёная, ЖИРНЕЕ И ЗАМЕТНЕЕ главной
   синей: единственный род, у которого заливка не «неяркая», а сам владелец
   попросил её выделяющейся (25.09.2026 08:20, разбор — выше, в шапке файла). */
.btn--otpravka {
    background: var(--otpravka);
    border-color: var(--otpravka);
    color: #ffffff;
    font-weight: 600;
}

.btn--otpravka:hover {
    background: var(--otpravka-dark);
    border-color: var(--otpravka-dark);
}

/* Край перелистывания: кнопка на месте, но никуда не ведёт. Ставится вместе с
   `--quiet`, поэтому цвет заливки здесь не переопределяется. */
.btn--off {
    color: var(--ink-quiet);
    cursor: default;
}

.link {
    color: var(--accent);
}

.error {
    color: var(--danger);
    margin: 0;
}

/* Сообщение о том, что всё получилось: «пароль изменён», «письмо отправлено».
   Цветом и рамкой отличается от отказа нарочно — человек читает не текст, а
   цвет, и красное «письмо отправлено» он прочтёт как отказ. */
.notice {
    color: var(--ink);
    background: #eef6ee;
    border: 1px solid #cfe3cf;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0 0 4px;
    font-size: 14px;
}

/* Пояснение под заголовком и под кнопкой: читается, но не спорит с главным. */
.hint {
    color: var(--ink-quiet);
    font-size: 14px;
    margin: 10px 0 0;
}

.found {
    color: var(--ink-quiet);
    font-size: 14px;
    margin: 18px 0 8px;
}

.found b {
    color: var(--ink);
}

/* Пустой список объясняется словами: голая страница выглядит поломкой. */
.empty {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 28px;
    text-align: center;
    color: var(--ink-quiet);
}

/* Таблица заявок */

/* РАЗДЕЛЬНЫЕ РАМКИ И ОТКАЗ ОТ ОБРЕЗКИ — не украшение, а условие липкого
   столбца ниже. Chromium не держит `position: sticky` на `th`/`td` при
   схлопнутых рамках, а `overflow: hidden` обрезает прилипшую ячейку. Замер
   направления 04 от 20.09.2026: свойство доходило до ячейки (`computed`
   честно печатал `sticky`), а при прокрутке на 807 точек левый край столбца
   уезжал в −572.

   При `border-spacing: 0` раздельные рамки выглядят как схлопнутые: у ячеек
   задана только нижняя черта, двойных линий не появляется. Скругление углов
   даёт не обрезка, а скругление крайних ячеек — правила сразу за этим. */
.leads {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: visible;
}

.leads thead tr:first-child th:first-child {
    border-top-left-radius: 7px;
}

.leads thead tr:first-child th:last-child {
    border-top-right-radius: 7px;
}

.leads tbody tr:last-child td:first-child {
    border-bottom-left-radius: 7px;
}

.leads tbody tr:last-child td:last-child {
    border-bottom-right-radius: 7px;
}

/* ПЕРВЫЙ СТОЛБЕЦ ОСТАЁТСЯ ВИДНЫМ ПРИ ПРОКРУТКЕ ВБОК — у ВСЯКОЙ таблицы
   кабинета, без отдельного класса. Без него правые столбцы читаются вслепую:
   видно «5 взято, 10 496 ₽», а чей это ряд — нет. Первая ячейка ряда называет
   его всегда: номер заказа, номер заявки, клиент, проект, направление, имя
   мастера.

   Фон ячейки обязателен: прозрачная при прокрутке накладывается на соседние.
   Он же гасит подсветку ряда и строку «Итого», поэтому обе возвращены
   отдельными правилами ниже — иначе у закреплённого столбца подсветка при
   наведении пропадает, а сумма выглядит обычной строкой. */
.leads th:first-child,
.leads td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card);
    border-right: 1px solid var(--line);
}

/* Шапка прокручивается вместе со своим первым столбцом и должна перекрывать
   соседние ячейки, а не уходить под них. */
.leads th:first-child {
    z-index: 3;
    background: var(--bg);
}

/* СТРОКА «ИТОГО» ДЕРЖИТ СВОЙ ФОН И В ЗАКРЕПЛЁННОМ СТОЛБЦЕ. Правило её фона
   стоит выше по файлу, чем закрепление, и при равном весе проигрывало ему:
   замер 21.09.2026 показал у первой ячейки суммы белый rgb(255,255,255)
   вместо серого — сумма выглядела обычной строкой списка. Вес здесь выше
   нарочно, местом в файле такое не чинится. */
.leads tbody tr.leads__total td:first-child {
    background: var(--bg);
}

/* Шапка отделена фоном, а не только чертой — как в кабинете Директа
   (снимок 20). При десятке столбцов одна черта теряется. */
.leads th {
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-quiet);
    background: var(--bg);
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.leads td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

/* ЧЕРТА СНИМАЕТСЯ ТОЛЬКО У САМОГО НИЗА ТАБЛИЦЫ, А НЕ У НИЗА КАЖДОЙ ГРУППЫ.
   Прежде здесь стояло `.leads tr:last-child td`, и в таблице с несколькими
   `<tbody>` — сводка оповещений собрана так: свой `tbody` на каждый вид —
   правило гасило черту у последнего ряда КАЖДОЙ группы. Граница между видами
   пропадала, и ряды читались отдельными прямоугольниками, а не сеткой
   (слово владельца 26.09.2026 05:11: «посмотри там в табличке, не все видны
   линии таблиц»). Низ таблицы черты не требует: её даёт рамка `.leads`. */
.leads > tbody:last-child > tr:last-child > td,
.leads > tr:last-child > td {
    border-bottom: none;
}

/* ВСЯ СТРОКА КЛИКАБЕЛЬНА (владелец, 18.09.2026): «у Flexbe при наведении
   выделяется вся строка… соответственно при клике проваливалась в заявку».
   Прежний цвет #fafbfc был почти не виден рядом с белым фоном карточки —
   владелец жаловался, что мимо номера промахивается мышью, тем более
   пальцем на телефоне. Подсветка и указатель стоят ТОЛЬКО на строках с
   `data-zayavka` (её ставит kabinet.js переходом по адресу), иначе
   подсветилась бы и строка «Итого» из `tablitsa.blade.php`, которая никуда
   не ведёт — для неё своё правило чуть выше и оно её не задевает. */
.leads tbody tr[data-zayavka]:hover {
    background: #eef3f8;
    cursor: pointer;
}

/* Закреплённая ячейка кроет ряд своим фоном — подсветку ей возвращаем
   отдельно, иначе ряд подсвечивается кроме первого столбца. */
.leads tbody tr[data-zayavka]:hover td:first-child {
    background: #eef3f8;
}

/* ЧИСЛА ПРИЖАТЫ ВПРАВО — все, а не только денежные (снимок 20). Столбец
   чисел читается сравнением разрядов: единицы под единицами. Прижатые влево,
   они заставляют сравнивать длину слова, а не величину. */
.col-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.col-sum,
.col-date {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* СТОЛБЕЦ ПЕРЕЧНЯ РАБОТ ОГРАНИЧЕН ПО ШИРИНЕ — иначе он растягивает всю
   таблицу, и правые столбцы уходят за край окна.

   У таблицы мастеров «Беру» восемнадцать столбцов, и один из них несёт
   перечень видов работ в несколько строк текста. Замер направления 04 от
   20.09.2026: при 1600 точках за краем оказывались «Взято», «Выполнено»,
   «Взял второй заказ», «Комиссия Сервиса» и «Куда шлём заявки» — ровно те, что
   в тот день впервые заполнились числами; контрольный снимок пришлось делать
   при 2800.

   Двадцать четыре знака ширины — мера, а не точки: столбец не зависит от
   кегля. Текст переносится по словам, а не обрезается многоточием: перечень
   работ читается целиком, просто в несколько строк. */
.col-works {
    max-width: 18ch;
    white-space: normal;
    word-break: break-word;
}

/* ЗАКРЕПЛЕНИЕ УШЛО В САМУ ТАБЛИЦУ, ЗДЕСЬ ОСТАЛСЯ ТОЛЬКО ПЛОТНЫЙ НАБОР —
   слово владельца 21.09.2026: «должен быть общий движок на все срм и таблицы,
   отличается только содержание». Правила закреплённого первого столбца стоят
   выше, при `.leads`, и действуют у всех десяти таблиц обоих кабинетов;
   отдельного класса-модификатора нет и заводить его не нужно. Когда таблица
   помещается в окно, закрепление себя ничем не показывает.

   ИМЯ СМЕНЕНО 21.09.2026: было `leads--s-imenem`, стало `leads--plotnaya`.
   Прежнее говорило про имя мастера, а закрепление ушло в `.leads` — предмет
   класса теперь один, плотный набор. Направление 04 из вида вышло и в него
   больше не идёт, их слово 21.09.2026.

   ПЛОТНЫЙ НАБОР СТАВИТСЯ ТОЛЬКО ТАМ, ГДЕ ЗАКАЗАН. Сегодня это одна таблица —
   мастера «Беру». Восемнадцать столбцов в 1346 точках не помещаются ни при
   какой вёрстке — замер 04 от 20.09.2026 дал 2153 точки при контейнере 1346.
   Прокрутка вбок остаётся, и ради неё же закреплён столбец; наше дело —
   отдать ей как можно меньше. */
.leads--plotnaya th,
.leads--plotnaya td {
    padding: 8px 8px;
    font-size: 12px;
}

/* Текстовые столбцы этой таблицы переносятся и не тянут строку: у неё их
   четыре — виды работ, удалённость, примечание, куда шлём заявки. */
.leads--plotnaya td {
    white-space: normal;
    word-break: break-word;
}

/* ТАБЛИЦА ЭТАПОВ ПЕРЕЕЗДА — ОДНА НА ВСЮ СТРАНИЦУ, а не по одной на этап
   (заказ владельца 28.09.2026): «зачем ты разбил всё на какие-то части…
   должна быть одна таблица, одна дорога… без разбиения на какие-то блоки».
   Название этапа больше не заголовок отдельного блока, а строка-разделитель
   `.tablitsa-razdel-etap` внутри общей таблицы — разметка у
   `cabinet/pereezd-proekt.blade.php`.

   ДЛИННЫЙ ТЕКСТ БЕЗ ПРОБЕЛОВ ВЫЛЕЗАЛ ЗА ГРАНИЦУ ЯЧЕЙКИ (его же слово: «поля
   не работают автоматическое расширение полей… тексты вылезают за границы»).
   Перенос — по словам, с довеском на слишком длинное слово
   (`word-break: break-word`), а НЕ «в любом месте» (`overflow-wrap: anywhere`)
   — этот приём уже резал имя собственное пополам, разбор у `.leads--plotnaya`
   выше. Столбцу кнопок задана минимальная ширина и запрет переноса середины
   слова кнопки — иначе «Не получается» ломалось на две строки, вторая его
   жалоба того же сообщения. */
.leads--etapy-pereezda td {
    white-space: normal;
    word-break: break-word;
}

.leads--etapy-pereezda td:last-child {
    min-width: 230px;
}

.leads--etapy-pereezda td:last-child .btn {
    white-space: nowrap;
}

/* Строка-разделитель этапа называет этап, а не проверяет строку — фон
   шапки и жирный текст отличают её от строк данных без второй таблицы
   внутри первой. */
.tablitsa-razdel-etap td {
    background: var(--bg);
    font-weight: 600;
}

/* ДОРОГА ИДЁТ ПОСЛЕДОВАТЕЛЬНО — заказ владельца 28.09.2026: «мы не можем по
   дороге ехать и перепрыгивать с одного участка дороги на другой». Этап,
   до которого дорога ещё не дошла, назван и цветом бледнее строк работы —
   слово «ждёт очереди» в разметке уже несёт смысл, цвет только не даёт
   спутать его глазами с текущим этапом. Пройденный этап остаётся обычным:
   он уже случился, приглушать его незачем. */
.tablitsa-razdel-etap--zhdet td {
    color: var(--ink-quiet);
}

/* Этап, которого программа переезда не мерит, приглушён так же, как ждущий:
   «пройден» над ним не стоит никогда (поручение Н-173, пункт 5), и глазами
   его нельзя спутать с этапом в работе. */
.tablitsa-razdel-etap--ne_proveryaetsya td {
    color: var(--ink-quiet);
}

.tablitsa-razdel-etap--tekushchiy td {
    border-left: 3px solid var(--accent);
}

.etap-status-tekushchiy {
    color: var(--accent-dark);
    font-weight: 600;
}

/* БЛОК «ГДЕ МЫ СЕЙЧАС» — верх страницы переезда, заказ владельца 28.09.2026:
   он должен увидеть ход дела сразу, не читая таблицу строку за строкой.
   Левая полоса цветом отличает блок от прочих на этой же странице. */
.block--svodka {
    border-left: 4px solid var(--accent);
}

/* ЗНАЧОК «ВСЁ ПРОШЛО / ОСТАНОВИЛОСЬ» — заказ владельца 28.09.2026 10:44:
   «показать зелёный свет, что всё прошло. Если остановилось, что-то держит,
   то красный значок должен гореть». Цвет здесь не единственный носитель
   смысла — слово рядом стоит всегда в разметке страницы, а не только этот
   кружок: он читает и в терминале, где кружка может не быть видно вовсе. */
.znak-sostoyaniya {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.znak-sostoyaniya--gotovo {
    background: #2e7d46;
}

.znak-sostoyaniya--ostanovka {
    background: var(--danger);
}

/* ЗАСТАВА ПЕРВОЙ СТРОКОЙ СТРАНИЦЫ ПЕРЕЕЗДА — поручение Н-173, пункт 1: текст
   из поля `zastava` снимка стоит выше заголовка и ссылок, и его нельзя
   пролистать не заметив. Рамка слева и приглушённый фон отличают заставу от
   обычного текста, не выкрикивая её цветом тревоги: это не ошибка, а граница
   работы. Текст переносится по словам — на узком экране за край не выходит
   (его слово 28.09.2026 10:42). */
.zastava-pereezda {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-left: 4px solid var(--accent);
    background: var(--bg);
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
}

/* Номер набирается на слух и переписывается в телефон — моноширинный
   разрядный набор здесь не украшение, а защита от опечатки. */
.phone {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.muted {
    color: var(--ink-quiet);
    font-size: 13px;
}

/* Состояние — цветом, но приглушённым: в списке разом двадцать пять
   состояний, и яркие метки перебивают то, ради чего список открыт. */
.status {
    display: inline-block;
    font-size: 13px;
    line-height: 1.2;
    padding: 4px 9px;
    border-radius: 20px;
    white-space: nowrap;
    background: #eef0f3;
    color: var(--ink);
}

.status--new {
    background: #e5edfb;
    color: #24508f;
}

.status--in_work {
    background: #fdf0d8;
    color: #7a5510;
}

.status--won {
    background: #e0f2e3;
    color: #256b32;
}

.status--lost {
    background: #f2e6e5;
    color: #8a3a34;
}

/* Состояния заказа «Беру» (807, раздел 5.1). Цвета те же и по тому же
   правилу, что у заявок: заведена — синее, роздана и взята — жёлтое и
   тёплое, выполнена — зелёное. Второй набор цветов для второго продукта
   заставлял бы владельца помнить два словаря. */
.status--beru-new {
    background: #e5edfb;
    color: #24508f;
}

.status--beru-shown,
.status--beru-taken {
    background: #fdf0d8;
    color: #7a5510;
}

.status--beru-done {
    background: #e0f2e3;
    color: #256b32;
}

/* Состояния карточки мастера (807, раздел 5.2). */
.status--beru-candidate {
    background: #eef0f3;
    color: var(--ink);
}

.status--beru-admitted {
    background: #e0f2e3;
    color: #256b32;
}

.status--beru-paused {
    background: #fdf0d8;
    color: #7a5510;
}

.status--beru-removed {
    background: #f2e6e5;
    color: #8a3a34;
}

/* Приписка — короткое сведение рядом с именем: не ошибка и не действие. */
.pripiska {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    line-height: 1.2;
    padding: 2px 6px;
    border: 1px solid #d5d8dd;
    border-radius: 10px;
    color: var(--ink-quiet);
    cursor: help;
}

/* Перелистывание */

.pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 18px 0 40px;
}

.pages__count {
    color: var(--ink-quiet);
    font-size: 14px;
}

/* Карточка заявки (410, раздел 5.2) */

.card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crumbs__sep {
    color: var(--ink-quiet);
}

.crumbs__num {
    font-size: 24px;
    font-variant-numeric: tabular-nums;
}

/* Время приёма отодвинуто вправо: смотрят на него редко, а место слева
   занимает то, чем пользуются в каждой заявке. */
.card-head__time {
    margin-left: auto;
    color: var(--ink-quiet);
    font-size: 14px;
}

/* Стрелки разбора: заявки разбираются подряд, и возврат в список между
   каждыми двумя удваивал бы число действий (410, раздел 5.2). */
.arrows {
    display: flex;
    gap: 6px;
}

.arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #c9cdd3;
    border-radius: 50%;
    background: var(--card);
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
}

.arrow:hover {
    background: #eef0f3;
}

/* Край отобранного набора: стрелка на месте, но никуда не ведёт. */
.arrow--off {
    color: #c2c6cc;
    border-color: var(--line);
    cursor: default;
}

.card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
}

.card__main {
    flex: 1 1 620px;
    min-width: 0;
}

.card__aside {
    flex: 0 0 300px;
}

.block {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.block__title {
    font-size: 17px;
    margin: 0 0 12px;
}

/* ОТСТУП ПЕРЕД ВТОРЫМ И СЛЕДУЮЩИМИ ЗАГОЛОВКАМИ БЛОКА. Слово владельца
   08.09.2026, проходя путь клиента: «между „Что и каким каналом слать“ сверху
   отступа вообще нет». На странице оповещений в одном блоке идут подряд шесть
   разделов, и без отступа заголовок прилипал к концу предыдущего. */
.block__title:not(:first-child) {
    margin-top: 28px;
}

.block__sub {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-quiet);
    margin: 14px 0 6px;
}

.block__sub:first-of-type {
    margin-top: 0;
}

/* Подпись и значение — двумя столбцами, как на прежнем экране: подпись слева
   узкой колонкой, значение справа. */
.pairs {
    width: 100%;
    border-collapse: collapse;
}

.pairs th {
    width: 34%;
    text-align: left;
    font-weight: 400;
    color: var(--ink-quiet);
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.pairs td {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    word-break: break-word;
}

.pairs tr:last-child th,
.pairs tr:last-child td {
    border-bottom: none;
}

.pairs--tight th,
.pairs--tight td {
    font-size: 14px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.ym {
    font-variant-numeric: tabular-nums;
}

/* Состояние: список, сумма, причина и кнопка одной строкой — переход делается
   одним движением, а не походом по нескольким экранам. */
.state__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.state .btn {
    min-height: 38px;
}

/* То же состояние, показанное клиенту на чтение (407, раздел 5). Отдельного
   вида ему не придумано нарочно: это та же метка состояния, что в списке, —
   клиент и владелец должны читать одно и то же одинаково. */
.state-ro {
    margin: 0 0 12px;
}

.hint {
    margin: 12px 0 0;
    color: var(--ink-quiet);
    font-size: 13px;
}

.state .error,
.note .error {
    margin-top: 10px;
}

.note {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.note textarea {
    width: 100%;
    font: inherit;
    color: inherit;
    background: var(--card);
    border: 1px solid #c9cdd3;
    border-radius: 6px;
    padding: 10px;
    resize: vertical;
}

.note textarea:focus {
    outline: 2px solid var(--ink-quiet);
    outline-offset: 1px;
}

/* Сделанное подтверждается словами: без ответа страница после сохранения
   выглядит так, будто ничего не произошло. */
.done {
    background: #e0f2e3;
    border: 1px solid #b9dcbf;
    border-radius: 8px;
    color: #256b32;
    padding: 10px 14px;
    margin: 0 0 16px;
}

/* Повтор — сведение, а не ошибка, и полоса нарочно спокойная, а не тревожная. */
.dup-note {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid #c9cdd3;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--ink-quiet);
}

.dup-note .link {
    font-variant-numeric: tabular-nums;
}

/* Неопознанное имя — настроечная ошибка, а не поломка заявки: заявка принята
   целиком. Полоса поэтому предупреждающая, но не тревожная, и стоит она у
   самих полей, а не над карточкой. */
.name-note {
    background: #fdf6e3;
    border: 1px solid #e8d9a8;
    border-left: 3px solid #c9a227;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 14px;
    font-size: 14px;
    color: #6b5a1f;
}

.quiet {
    color: var(--ink-quiet);
    margin: 0;
}

.back {
    margin: 14px 0 0;
}

/* Журнал действий: кто и когда менял заявку (410, раздел 7).

   Строка читается слева направо — когда, кто, что: журнал просматривают
   сверху вниз в поисках нужного дня, и время должно стоять на одном месте у
   всех строк, а не съезжать вслед за длиной имени. Отсюда одинаковая ширина
   первых двух колонок и выравнивание третьей по левому краю. */
.journal {
    list-style: none;
    margin: 0;
    padding: 0;
}

.journal__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.journal__row:last-child {
    border-bottom: 0;
}

.journal__when {
    flex: 0 0 130px;
    color: var(--ink-quiet);
    font-variant-numeric: tabular-nums;
}

.journal__who {
    flex: 0 0 160px;
    font-weight: 600;
}

.journal__what {
    flex: 1 1 260px;
}

/* Узкий экран: три колонки становятся двумя строками — время и имя рядом,
   само изменение под ними. Сжимать их в три нечитаемых столбика незачем. */
@media (max-width: 700px) {
    .journal__when,
    .journal__who {
        flex: 0 0 auto;
    }

    .journal__what {
        flex: 1 1 100%;
    }
}

/* Заявка не найдена: промах в цифре номера — обычное дело, и объясняется он
   словами, а не страницей ошибки сервера. */
.missing {
    max-width: var(--stranica-uzkaya);
    margin: 60px auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 28px;
    text-align: center;
}

.missing p {
    color: var(--ink-quiet);
}

/* Вход */

.login {
    max-width: var(--stranica-uzkaya);
    margin: 60px auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 28px;
}

/* ПОЛЯ УЖЕ КАРТОЧКИ, И ЭТО НЕ МЕЛОЧЬ. Слово владельца 14.09.2026: «сделай
   размер формы поменьше на ПК-версиях, чтобы у них было ограничение по ширине,
   а то на всю ширину этого экрана слишком большие поля для ввода и кнопки
   получаются».

   ПОЧЕМУ КАРТОЧКА ОСТАЁТСЯ ШИРЕ ФОРМЫ. В карточке живут не только поля: там
   заголовок, пояснение про платформу, реквизиты и ссылки на правовые
   страницы. Им ширина в 520 точек нужна — иначе текст ломается на короткие
   огрызки. Полю же ввода почты столько не нужно никогда: длинный адрес всё
   равно виден целиком, а пустое поле во всю карточку выглядит бланком, а не
   формой входа.

   ОГРАНИЧЕНИЕ СНИМАЕТСЯ НА УЗКИХ ЭКРАНАХ САМО: max-width меньше доступной
   ширины ничего не режет, а на телефоне доступная ширина и так меньше. */
.login__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
    max-width: 340px;
}

/* Кнопка «Войти» на странице платформы (корень домена рабочего места).
   Кнопка, а не ссылка строкой: это единственное действие страницы, и искать
   его глазами человек не должен. */
.home__go {
    margin: 20px 0 0;
}

/* Подпись «чей это сервис» под формой входа (410, раздел 9.13). Отделена
   чертой и приглушена: это не часть работы, а ответ на вопрос «куда я попал»,
   и перетягивать внимание с формы она не должна. */
.whose {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.whose__line {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-quiet);
}

.whose__line:last-child {
    margin-bottom: 0;
}

/* Приписка в шапке для не вошедшего: «система учёта заявок» рядом с именем.
   Тем же приглушённым цветом, что и подпись вошедшего, — это подпись к месту,
   а не второе название. */
.top__what {
    margin-left: 8px;
    /* Полоса разводит содержимое по краям (`space-between`), и без этой
       строки приписка улетела бы к правому краю, оторвавшись от имени, к
       которому относится. */
    margin-right: auto;
    font-size: 13px;
    color: var(--ink-quiet);
}

/* Телефон и узкий экран: таблица шире экрана прокручивается вбок сама,
   а не ломает страницу. */
@media (max-width: 900px) {
    /* ПРОКРУЧИВАЕТСЯ ОБЁРТКА, А НЕ САМА ТАБЛИЦА (владелец, 09.09.2026).

       Прежде здесь стояло `display: block; overflow-x: auto` у самой таблицы.
       Это не работало: ширину таблице задаёт скрипт ширин столбцов, заданная
       ширина у блочного элемента становится его собственной, и таблица выходила
       за край страницы — прокручивалась вся страница целиком, а её ползунок
       браузер держит у нижнего края окна, ниже кнопок действий.

       Обёртка `.tablitsa-obertka` для этого и заведена, и прокрутку она несёт
       сама, безо всяких условий ширины экрана: её ползунок стоит сразу под
       таблицей. Здесь поэтому не осталось ничего — правило снято, а не
       заменено вторым таким же. Таблица остаётся таблицей: `display: block`
       ломал бы ей разметку столбцов заодно. */

    /* Две колонки карточки на узком экране становятся одной: сведения об
       источнике уходят под саму заявку, а не сжимаются в нечитаемый столбик. */
    .card {
        flex-direction: column;
        /* Промежуток между колонками нужен, пока они рядом. В столбце его роль
           уже исполняет собственный отступ блоков, и оставленный он давал бы
           между «Рекламой» и «Источником» шов шире, чем между всеми прочими
           блоками, — то есть читался бы разрывом. */
        gap: 0;
    }

    /* ГЛАВНАЯ КОЛОНКА ТЕРЯЕТ ЗАДАННУЮ ШИРИНУ (владелец, 09.09.2026, снимок с
       телефона: между «Рекламой» и «Источником» пустая полоса в пол-экрана).

       Причина не в отступах, а в том, что `flex: 1 1 620px` задаёт размер
       вдоль главной оси. Пока колонки стоят рядом, главная ось — ширина, и 620
       точек это ширина. Стоит развернуть карточку в столбец — та же строка
       начинает означать ВЫСОТУ: колонка получает 620 точек снизу и растягивает
       их, потому что `flex-grow` равен единице.

       Здесь она перестаёт распоряжаться высотой вовсе: высоту задаёт
       содержимое. То же самое и у соседней колонки строкой ниже. */
    .card__main {
        flex: 0 1 auto;
        width: 100%;
    }

    .card__aside {
        flex: 0 1 auto;
        width: 100%;
    }
}

/*
    Клиентский кабинет (407, раздел 13).

    Оформление лежит здесь же, а не отдельным файлом: кабинет и мини-CRM — два
    раздела одной платформы, один и тот же человек ходит по обоим, и общий набор
    цветов, полей и таблиц держит их похожими сам, без сверки глазами.
*/

/* Выбор периода: готовые отрезки слева, произвольные даты справа. */
.periods {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin: 16px 0 8px;
}

.periods__own {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin-left: auto;
}

/* Итог за период: числа крупно, в ряд, по одному на карточку. */
.totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.total {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
}

.total__what {
    color: var(--ink-quiet);
    font-size: 14px;
}

/* Само число — самое крупное на экране: за ним человек сюда и пришёл. */
.total__value {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 4px;
    white-space: nowrap;
}

/* Сравнение с прошлым периодом и причина непосчитанного набраны одинаково
   тихо: и то и другое — пояснение к числу, а не второе число. */
.total__change {
    color: var(--ink-quiet);
    font-size: 13px;
    margin-top: 6px;
}

.reports {
    list-style: none;
    margin: 8px 0 24px;
    padding: 0;
}

.reports__row {
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 0;
}

/* Строка с формой внутри (кнопка «Отключить» у чата Telegram, «Оповещения»):
   форма не должна раздвигать строку своим собственным отступом. */
.reports__row form {
    margin: 0;
}

/* ─────────────────────────── Раздел «Оповещения» (задача владельца 25.08.2026) ───
   Один вид оповещения — одна карточка: подпись и пояснение сверху, каналы —
   рядом внизу. Ширина канала фиксирована, чтобы столбцы разных карточек
   стояли друг под другом, хотя в самой карточке это не таблица, а список
   ради того, чтобы читалка с экрана не объявляла её таблицей чисел. */
.notify-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0 24px;
}

.notify-row {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
}

.notify-row__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.notify-row__label {
    font-weight: 600;
}

/* Две группы внутри карточки вида (407, раздел 18): «Основной канал» —
   Telegram или MAX, включён ровно один; «Копия на почту» — сама по себе,
   вторым экземпляром. Группы разделены подписью, а не рамкой: рамка внутри
   карточки читалась бы как вторая карточка. */
.notify-group {
    margin-top: 12px;
}

.notify-group__name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Выбранный канал перестал работать, или оба мессенджера выключены. Сбой не
   должен выглядеть тишиной (409, раздел 14) — потому это строка на экране, а
   не только запись в журнале. */
.notify-row__warn {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-left: 3px solid var(--accent);
    background: var(--bg);
    font-size: 13px;
}

.notify-row__channels {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.notify-channel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 110px;
    max-width: 260px;
}

.notify-channel__name {
    color: var(--ink-quiet);
    font-size: 13px;
}

/* Причина, по которой канал недоступен, и что сделать, чтобы он заработал.
   Не подсказка при наведении, а строка на экране: с 27.08.2026 недоступный
   канал показывается всем клиентам, и объяснение, которое видно только
   мышью, для половины из них не существует вовсе. */
.notify-channel__hint {
    color: var(--ink-quiet);
    font-size: 12px;
    line-height: 1.35;
}

/* Клиентский переключатель — кнопка-состояние, а не флажок с `onchange`
   (политика содержимого раздела запрещает встроенные обработчики). Форма
   вокруг неё в разметке уже занимает всю ширину `.notify-channel`, поэтому
   кнопке отдельная ширина не нужна. */
.switch {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 14px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    background: var(--bg);
    color: var(--ink-quiet);
}

/* ЦВЕТ ПЕРЕКЛЮЧАТЕЛЯ ГОВОРИТ, ДОХОДИТ ЛИ ОПОВЕЩЕНИЕ (владелец, 06.09.2026):
   «включённые каналы зелёным, выключенный серым, а если оба выключены — оба
   красным, то есть это будет аларм для клиента, что оповещения не настроены;
   когда один из них работает, он зелёный — значит всё работает нормально.
   „Почта уходит всегда“ — вместо синего бледный зелёный».

   Это единственное место в кабинете, где цвет остался после перехода на
   деловой серый, и остался он не для красоты: здесь цвет — не украшение
   кнопки, а состояние доставки, которое надо увидеть, не читая. */
.switch--on {
    background: #2e7d46;
    border-color: #2e7d46;
    color: #fff;
}

/* Ни один мессенджер не доносит это оповещение — красным помечены ОБА, и это
   не «выключено», а «не настроено». */
.switch--trevoga {
    background: #fdecea;
    border-color: var(--danger);
    color: var(--danger);
}

/* Почта: бледный зелёный. Она уходит всегда и выключателя не имеет, поэтому
   и цвет спокойнее — это не выбор, а состояние. */
.switch--vsegda {
    background: #eef7f1;
    border-color: #9ec7ac;
    color: #2e6b45;
}

/* Неактивный переключатель — прямое требование владельца 27.08.2026:
   «показывать нужно все каналы всем клиентам… просто ползунок переключателя
   сделай неактивным». Виден, но не нажимается; почему — сказано строкой
   рядом (`.notify-channel__hint`). */
.switch--locked {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Строка, которую человек уносит с собой, и кнопка «скопировать» рядом.

   ПЕРЕНОС ОБЯЗАТЕЛЕН, И ИМЕННО `break-all`. Ни ссылка привязки, ни код не
   содержат пробелов: без разрешения рвать где угодно строка вылезла бы за
   край и растянула бы всю страницу вбок — жалоба владельца 31.08.2026,
   «когда сжимаю окно ссылка становится как на скрине». Проверено на ширине
   360 пикселей — обычный телефон.

   `min-width: 0` у значения — не украшение: элемент внутри `flex` по
   умолчанию не даёт себя сжать уже своего содержимого, и перенос без этой
   строки не срабатывает. */
/* Строка с ключом и значком копирования.

   СИНЕЙ РАМКИ БОЛЬШЕ НЕТ (владелец, 06.09.2026, снимок 22): «в мессенджере
   MAX, когда подключаешь, осталась непонятная синяя рамка снизу и с боков,
   надо её убрать». Рамка была цветной и без верхней стороны потому, что
   строка приклеивалась снизу к цветному абзацу «код одноразовый, живёт 72
   часа». Абзаца больше нет — подключение расписано шагами, — а рамка от него
   осталась и висела сама по себе, ничего не обозначая.

   ЗНАЧОК КОПИРОВАНИЯ СТОИТ ВПЛОТНУЮ К КЛЮЧУ, а не у правого края (его же
   слово): «символ копирования поднеси ближе к самому коду, потому что на ПК
   он уходит куда-то далеко вправо, и пользователь не увидит, что можно
   нажать». Поэтому ключ не растягивается на всю ширину (`flex: 0 1 auto`), а
   занимает столько, сколько занимает. */
.copyline {
    /* Рамка обнимает ключ, а не тянется во всю ширину: растянутая на всю
       строку, она читается как пустое поле ввода, в которое надо что-то
       вписать. */
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 12px;
    margin-top: 0;
}

.copyline__value {
    flex: 0 1 auto;
    min-width: 0;
    word-break: break-all;
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 1.45;
}

/* Кнопка со значком. Скрыта в разметке и показывается скриптом только там,
   где браузер умеет копировать (`public/js/copy-line.js`).

   ОТДЕЛЬНОЕ ПРАВИЛО НА `[hidden]` ЗДЕСЬ ОБЯЗАТЕЛЬНО. Собственный `display`
   элемента сильнее умолчания браузера `[hidden] { display: none }` — без
   этой строки скрытая кнопка осталась бы на экране и не делала бы ничего
   ровно там, где копировать нечем. */
.copyline__btn[hidden],
.copyline__done[hidden] {
    display: none;
}

.copyline__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg);
    color: var(--ink-quiet);
    cursor: pointer;
}

.copyline__btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.copyline__icon {
    display: block;
}

/* «скопировано» — короткая подпись рядом, гаснущая сама. Без всплывающих
   окон: слово владельца 31.08.2026. */
.copyline__done {
    flex: 0 0 auto;
    align-self: center;
    font-size: 13px;
    color: var(--ink-quiet);
}

/*
 * ВЫБОР СТОЛБЦОВ КАБИНЕТА (407, раздел 13.6; решение владельца 04.09.2026).
 *
 * Блок свёрнут по умолчанию: настройка нужна раз в жизни, а таблица над ней —
 * каждый раз. Раскрывающий заголовок остаётся заголовком блока, поэтому
 * `summary` берёт вид `.block__title`, а не браузерное умолчание.
 */
details.block > summary {
    cursor: pointer;
    margin: 0;
}

details.block[open] > summary {
    margin-bottom: 12px;
}

.stolbtsy {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.stolbtsy li {
    padding: 5px 0;
    border-bottom: 1px solid var(--line);
}

.stolbtsy li:last-child {
    border-bottom: 0;
}

.stolbtsy label {
    cursor: pointer;
    /* Галочка и подпись — одной строкой: подпись длинная, и перенос её
       посередине читался бы как два разных столбца. */
    display: inline;
}

/* Пояснение помельче и следом за подписью, а не под ней: строка «Кликов —
   сколько раз перешли на ваш сайт» читается как одно предложение. */
.stolbtsy .quiet {
    font-size: 13px;
}

/*
    ТЕЛЕФОН — ОСНОВНОЙ СПОСОБ ВХОДА (слово владельца 06.09.2026: «мобильный
    основной способ входа, учти это»).

    Ниже — только то, чего не решает уже стоящая разметка: сетка итогов и
    прокрутка таблиц приспосабливаются сами, а вот управление, шапка и поля
    ввода на узком экране требуют своих правил.
*/
@media (max-width: 600px) {
    .wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* ВЫБОР ПЕРИОДА В ОДИН СТОЛБЕЦ. При `margin-left: auto` поля дат
       прижимались вправо и вставали лесенкой: список сверху, «С» справа, «По»
       слева. На узком экране порядок сверху вниз читается сам. */
    .periods,
    .periods__own {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        width: 100%;
    }

    .periods .btn,
    .periods select,
    .periods input[type="date"] {
        width: 100%;
    }

    /* ПОЛЯ ВВОДА НЕ МЕЛЬЧЕ 16 ПИКСЕЛЕЙ. Safari на iPhone сам увеличивает
       страницу, когда касаются поля с меньшим шрифтом, и клиент остаётся на
       увеличенной странице, не понимая, что произошло. */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    /* ПАЛЕЦ ШИРЕ УКАЗАТЕЛЯ: кнопки и списки не ниже 44 точек — размер, ниже
       которого промах по соседней кнопке становится обычным делом. */
    .btn,
    select,
    input[type="date"] {
        min-height: 44px;
    }

    /* Шапка: имя сервиса, кто вошёл и две кнопки не помещаются в строку. */
    .top__inner {
        flex-wrap: wrap;
        gap: 8px;
    }

    .top__who {
        flex: 1 1 100%;
        order: 3;
    }

    /* Итог за период — по карточке в ряд: две в ряд на 360 точках дают
       перенос числа, а число здесь главное. */
    .totals {
        grid-template-columns: 1fr;
    }

    .total__value {
        font-size: 24px;
    }

    /* Выбор столбцов: галочка и подпись в строку, пояснение под ними. */
    .stolbtsy .quiet {
        display: block;
        margin-top: 2px;
    }

    /* ─────────── КАБИНЕТ НА ТЕЛЕФОНЕ (владелец, 06.09.2026) ───────────
       Дословно: «в ней сейчас всё расползается, кнопки почему-то улетают за
       пределы экрана, за пределы браузера; текст, размер шрифта не уменьшается
       и приходится далеко двигать ползунком». Телефон — основной способ входа,
       и правится это здесь, а не отдельным видом страницы: два вида одного
       экрана расходятся молча. */

    /* Буквы мельче: при ширине 360 точек шрифт в 16 пикселей даёт 22 знака в
       строке, и любая таблица уезжает вбок. Поля ввода при этом остаются
       шестнадцатью — правило Safari выше. */
    body {
        font-size: 15px;
    }

    /* Поля по краям на телефоне. Было 8 точек — владелец 06.09.2026 (снимок
       22): «в мобильной версии у нас очень маленькие поля слева и справа».
       Текст, начинающийся в восьми точках от края, читается как обрезанный, а
       на телефоне с изогнутым краем экрана и вправду подрезается. */
    .wrap--vo-vsyu {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* КНОПКИ НЕ УЛЕТАЮТ ЗА КРАЙ. Формы отбора — в столбец во всю ширину:
       «Проект» с кнопкой «Показать» в строке не помещались и уезжали вправо
       вместе с полем. Правило было написано для `.periods`, но форма выбора
       проекта — `.filter`, и её оно не касалось. */
    .filter,
    .filter__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .filter .btn,
    .filter select,
    .filter input {
        width: 100%;
    }

    /* Заголовок раздела и кнопка рядом с ним переносятся, а не сжимаются. */
    .head {
        flex-wrap: wrap;
    }

    .head--razdel {
        font-size: 18px;
    }

    /* Верхнее меню видов уезжает своей полосой, а не растягивает страницу.
       Три вкладки в строку на 360 точках не помещаются. */
    .kabinet-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 14px;
    }

    .kabinet-nav__link {
        white-space: nowrap;
    }

    /* МЕНЮ НА ТЕЛЕФОНЕ НЕ ПРОКРУЧИВАЕТСЯ САМО — оно переносит пункты строками
       и занимает столько высоты, сколько им нужно.

       Прежде здесь стояло `overflow-x: auto`. Прокрутка по одной оси делает
       прокручиваемой и вторую (значение `visible` по другой оси браузер
       заменяет на `auto`), а в колоночной раскладке `.kabinet` меню получало
       долю СВОБОДНОЙ высоты — и обрезалось посреди пункта. Замер направления 04
       от 20.09.2026 на трёх страницах подряд: коробка меню 190 точек при
       содержимом 208, «Клиенты» режутся пополам, «Личный кабинет» ниже не виден
       вовсе. Владелец увидел это на своём снимке доски воронки. */
    .razdely {
        overflow: visible;
    }

    /* Таблица: мельче буквы и уже отступы. Числа при этом остаются в одну
       строку — переносить их нельзя, разряды перестанут читаться. */
    .leads {
        font-size: 13px;
    }

    .leads th,
    .leads td {
        padding: 8px 8px;
    }

    /* Тянуть столбцы пальцем незачем: на телефоне таблица и так прокручивается,
       а ручка отнимала бы место у заголовка. */
    .leads__ruchka {
        display: none;
    }
}

/* Таблицы кабинета прокручиваются вбок так же, как таблица заявок: правило
   выше названо для `.leads`, а таблица кампаний пользуется тем же классом. */
@media (max-width: 900px) {
    .totals {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

/*
    УСТРОЙСТВО КАБИНЕТА — ТРИ МЕСТА ПОД ТРИ РАЗНЫХ ВОПРОСА (владелец, 06.09.2026,
    по образцу кабинета Яндекса, снимок 20).

      • `.kabinet-nav`  — какой отчёт смотрим: общий или по кампаниям;
      • `.periods`      — как смотреть: период, состав столбцов;
      • `.razdely`      — все возможности: статистика, отчёты, оповещения.

    Сваленные в один ряд, эти вопросы заставляют перечитывать весь ряд ради
    любого из трёх.
*/
.kabinet-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
}

.kabinet-nav__link {
    color: var(--ink-quiet);
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 2px solid transparent;
}

.kabinet-nav__link:hover {
    color: var(--ink);
}

/* Где стоишь — видно линией под словом, а не цветом: цвет уже занят
   ссылками, и второй его смысл читался бы как «сюда тоже можно нажать». */
.kabinet-nav__link--here {
    color: var(--ink);
    border-bottom-color: var(--ink);
    font-weight: 600;
}

/* Мера НДС в заголовке — тем же кеглем, но спокойнее: это не второе название
   раздела, а уточнение к числам под ним. */
.head__mera {
    color: var(--ink-quiet);
    font-weight: 400;
}

/* ПОРЯДОК ДЕЙСТВИЙ — НУМЕРОВАННЫМИ ШАГАМИ (владелец, 06.09.2026): «я просил
   для меня делать нормальные инструкции, для клиента тем более — не нужно
   слишком подробно, просто по шагам: зайдите туда, введите это, получите то;
   лишней информации быть не должно».

   Было: один абзац, в котором вперемешку лежали действие, срок жизни ключа и
   предупреждение «сохраните, второй раз не покажется». Человек читал его целиком,
   чтобы понять, что от него хотят, — а хотят от него трёх нажатий. */
.shagi {
    margin: 10px 0;
    padding-left: 22px;
}

.shagi > li {
    margin-bottom: 10px;
}

.shagi .copyline {
    margin-top: 6px;
}

/* ─────────── ВТОРАЯ СТРОКА УПРАВЛЕНИЯ (владелец, 06.09.2026) ───────────
   Дословно: «второе сверху меню ты не сделал. Ты их сделал несколько пунктов
   в столбик, а нужно в горизонтальном виде… там нужно добавить период, выбор
   столбцов таблицы, выбор клиента».

   Один ряд, всё в нём — по образцу второй строки кабинета Директа (снимок 20):
   действие с краю, за ним отборы, справа выпадающий блок со столбцами.
   Переносится по ширине, а не сжимается: сжатый список показывает обрезанное
   название периода, и выбранное перестаёт читаться. */
.panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

/* Отборы — одной формой и одной кнопкой «Показать» (см. dashboard.blade.php). */
.panel__otbor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

/* Поле без подписи сверху: название живёт в `aria-label`, а на экране его
   говорит само выбранное значение — «Последние 30 дней». */
.panel .field--bez-podpisi {
    display: block;
}

/* Подписи «С» и «По» встают СЛЕВА от числа, а не над ним: над числом они
   поднимали бы ряд вдвое ради двух букв. */
.panel .field {
    display: flex;
    /* Именно строкой: общее правило `.field` ставит подпись НАД полем, и в
       ряду управления две буквы «С» и «По» поднимали бы его высоту вдвое. */
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.panel .field__label {
    margin: 0;
    white-space: nowrap;
}

.panel .periods__own {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

/* Выпадающий блок столбцов: закрытый — такая же кнопка в ряду, открытый —
   занимает всю ширину под рядом, иначе список из полутора десятков строк
   сдавливался бы в остаток строки. */
.panel__vypadayushchiy > summary {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
}

.panel__vypadayushchiy > summary::-webkit-details-marker {
    display: none;
}

/* ВЫПАДАЮЩИЙ БЛОК НАКРЫВАЕТ СОДЕРЖИМОЕ, А НЕ РАЗДВИГАЕТ РЯД (снимок 21):
   раздвигая ряд, он сдвигал бы вниз всю таблицу, и человек терял бы из виду
   строку, ради которой открыл список. */
.panel__vypadayushchiy {
    position: relative;
}

/* ПАНЕЛЬ, РАСКРЫВАЮЩАЯСЯ ВЛЕВО, — для кнопок, стоящих у правого края.

   Умолчание прижимает панель левым краем к кнопке, и она растёт вправо. У
   кнопки, стоящей справа, панель уходит за границу окна: замер направления 04
   на боевом `crm.beruzayavku.ru` 20.09.2026 дал около 143 точек лишней
   горизонтальной прокрутки страницы при 1280, 1600 и 1920 — на четырёх экранах
   сразу. Признак ставится классом на самой панели, поэтому прочие выпадения
   кабинета не задеты. */
.panel__vypadayushchiy--vlevo .vypadenie,
.vid-menyu .vypadenie {
    left: auto;
    right: 0;
}

.vypadenie {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    max-width: min(92vw, 640px);
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.vypadenie__zagolovok {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--ink-quiet);
}

.vypadenie__spisok {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Пункты — строками во всю ширину блока: нажимают по строке, а не по слову.

   ГАЛОЧКА ПРИЖАТА ВПРАВО, КАК НА СНИМКЕ ВЛАДЕЛЬЦА (26.09.2026 07:19). Отсюда
   `flex` и `space-between`: подпись слева, отметка справа у края блока, и
   строки списка не разъезжаются от того, что у одной из них есть хвост. */
.vypadenie__punkt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 7px 10px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

/* Черта между группами списка — ровно там, где она стоит на снимке: под
   «Прошлым месяцем», перед «Этой неделей». */
.vypadenie__cherta {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
}

.vypadenie__punkt:hover {
    background: #eef0f3;
}

/* Где стоишь — галочкой и полужирным, как на снимке 21: цвет здесь не
   используется вовсе. */
.vypadenie__punkt--tut {
    font-weight: 600;
}

.vypadenie__punkt--tut::after {
    content: "✓";
}

/* «Указать период» — ПЕРВАЯ СТРОЧКА СПИСКА, А НЕ РАСКРЫТЫЙ БЛОК ПОЛЕЙ.

   Слово владельца 26.09.2026 08:09: «блок указать период, он очень много места
   занимает, сделай как в Яндексе, там отдельная строчка, указать период и при
   нажатии на эту строчку всплывает окно, где можно выбрать даты от и до».
   Прежде два поля дат и кнопка стояли раскрытыми всегда.

   Строчка выглядит ровно как пункты списка ниже (`.vypadenie__punkt`): это и
   есть его первый пункт, просто раскрывающийся. */
.vypadenie__svoi {
    margin: 0 0 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

.vypadenie__punkt--svoi {
    cursor: pointer;
    list-style: none;
}

/* Треугольник, который браузер рисует у `<summary>` сам, убран: своя галочка
   уже стоит справа, а две стрелки в одной строке спорят друг с другом. */
.vypadenie__punkt--svoi::-webkit-details-marker {
    display: none;
}

details[open] > .vypadenie__punkt--svoi .btn__galka {
    transform: translateY(-1px) rotate(180deg);
}

/* Само окно с датами: поля в столбец, кнопка под ними. */
.vypadenie__daty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 4px;
}

/* Список столбцов внутри выпадающего блока: он длинный, поэтому прокручивается
   сам, а не растягивает блок на весь экран. */
.vypadenie .stolbtsy {
    max-height: 50vh;
    overflow-y: auto;
}

/* Ряд управления на телефоне встаёт столбиком: список периода и два поля дат
   в строку не помещаются и уезжают за край. Блок стоит здесь, а не в общем
   мобильном разделе выше: правила панели объявлены ниже него и при равной
   силе перебили бы его порядком. */
@media (max-width: 600px) {
    .panel,
    .panel__otbor,
    .panel .periods__own {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    /* Поле целиком во всю ширину, а внутри него подпись остаётся слева от
       числа: «С 07.08.2026» читается одной строкой. */
    .panel .field {
        width: 100%;
    }

    .panel .field select,
    .panel .field input[type="date"] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .panel .btn,
    .panel__vypadayushchiy > summary {
        width: 100%;
        justify-content: center;
    }
}

/* ШИРИНА ЛЕВОГО МЕНЮ — ПЕРЕМЕННОЙ, А НЕ ЧИСЛОМ В ПРАВИЛЕ. Её тянет мышью
   `public/js/kabinet.js` и запоминает в браузере человека (владелец,
   06.09.2026: «поле левого меню должно быть регулируемо по ширине»). Значение
   здесь — умолчание: без скрипта кабинет цел и выглядит как прежде. */
.kabinet {
    --razdely-shirina: 190px;
    --razdely-uzko: 60px;
    display: flex;
    align-items: flex-start;
    /* Свёрнутое меню стоит вплотную к содержимому — тянучки между ними нет
       (владелец, 06.09.2026: «в свёрнутом состоянии левые меню вплотную
       прижимаются к блоку с отчётами, сделай между ними отступ»). Развёрнутому
       отступ даёт сама тянучка, и там он меньше. */
    gap: 18px;
}

.kabinet--shiroko {
    gap: 6px;
}

.kabinet__glavnoe {
    flex: 1 1 auto;
    min-width: 0;   /* иначе широкая таблица растягивает колонку и ломает ряд */
}

/* ПОЛОСА ЗНАЧКОВ, РАЗВОРАЧИВАЮЩАЯСЯ В СЛОВА (владелец, 06.09.2026: «левое
   меню сделаны в виде значков… нужно сделать в виде значков с возможностью
   расширения в виде с описанием в виде текста»). Свёрнутая полоса отнимает у
   таблицы 60 точек вместо 190. */
.razdely {
    flex: 0 0 var(--razdely-uzko);
    width: var(--razdely-uzko);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
}

.kabinet--shiroko .razdely {
    flex-basis: var(--razdely-shirina);
    width: var(--razdely-shirina);
}

/* Слова живут в разметке всегда — их читает голосом программа чтения с экрана
   и показывает `title` при наведении. Свёрнутая полоса их прячет, а не
   выбрасывает: значок без имени заставляет угадывать. */
.razdely__slovo {
    display: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kabinet--shiroko .razdely__slovo {
    display: block;
}

.razdely__znak {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

/* Кнопка разворота — первой строкой, на месте будущего значка: рука ищет её
   там же, где остальные. */
.razdely__shire {
    display: flex;
    align-items: center;
    gap: 10px;
    font: inherit;
    color: var(--ink-quiet);
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 8px 10px;
    margin-bottom: 6px;
    cursor: pointer;
    text-align: left;
}

.razdely__shire:hover {
    background: var(--card);
    color: var(--ink);
}

/* ТЯНУЧКА между колонками. Полоса шире своей видимой черты: попасть в линию
   толщиной в точку мышью трудно, а пальцем нельзя вовсе. */
.kabinet__tyanuchka {
    display: none;
    flex: 0 0 12px;
    align-self: stretch;
    min-height: 120px;
    cursor: col-resize;
    background:
        linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat;
}

.kabinet__tyanuchka:hover,
.kabinet__tyanuchka:focus-visible {
    background:
        linear-gradient(var(--ink-quiet), var(--ink-quiet)) center / 3px 100% no-repeat;
    outline: none;
}

/* Пока тянут, выделение текста только мешает. */
.kabinet--shiroko .kabinet__tyanuchka {
    display: block;
}

body.tyanem {
    cursor: col-resize;
    user-select: none;
}

.razdely__link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-quiet);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 999px;
}

.razdely__link:hover {
    background: var(--card);
    color: var(--ink);
}

/* Где стоишь — видно заливкой и жирным словом. В левом меню нельзя брать ту же
   черту, что в верхнем: черта под словом там означает «этот вид открыт», и два
   разных смысла у одного знака читаются как один. */
.razdely__link--here {
    background: var(--card);
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--line);
}

/* ВСПЛЫВАЮЩАЯ ПАНЕЛЬ «ПРОЕКТЫ» В ЛЕВОМ МЕНЮ — как «Сделки» в amoCRM (слово
   владельца 28.09.2026 17:17, со снимком). Части взяты готовые
   (`.panel__vypadayushchiy` + `.vypadenie`): наведение, щелчок вне и Esc уже
   умеет `public/js/kabinet.js`, и второго такого устройства не заводится.

   ЗАГОЛОВОК ПАНЕЛИ — ТАКАЯ ЖЕ ПЛАШКА, КАК ПРОЧИЕ ПУНКТЫ. Он носит класс
   `.razdely__link`, но `.panel__vypadayushchiy > summary` ставит ему
   `inline-flex` и двумя классами сильнее: плашка сжалась бы до слова и
   перестала быть похожей на соседей. Отсюда это правило, и только оно. */
.razdely__vypadayushchiy > summary {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

/* ПАНЕЛЬ ВЫЕЗЖАЕТ ВПРАВО, А НЕ ВНИЗ: меню — узкая колонка, и панель, упавшая
   под пункт, накрыла бы остальные пункты. Зазор в 8 точек даётся полем, а не
   сдвигом: мышь идёт к панели через него, и `mouseleave` не должен срабатывать
   по дороге (тот же довод, что у задержки закрытия в `kabinet.js`). */
.razdely__panel {
    top: 0;
    left: 100%;
    right: auto;
    margin-left: 8px;
    max-height: min(70vh, 520px);
    overflow-y: auto;
}

/* ПЛАШКА С ДЛИННЫМИ ПОДПИСЯМИ — УЗКАЯ И ВЫСОКАЯ, С ПЕРЕНОСОМ, БЕЗ ПРОКРУТКИ.

   Слово владельца 30.09.2026 08:02 про выпадающий список инструкций в кабинете:
   «она слишком широкая, и у неё есть ещё полоса прокрутки, потому что название
   инструкции пишется в одну строчку… пусть она будет высокая, но узкая, и,
   естественно, должен быть перенос строк, никакой полосы прокрутки быть не
   должно в этой плашке, и то же самое… будет в «Беру заявки» инструкции… это
   единый стандарт для нашего движка CRM».

   ОТЧЕГО БЫЛО ШИРОКО. У пунктов выпадения стоит `white-space: nowrap` — он там
   по делу: подписи дат и проектов коротки, а галочка прижата вправо, и перенос
   разъехался бы. Название инструкции длиннее строки, и панель растягивалась до
   своего предела в 640 точек, а остаток уходил под прокрутку.

   ПОЧЕМУ ОТДЕЛЬНЫМ ПРИЗНАКОМ, А НЕ ПРАВКОЙ ОБЩЕГО ПРАВИЛА: у панели «Проекты»
   пунктов бывает много, и прокрутка там нужна. Признак ставится на саму плашку,
   поэтому прочие выпадения кабинета не задеты. Тот же класс ставится списку
   инструкций «Беру», когда он там появится. */
.vypadenie--instrukcii {
    max-width: min(92vw, 320px);
    max-height: none;
    overflow: visible;
}

.vypadenie--instrukcii .vypadenie__punkt {
    align-items: flex-start;
    gap: 10px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Строка проекта: название слева, карандаш справа у края. Название — обычная
   ссылка на доску этого проекта, карандаш — обычная ссылка на его страницу;
   вложить одну в другую нельзя, поэтому строка не ссылка, а ряд из двух. */
.razdely__proekt {
    display: flex;
    align-items: center;
    gap: 2px;
}

.razdely__proekt-imya {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.razdely__karandash {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--ink-quiet);
    text-decoration: none;
}

.razdely__karandash:hover {
    background: #eef0f3;
    color: var(--ink);
}

.razdely__karandash svg {
    width: 16px;
    height: 16px;
}

/* На телефоне колонки становятся строками: 180 точек слева отняли бы у таблицы
   половину ширины. Возможности уходят наверх — они короче статистики. */
@media (max-width: 700px) {
    /* СТОЛБЦЫ СТАНОВЯТСЯ СТРОКАМИ — и ширину задаёт экран, а не содержимое.
       `align-items: flex-start` при вертикальном направлении сжимает каждую
       часть до её содержимого: широкая таблица растягивала область работы, и
       вместе с ней за край экрана уезжали поля отбора и кнопка «Показать»
       (владелец, 06.09.2026: «кнопки почему-то улетают за пределы экрана»).
       Найдено снимком в ширину телефона, а не чтением правил. */
    .kabinet {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .kabinet__glavnoe {
        width: 100%;
        max-width: 100%;
    }

    /* `flex: 0 0 auto`, а не `1 1 auto`: меню занимает свою высоту целиком, а
       делить с ним свободную высоту незачем — прокручивается страница.

       ПОПРАВКА 20.09.2026 по замеру направления 04: до ячейки это правило не
       доходит — `computed flex` показывает `0 0 190px`, потому что сильнее
       оказывается `.kabinet--shiroko .razdely { flex-basis }` двумя классами
       выше по весу. Дефект снимает одно `overflow: visible`; правило оставлено
       как верное по смыслу, но приписывать ему заслугу нельзя. */
    .razdely {
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    /* НА ТЕЛЕФОНЕ ПАНЕЛЬ «ПРОЕКТЫ» ПАДАЕТ ВНИЗ, А НЕ ВБОК: меню здесь — строка
       во всю ширину, и панель, выехавшая вправо от пункта, ушла бы за край
       экрана (та же беда, что ловит `.panel__vypadayushchiy--vlevo` выше).
       Наведения на телефоне не бывает вовсе — панель открывается касанием
       собственным устройством `<details>`. */
    .razdely__panel {
        top: calc(100% + 6px);
        left: 0;
        margin-left: 0;
        max-width: min(92vw, 320px);
    }

    /* Тянуть ширину на телефоне нечего: колонки стали строками.

       ДВА КЛАССА, А НЕ ОДИН — иначе правило не срабатывает. Развёрнутое меню
       показывает тянучку правилом `.kabinet--shiroko .kabinet__tyanuchka`, а у
       него два класса против одного здесь. Условие ширины экрана силы правилу
       не добавляет, и на телефоне тянучка оставалась видимой: полоса в 120
       точек (её `min-height`) во всю ширину — ровно тот пустой промежуток
       между меню и содержимым, который владелец прислал снимком 09.09.2026.
       Меню развёрнуто по умолчанию с 08.09.2026, поэтому это видели все. */
    .kabinet__tyanuchka,
    .kabinet--shiroko .kabinet__tyanuchka {
        display: none;
    }
}

/* Показ готового письма клиенту (раздел «Клиенты»): текст письма — тот же,
   что уйдёт, поэтому переносится по словам, а не растягивает страницу вбок. */
.pismo {
    white-space: pre-wrap;
    word-break: break-word;
    font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--paper-quiet, #f6f7f8);
    border: 1px solid var(--line, #e3e6ea);
    border-radius: 4px;
    padding: 12px 14px;
    margin: 8px 0 0;
}

/* Блок одной интеграции: состояние и действия стоят вместе, а не разными
   карточками — иначе кнопка читается как относящаяся к следующей интеграции
   (слово владельца 07.09.2026). */
.sostoyanie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
}
.block__podzagolovok {
    font-size: 15px;
    margin: 18px 0 8px;
}
.block > form { margin: 12px 0 0; }
.block > details { margin-top: 14px; }

/* СНИМОК ЭКРАНА В ИНСТРУКЦИИ. Кадры сняты в живом аккаунте amoCRM (08.09.2026),
   ширина у них разная — потому ограничивается не размер картинки, а её место:
   она не шире колонки и не тянется вверх больше, чем нужно шагу. */
.snimok {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px 0 4px;
    border: 1px solid var(--liniya, #e4e4e7);
    border-radius: 6px;
}

/* ЗАПИСЬ ПУТИ НА СТРАНИЦЕ ИНСТРУКЦИИ. Ширина ограничена местом, а не размером
   файла: запись снята окном 1440 точек и на узком экране должна ужиматься, а не
   рвать раскладку. */
.zapis {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 8px 0 0;
    border: 1px solid var(--liniya, #e4e4e7);
    border-radius: 6px;
    background: #000;
}

/* ВЕРХ СПИСКА ЗАЯВОК: свёрнутый отбор слева, выбор количества и страницы
   справа — как на снимке Flexbe (владелец, 08.09.2026). */
.spisok-verh {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 6px;
}

.spisok-verh .otbor { margin-right: auto; }
.spisok-verh .otbor > summary { cursor: pointer; list-style: none; }
.spisok-verh .otbor[open] > summary { margin-bottom: 10px; }

.po-skolku {
    display: flex;
    align-items: center;
    gap: 8px;
}

.po-skolku__pole {
    display: flex;
    align-items: center;
    gap: 6px;
}

.po-skolku__gde {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ПЛАШКА «ВЫ В ЧУЖОМ КАБИНЕТЕ». Заметная нарочно: владелец работает под
   учётной записью клиента, и спутать чужие данные со своими нельзя
   (08.09.2026). Цвет — предупреждающий, не тревожный: беды нет, но помнить
   надо. */
/* ТОТ ЖЕ ВИД, ЧТО У ПЛАШКИ «ВЫ В ЧУЖОМ КАБИНЕТЕ», НО БЕЗ КНОПКИ ВОЗВРАТА:
   здесь возвращаться некуда — владелец у себя и просто смотрит чужое
   (ответ А на задачу 4-113). Одна строка вместо строки с кнопкой, поэтому
   разложение по сторонам не нужно. */
.chuzhoy-kabinet--chtenie {
    display: block;
}

.chuzhoy-kabinet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid #f0c36d;
    border-radius: 8px;
    background: #fff8e6;
    color: #6b4f00;
}

/* ЗНАЧКИ ДЕЙСТВИЙ В ПЕРВОМ СТОЛБЦЕ — правка и вход, рядом (владелец,
   08.09.2026: «сделай кнопку входа рядом с кнопкой редактировать, в виде
   двери»). Форма нужна кнопке входа: вход меняет состояние и потому идёт
   отправкой, а не ссылкой; выглядеть она при этом должна так же, как ссылка
   правки рядом. */
.pravka-forma {
    display: inline;
    margin: 0;
}

button.pravka {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* ССЫЛКА НА СНИМОК В КАРТОЧКЕ ЗАЯВКИ — владелец 18.09.2026: «файл с рисунком
   не надо грузить в CRM-ку, потому что он будет занимать очень много места…
   ссылку, чтобы клиент мог скачать себе этот файл на свой компьютер, чтобы он
   у нас не висел в браузере». До этой правки здесь стоял уменьшенный `<img>`
   (правило `.snimok-vid`, владелец 09.09.2026) — оно снято вместе с картинкой:
   правило без картинки не применяется никем.
*/
.snimok-ssylka {
    display: inline-block;
    margin-bottom: 4px;
}

/* ЕСТЬ ЛИ ФОТОГРАФИЯ — столбец списка заявок (владелец, 09.09.2026). Узкий и
   без подписи словом: подпись «Фото» над одним значком шире самого значка. */
/* СТОЛБЕЦ «ФОТО» — подписан словом с 18.09.2026 (слово владельца: столбец без
   подписи читается как незаполненное поле). Ширина выросла с 34px под подпись:
   значок в строке остаётся один и по центру. */
.col-foto {
    width: 56px;
    text-align: center;
}

/* ОТКУДА ОБРАТИЛИСЬ — столбец списка заявок (владелец, 17.09.2026: «вижу
   заявку, но не вижу в ней из какого города пришла заявка»). Ширина задана,
   чтобы длинное название («Ханты-Мансийский автономный округ») не растягивало
   таблицу: город переносится внутри своей колонки, как переносятся виды работ
   у мастеров. */
.col-gorod {
    width: 160px;
}

.foto-est {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--ink-quiet);
}

.foto-est svg {
    width: 17px;
    height: 17px;
}

/* Число ставится, только когда снимков больше одного: «1» рядом со значком
   ничего не добавляет к самому значку. */
.foto-est__skolko {
    font-size: 11px;
}

/* ПИСЬМА КЛИЕНТУ (правило 89): две колонки — перечень слева, открытое письмо
   справа, одна кнопка под ним. Разметка и состояния — направления 04
   (`resources/views/crm/klient-pisma.blade.php`), здесь только вид: цвета,
   отступы и шрифты взяты у тех же величин, что и в остальном кабинете, своего
   набора не заводилось.

   ДВЕ КОЛОНКИ УСТРОЕНЫ ТЕМ ЖЕ ПРИЁМОМ, ЧТО У КАРТОЧКИ ЗАЯВКИ (`.card`,
   `.card__main`, `.card__aside`, выше по файлу): гибкая раскладка с фикс-
   ированной узкой колонкой и растущей широкой, на узком экране —
   столбцом. Перечень в разметке идёт первым, поэтому на телефоне он
   показывается первым сам, без отдельного правила порядка. */
.pisma {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.pisma__spisok {
    flex: 0 0 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pisma__pismo {
    flex: 1 1 620px;
    min-width: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px 18px;
}

/* Строка перечня — та же форма, что у пункта левого меню кабинета
   (`.razdely__link`): скруглённая плашка, серый текст, при наведении светлее.
   Здесь она выше и в две строки: имени письма мало, нужно ещё состояние. */
.pismo-stroka {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    color: var(--ink);
    text-decoration: none;
    background: var(--card);
}

.pismo-stroka:hover {
    background: #eef0f3;
}

/* Открытое письмо — тем же приёмом, что у пункта «здесь» в левом меню
   (`.razdely__link--here`): заливка и обводка линией, без второго цвета. */
.pismo-stroka--vybrano {
    background: var(--card);
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.pismo-stroka__imya {
    display: block;
    font-weight: 600;
}

/* Читается с одного взгляда — заявка направления 02: состояние второй
   строкой, приглушённым цветом, как везде в кабинете (`.quiet`). */
.pismo-stroka__sostoyanie {
    display: block;
    margin-top: 2px;
    font-size: 13px;
}

@media (max-width: 900px) {
    .pisma {
        flex-direction: column;
        gap: 20px;
    }

    .pisma__spisok {
        flex: 0 1 auto;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .pisma__spisok .pismo-stroka {
        flex: 1 1 220px;
    }

    .pisma__pismo {
        width: 100%;
    }
}

/* ======================================================================
   ДОСКА ВОРОНКИ — шаги столбцами, карточки плашками
   (`crm/doska.blade.php`, `public/js/doska.js`).

   Слово владельца 20.09.2026: «горизонтальная воронка продаж и в ней можно
   перетаскивать карточки заявок». Образец — его снимок amoCRM: столбец со
   своей шапкой и тонкой цветной чертой, плашка в две строки, доска едет
   вбок целиком.

   ДОСКА ЕДЕТ ВБОК, А СТРАНИЦА НЕТ. Прокрутка висит на своей обёртке
   (`.voronka__polosa`), а не на странице: страница, уезжающая вбок, уводит
   за край и шапку, и левое меню — на телефоне из неё уже не выбраться.
   Держится это на `min-width: 0` у `.kabinet__glavnoe` (без него широкий
   ряд растягивает колонку, и вбок едет вся страница).
   ====================================================================== */

.voronka__verh {
    margin-bottom: 14px;
}

.voronka__odna {
    font-weight: 600;
}

/* Переключателя вида двумя кнопками здесь больше нет: с 20.09.2026 вид
   выбирают выпадающим меню (`crm/partials/vid-menyu.blade.php`), и собрано оно
   из готовых частей кабинета (`.panel__vypadayushchiy` + `.vypadenie`) — своих
   правил ему не заведено ни одного. Слово владельца: «таких кнопок там не надо
   делать». */

/* ПОИСК И ФИЛЬТР В ВЕРХНЕЙ ПОЛОСЕ — те же поля, что у списка, и свёрнуты,
   пока ничего не выбрано. Открытый отбор уезжает на свою строку: в один ряд
   с именем воронки и итогом он не помещается ни на каком экране. */
.voronka__otbor > summary {
    cursor: pointer;
    list-style: none;
}

.voronka__otbor[open] {
    flex: 1 1 100%;
    order: 9;
}

.voronka__otbor[open] > summary {
    display: inline-block;
    margin-bottom: 10px;
}

/* Общее правило полосы ставит подпись СЛЕВА от поля; в отборе она должна
   стоять над полем, как во всех прочих отборах платформы. */
.voronka__otbor .filter .field {
    flex-direction: column;
    align-items: stretch;
}

/* Итог по всей доске — справа, как «36 сделок: 1 350 ₽» на снимке. */
.voronka__vsego {
    margin-left: auto;
    font-size: 14px;
    color: var(--ink-quiet);
    font-variant-numeric: tabular-nums;
}

/* СЧЁТ ВСЕЙ ВОРОНКИ ПРИ ВКЛЮЧЁННОМ ОТБОРЕ. Стоит отдельно от итога и
   называется словами «во всей воронке»: цифра рядом с итогом без этих слов
   читалась бы как счёт показанного, а он другой. */
.voronka__vsya {
    font-size: 13px;
    color: var(--ink-quiet);
    white-space: nowrap;
}

/* Одна строка при выключенном скрипте: перевод в завершающий шаг уходит на
   карточку заявки, и человек должен знать это до нажатия, а не после. */
.voronka__bez-skripta {
    margin: -8px 0 12px;
    font-size: 13px;
}

.voronka__slovo {
    margin-bottom: 12px;
}

.voronka__polosa {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    /* Доехав до края доски, прокрутка не передаётся странице: иначе
       последним движением пальца человек уводит вбок весь экран. */
    overscroll-behavior-x: contain;
    /* Место полосе прокрутки: без него она ложится на нижнюю плашку. */
    padding-bottom: 12px;
}

/* ШИРИНА СТОЛБЦА — 220, А НЕ 272 ТОЧЕК. Слово владельца 28.09.2026 02:02:
   «Там слишком широкие карчики, поэтому они занимаются слишком много места»
   (417, раздел 12.4). Состав плашки стал короче — имя, номер, телефон, город, —
   и прежняя ширина держала пустое место. Само число предложено нами, не им. */
.voronka__shag {
    flex: 0 0 220px;
    width: 220px;
    min-width: 0;
    background: #eef0f3;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 10px 12px;
}

/* Столбец, над которым сейчас держат плашку. Подсветка — та же, что у строки
   списка заявок под указателем (`.leads tbody tr[data-zayavka]:hover`). */
.voronka__shag--pod {
    background: #e2ebf5;
}

.voronka__shapka {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 2px 8px;
}

/* Название шага — мелкими прописными, как на снимке: оно повторяется над
   каждым столбцом, и крупным набором отняло бы внимание у самих карточек. */
.voronka__imya {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
}

.voronka__schet {
    font-size: 13px;
    color: var(--ink-quiet);
    font-variant-numeric: tabular-nums;
}

/* ЧЕРТА ПОД ШАПКОЙ КРАСИТ СТОЛБЕЦ ПО РОДУ ШАГА. Цвета не новые: взяты у
   состояний заявки — `.status--new` (#24508f), `.status--won` (#256b32),
   `.status--lost` (#8a3a34). Второй набор цветов для того же смысла
   заставлял бы владельца помнить два словаря. */
.voronka__cherta {
    height: 3px;
    border-radius: 3px;
    background: var(--ink-quiet);
}

.voronka__shag--rabochiy .voronka__cherta {
    background: #24508f;
}

.voronka__shag--uspeshnyy .voronka__cherta {
    background: #256b32;
}

.voronka__shag--otkaz .voronka__cherta {
    background: #8a3a34;
}

/* Пустой столбец обязан оставаться мишенью: не будь у стопки роста, бросить
   карточку в шаг без единой записи было бы некуда. */
.voronka__stopka {
    display: flex;
    flex-direction: column;
    /* Зазор между плашками: было 8, стало 5 — по тому же слову владельца
       28.09.2026 16:13 про отступы «снизу и сверху». */
    gap: 5px;
    margin-top: 10px;
    min-height: 72px;
}

/* Куда плашка встанет, если её отпустить сейчас. Рост задаёт скрипт
   (`--vysota`) — ровно по той плашке, которую тащат. */
.voronka__mesto {
    height: var(--vysota, 56px);
    border: 1px dashed #a9c8ec;
    border-radius: 8px;
    background: #f3f8fd;
}

/* ПЛАШКА. Вся она НЕ ссылка, в отличие от строки списка заявок: у строки одно
   значение — открыть запись, — а у плашки их два, открыть и перевести.
   Ссылкой остаётся заголовок. */
/* ОТСТУПЫ СЖАТЫ, ШРИФТ НЕТРОНУТ. Слово владельца 28.09.2026 16:13: «сделай
   отступы в этих карточках меньше, то есть надо ее сжать примерно процентов на
   30-50, что помещалось только, как сейчас есть имя, номер заявки, номер
   телефона, город и все, отступы снизу и сверху, и между текстом тоже сделаю
   меньше». Уменьшены три вещи: отступ внутри плашки (было 9/10), зазор между
   её строками (было 4) и межстрочный интервал (было общее 1.45 от `body`).
   Размеры набора остались 14 и 12 точек, ширина столбца — согласованные 220.
   Замер браузером Chromium: высота плашки была 88.08, стала 55.69 — на 36.8 %
   меньше. Ширину столбца НЕ трогать: она согласована владельцем. */
.plashka {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 3px 10px;
    line-height: 1.15;
}

/* Ручка для пальца. `touch-action: none` — чтобы браузер не забрал это
   движение себе под прокрутку; на остальной плашке прокрутка, наоборот,
   оставлена, иначе доску на телефоне нечем листать. */
.plashka__ruchka {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--ink-hint);
    font-size: 14px;
    line-height: 1;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.plashka__ruchka:hover {
    background: #eef3f8;
    color: var(--ink-quiet);
}

.plashka__verh {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    /* Место ручке в углу: без отступа имя уезжает под неё. Ручка стала 22
       точки (правило выше), поэтому и отступ 22, а не 26. */
    padding-right: 22px;
}

/* Имя переносится только там, где слову можно переноситься, а не посреди
   букв. `overflow-wrap: anywhere` рвал «Александра» на «Александ» и «р»
   (снимок 20.09.2026): в узком столбце любое слово длиннее строки ломалось
   пополам. Не влезло — обрезается многоточием, целиком имя видно в карточке
   заявки по заголовку рядом.

   `min-width: 0` обязателен: без него гибкий элемент не сжимается ниже
   ширины своего содержимого, и обрезать было бы нечего. */
.plashka__imya {
    font-size: 14px;
    font-weight: 600;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plashka__kogda {
    font-size: 12px;
    color: var(--ink-quiet);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.plashka__zagolovok {
    color: var(--accent);
    font-size: 14px;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.plashka__zagolovok:hover {
    text-decoration: underline;
}

.plashka__niz {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: var(--ink-quiet);
}

.plashka__svyaz {
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.plashka__summa {
    white-space: nowrap;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ОПОРА, А НЕ УКРАШЕНИЕ: обычная форма перевода. Она работает без
   JavaScript, пальцем и с клавиатуры, и потому стоит на каждой плашке, а не
   появляется при наведении мыши. */
.plashka__perevod {
    display: flex;
    /* Спрос суммы и причины встаёт под списком шагов своей строкой, а не
       сжимает его до нечитаемого. */
    flex-wrap: wrap;
    gap: 6px;
    /* Видимого на экране форма не даёт (все её части скрыты сервером), а
       отступ сверху давала: 4 точки пустоты в каждой плашке. Отступ
       возвращается только раскрытому спросу — правило `.plashka__spros`. */
    margin-top: 0;
}

.plashka__perevod select {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    padding: 4px 10px;
    min-height: 32px;
}

.plashka__perevod .btn {
    padding: 4px 12px;
}

/* СПРОС СУММЫ И ПРИЧИНЫ — НА САМОЙ ПЛАШКЕ.

   Карточку бросили в успешный или отказной столбец: то же, что спрашивает
   карточка заявки, спрашивается здесь, до отправки. Поля ставит сервер и
   прячет, скрипт только показывает нужное, — при выключенном скрипте на
   экране не остаётся полурабочей формы.

   ПРАВИЛО НА `[hidden]` ЗДЕСЬ ОБЯЗАТЕЛЬНО, и стоит оно ПЕРВЫМ — та же
   застава, что у `.copyline__btn[hidden]` выше. Собственный `display`
   элемента сильнее умолчания браузера `[hidden] { display: none }`, и без
   этих двух строк спрятанный сервером спрос оставался бы на экране:
   20.09.2026 сумма и причина стояли раскрытыми на КАЖДОЙ плашке разом,
   плашка была вчетверо выше нужного, доска не читалась. Встроенным
   `style="display:none"` это не лечится: политика содержимого разрешает
   только `style-src 'self'` (`app/Http/Middleware/SecurityHeaders.php`). */
.plashka__spros[hidden],
.plashka__spros-pole[hidden] {
    display: none;
}

.plashka__spros {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Отступ от строк плашки: 6, а не 2. Прежде к нему добавлялись 4 точки
       отступа самой формы — они сняты, чтобы не поднимать высоту КАЖДОЙ
       плашки ради того, что показывается у одной. */
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.plashka__spros-kuda {
    margin: 0;
    font-size: 12px;
    color: var(--ink-quiet);
}

.plashka__spros-pole {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.plashka__spros-pole input {
    font-size: 14px;
    padding: 5px 10px;
    min-height: 32px;
    width: 100%;
    box-sizing: border-box;
}

.plashka__spros-oshibka {
    margin: 0;
    font-size: 12px;
    color: var(--danger);
}

.plashka__spros-knopki {
    display: flex;
    gap: 6px;
}

.plashka__spros-knopki .btn {
    padding: 4px 12px;
    font-size: 13px;
}

/* ВОПРОС «РАЗДАТЬ ЗАКАЗ МАСТЕРАМ?» — НА САМОЙ ПЛАШКЕ.

   Карточку перенесли на шаг, помеченный рукой: перевода НЕ БЫЛО, сервер
   вернул вопрос. Блок рисует сервер и прячет, скрипт только показывает
   нужное, — при выключенном скрипте вопрос раскрывает сама страница по
   сеансу, и на экране не остаётся полурабочей формы.

   ПРАВИЛО НА `[hidden]` ЗДЕСЬ ОБЯЗАТЕЛЬНО, и стоит оно ПЕРВЫМ — та же
   застава, что у `.plashka__spros[hidden]` выше и у `.copyline__btn[hidden]`.
   Собственный `display` элемента сильнее умолчания браузера
   `[hidden] { display: none }`: без этих строк вопрос о раздаче стоял бы
   раскрытым на КАЖДОЙ плашке доски «Беру» разом. Встроенным
   `style="display:none"` это не лечится — политика содержимого разрешает
   только `style-src 'self'`. */
.plashka__razdacha[hidden],
.plashka__razdacha-oshibka[hidden] {
    display: none;
}

.plashka__razdacha {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Отступ от строк плашки: 6, а не 2. Прежде к нему добавлялись 4 точки
       отступа самой формы — они сняты, чтобы не поднимать высоту КАЖДОЙ
       плашки ради того, что показывается у одной. */
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.plashka__razdacha-vopros {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.plashka__razdacha-kuda {
    margin: 0;
    font-size: 12px;
    color: var(--ink-quiet);
}

.plashka__razdacha-oshibka {
    margin: 0;
    font-size: 12px;
    color: var(--danger);
}

/* Кнопки переносятся ЦЕЛИКОМ, а не рвутся посередине. Плашка узкая, и без
   `nowrap` надпись «Не раздавать» ломалась на две строки внутри кнопки —
   поймано отрисовкой в 1600 px, разметка при этом была исправна. */
.plashka__razdacha-knopki {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.plashka__razdacha-knopki .btn {
    padding: 4px 12px;
    font-size: 13px;
    white-space: nowrap;
}

/* Плашка, у которой сейчас спрашивают: её видно среди прочих, и тащить её
   второй раз в этот миг нельзя (`data-zanyato` в скрипте). */
.plashka--sprashivaem {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(47, 111, 208, 0.16);
}

@media (max-width: 600px) {
    .plashka__spros-pole input {
        min-height: 44px;
        font-size: 16px;
    }
}

/* Плашку тащат: она вынута из ряда и едет за указателем. Сдвиг задаёт скрипт
   (`--x`, `--y`), место в столбце держит `.voronka__mesto`. */
.plashka--tashchim {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 60;
    width: var(--shirina);
    transform: translate(var(--x, 0), var(--y, 0)) rotate(1.5deg);
    pointer-events: none;
    box-shadow: 0 10px 24px rgba(28, 30, 33, 0.22);
}

/* Ответ сервера ещё не пришёл. Плашка в этот миг не берётся второй раз
   (`data-zanyato` в скрипте), и видно это же глазом. */
.plashka--zhdyom {
    opacity: 0.55;
}

body.tashchim-plashku {
    user-select: none;
    cursor: grabbing;
}

/* На телефоне столбец шириной почти в экран, а доска выходит из отступов
   страницы и держит свой — 16 точек от края. Отступ страницы здесь 12
   (`.wrap` в правиле выше), поэтому полоса сперва выходит из него, а потом
   ставит свой: иначе первая плашка прижималась бы к самому краю стекла, а
   последняя обрывалась бы под ним. Страница при этом вбок не едет — едет
   только доска. */
@media (max-width: 600px) {
    .voronka__polosa {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 16px;
        padding-right: 16px;
        scroll-padding-left: 16px;
        scroll-padding-right: 16px;
    }

    .voronka__shag {
        flex-basis: 84vw;
        width: 84vw;
    }

    /* Палец шире указателя: ручка не мельче 34 точек, а список шагов
       возвращается к общим 44 (правило выше задаёт их всем спискам, но
       правило плашки его перебивает — оно точнее). */
    .plashka__ruchka {
        width: 34px;
        height: 34px;
    }

    .plashka__perevod select {
        min-height: 44px;
        font-size: 16px;
    }

    .plashka__verh {
        padding-right: 34px;
    }

    /* Итог не прижимается вправо: в столбик он читается первой строкой. */
    .voronka__vsego {
        margin-left: 0;
        flex: 1 1 100%;
    }
}

/* ── ПОЛЗУНОК БОКОВОЙ ПРОКРУТКИ ─────────────────────────────────────────────

   Слово владельца 20.09.2026: «ползунок перемещения по столбцам вправо-влево
   находится ниже окна, то есть его не видно… в амоCRM сделан блок типа
   ползунка в правом нижнем углу, он всегда привязан к нижней части экрана и
   ничего не мешает, там немножко полупрозрачный, и там есть ползунок, которым
   можно двигать по этапам воронки по столбцам вправо-влево».

   ЧТО ЗДЕСЬ ГЛАВНОЕ. Собственная полоса прокрутки браузера стоит под
   содержимым: у доски — под столбцами, у таблицы — под последней строкой. При
   странице в три экрана её не видно вовсе, и правые столбцы достаются только
   тому, кто сперва домотал вниз. Эта плашка прикреплена к окну и потому
   доступна всегда, на любой высоте прокрутки.

   ПРОЗРАЧНОСТЬ — ЕГО СЛОВО, А НЕ УКРАШЕНИЕ: под плашкой видно содержимое, и
   угол страницы не выглядит вырезанным.

   НАЖАТИЯ СКВОЗЬ ПЛАШКУ. Поле вокруг ленты не ловит указатель вовсе
   (`pointer-events: none`): ловит только сама лента — то, чем работают. Иначе
   прямоугольник в углу отнимал бы нажатия у строк таблицы под ним. */

.polzunok {
    position: fixed;
    right: 6px;
    bottom: 6px;
    z-index: 30;
    display: flex;
    /* Поле вокруг ленты: сама лента стоит в 16 точках от края окна, а эти
       десять точек — запас, чтобы палец не попадал по ленте, целясь в угол
       страницы. Нажатий поле не перехватывает. */
    padding: 10px;
    pointer-events: none;
}

/* `hidden` НУЖНО СВОЁ ПРАВИЛО: собственный `display` элемента перебивает
   встроенное правило браузера для `[hidden]`, и спрятанная плашка осталась бы
   на экране. Ошибка оплачена в этом же наборе не раз. */
.polzunok[hidden] {
    display: none;
}

.polzunok__lenta {
    position: relative;
    box-sizing: border-box;
    width: 240px;
    height: 26px;
    /* Поля внутри ленты нет нарочно: ширина отрезков и место бегунка
       считаются от `clientWidth`, и поле пришлось бы вычитать из каждого
       замера. Воздух даёт сама рамка и зазоры между отрезками. */
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    /* Полупрозрачный белый — тот же белый карточки, но сквозь него видно
       содержимое. */
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(28, 30, 33, 0.12);
    cursor: grab;
    /* Лента — единственное, что ловит указатель. */
    pointer-events: auto;
    /* Палец на ленте ведёт бегунок, а не листает страницу. */
    touch-action: none;
    user-select: none;
}

.polzunok__lenta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.polzunok__lenta--tyanem {
    cursor: grabbing;
}

/* Отрезки — рисунок столбцов: сколько столбцов, столько отрезков, ширина
   отрезка в долю ширины столбца. Долю ставит скрипт. */
.polzunok__otrezki {
    display: flex;
    gap: 2px;
    height: 100%;
}

.polzunok__otrezok {
    flex: 0 1 0;
    min-width: 2px;
    border-radius: 2px;
    background: var(--line);
}

/* Столбец, видимый сейчас на экране. Не сплошной синий, а его светлая доля:
   поверх отрезков лежит рамка бегунка, и два одинаково ярких знака одного и
   того же читались бы как один. */
.polzunok__otrezok--vidno {
    background: rgba(47, 111, 208, 0.45);
}

/* Бегунок — показанная часть содержимого. Место и ширина приходят из скрипта
   свойствами CSS; без скрипта он стоит во всю ленту и ничего не закрывает. */
.polzunok__begunok {
    position: absolute;
    top: 0;
    bottom: 0;
    /* Место и ширина приходят в точках: доли пришлось бы считать от рамки
       вместе с её краями, а бегунок ходит по содержимому ленты. */
    left: var(--polzunok-levo, 0px);
    width: var(--polzunok-shirina, 100%);
    border: 1px solid var(--accent);
    border-radius: 5px;
    background: rgba(47, 111, 208, 0.10);
    pointer-events: none;
}

/* ТЕЛЕФОН: плашка растянута по нижнему краю, а не сжата в угол.

   Двести сорок точек в углу экрана шириной 390 — это половина ширины, и
   попасть пальцем в отрезок столбца в ней нечем. Растянутая лента даёт по
   отрезку заметную ширину.

   ЧТОБЫ ОНА НИЧЕГО НЕ ЗАКРЫВАЛА, у области работы появляется отступ снизу —
   ровно тогда, когда плашка на экране есть (класс ставит скрипт). Последняя
   строка таблицы домогается прокруткой, а не остаётся под плашкой навсегда. */
@media (max-width: 600px) {
    .polzunok {
        left: 2px;
        right: 2px;
        bottom: 2px;
    }

    .polzunok__lenta {
        width: 100%;
        height: 32px;
    }

    body.polzunok-est main.wrap {
        padding-bottom: 96px;
    }
}

/* ЧЕТЫРЕ БЛОКА РАЗДЕЛА «ОПОВЕЩЕНИЯ» (владелец, 24.09.2026: «там у нас сейчас
   куча разных оповещений, и клиенту будет сложно разобраться, что куда там
   нажимать надо… сделай отдельные блоки прямо в этом разделе, выделили их
   красивыми отбитыми линиями, фоном, чтобы это не сильно ярко было в цветах
   этого личного кабинета»). Подряд стояли девять заголовков одного веса — и
   человек не видел, где кончается одно дело и начинается другое.

   ИМЕНА НОВЫЕ, а не правка `.block` и `.block__title`: этот файл общий с CRM,
   и сдвиг существующего класса переставил бы чужие страницы.

   ЦВЕТА ТОЛЬКО ЗАВЕДЁННЫЕ ВЫШЕ: фон `--card`, линии `--line`, полоска у
   заголовка — `--accent` с прозрачностью, чтобы не пестрило. */
.razdel-blok {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px 20px 20px;
    margin: 0 0 26px;
}

/* ВОЗДУХ И ЛИНИЯ МЕЖДУ БЛОКАМИ. Рамка очерчивает блок, а эта линия делит
   страницу: она идёт в промежутке, а не по краю карточки. */
.razdel-blok + .razdel-blok::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line);
}

/* Заголовок блока — прописными (сами буквы прописные и в разметке, чтобы их
   было видно и в отдаче страницы, а не только на экране). */
.razdel-blok__nazvanie {
    display: flex;
    align-items: stretch;
    gap: 10px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 16px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--line);
}

/* Узкая приглушённая полоска слева — метка начала блока, а не украшение. */
.razdel-blok__nazvanie::before {
    content: "";
    flex: 0 0 4px;
    width: 4px;
    min-height: 22px;
    border-radius: 2px;
    background: var(--accent);
    opacity: 0.5;
}

/* Заголовок внутри блока — ступенью ниже: 15px против 19px у блока. */
.razdel-blok__punkt {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
    margin: 26px 0 10px;
}

.razdel-blok__punkt:first-of-type {
    margin-top: 0;
}

@media (max-width: 720px) {
    .razdel-blok {
        padding: 14px 14px 16px;
        margin-bottom: 22px;
    }

    .razdel-blok__nazvanie {
        font-size: 17px;
    }
}

/* ПРОСТАЯ ПЕРЕПИСКА С КЛИЕНТОМ через бота (задание владельца 25.09.2026 08:19).

   Отступ сверху отделяет её от блока «Личная переписка»: это две разные дороги
   к одному человеку, и слипшись они читались бы как одна. */
.perepiska {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

/* История отправленного. Строка читается слева направо — когда, кто, куда, что;
   тем же порядком, что и журнал действий, чтобы два списка на одной странице не
   требовали двух привычек. */
.perepiska__istoriya {
    list-style: none;
    margin: 0;
    padding: 0;
}

.perepiska__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.perepiska__row:last-child {
    border-bottom: 0;
}

/* СЛОВО КЛИЕНТА — лёгкий фон вместо нового цвета: тот же `--bg`, каким уже
   отмечены соседние спокойные панели карточки (25.09.2026, задание владельца
   09:48). Отличать сторону нужно взглядом, а не чтением колонки «кто». */
.perepiska__row--klient {
    background: var(--bg);
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 4px;
}

.perepiska__when {
    flex: 0 0 130px;
    color: var(--ink-quiet);
    font-variant-numeric: tabular-nums;
}

.perepiska__who {
    flex: 0 0 160px;
    font-weight: 600;
}

.perepiska__kanaly {
    flex: 0 0 110px;
    color: var(--ink-quiet);
}

/* Текст сообщения — всей строкой: это слова живому человеку, и обрезать их
   колонкой значило бы прятать сказанное. */
.perepiska__tekst {
    flex: 1 1 100%;
}

@media (max-width: 700px) {
    .perepiska__when,
    .perepiska__who,
    .perepiska__kanaly {
        flex: 0 0 auto;
    }
}

/* ЗАКРЫТОЕ ПОЛЕ «либо цена, либо сообщение». Видно, что оно закрыто, а не
   пропало: пропавшее поле человек считает поломкой, а закрытое — правилом.
   Закрывает его `js/vilka-ili-soobshchenie.js`; сам запрет стоит на сервере. */
.field__input--zakryto {
    background: #f4f4f5;
    color: var(--ink-quiet);
    cursor: not-allowed;
}

.field--zakryto .field__label {
    color: var(--ink-quiet);
}

.hint--zakryto {
    color: #6b5a1f;
}

/* ОТСТУП У ФОРМЫ ОТПРАВКИ КЛИЕНТУ. Слово владельца 25.09.2026 10:53: «кнопка
   отправить клиенту, прилипло к форме отправки, между ними надо сделать
   отступ». Зелёная кнопка — не продолжение полей, а отдельное действие: она
   говорит живому человеку, и отправленное не отзывается. Слипшись с полями,
   она читается как их часть, и нажимают её мимоходом. */
.vilka,
.perepiska-forma {
    margin-top: 20px;
}

/* КНОПКА ОТПРАВКИ НЕ ЛЕПИТСЯ К ПОЛЮ. Владелец 25.09.2026 12:08: «кнопка так и
   не опустилась от поля». Отступ у самой формы его замечания не закрыл: поле и
   кнопка стоят ВНУТРИ одной формы, и разводить надо их, а не форму с соседями. */
.perepiska-forma .btn,
.vilka .btn {
    margin-top: 14px;
}

/* ДВА ЧИСЛА ДИАПАЗОНА — В ОДНОМ РЯДУ. Слово владельца 26.09.2026 04:14: «эти
   поля нужно разместить рядом, то есть от до, рядом с друг другом, а не друг по
   другом, как сейчас». На узком экране ряд переносится сам: втискивать два поля
   в 320 точек хуже, чем поставить их одно под другим. */
.cena__ryad {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

/* СТРЕЛОЧЕК У ЧИСЛОВЫХ ПОЛЕЙ НЕТ. Тип поля сменён на `text` (разбор числа стоит
   на сервере), и это правило — застава от возврата: вернётся `type="number"` —
   стрелочки всё равно не появятся. Его слово того же часа: «там есть стрелочки
   вверх-вниз, их надо убрать… пускай выдаст склавиатуру». */
.field--cena input::-webkit-outer-spin-button,
.field--cena input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.field--cena input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ПОЛЕ ОТКАЗА — УЖЕ И НИЖЕ. Его слово 26.09.2026 04:14: «поле об отказе. Сделали
   его по ширине уже… много места занимает… по высоте уже». Отказ короток, и
   поле под него не должно занимать пол-экрана; на телефоне ограничение снимается
   само — там ширина и так одна. */
.field--otkaz textarea {
    max-width: 420px;
}

/* КНОПКА, СТОЯЩАЯ ПРЯМО ПОД ТЕКСТОМ, К НЕМУ НЕ ЛЕПИТСЯ. Слово владельца
   25.09.2026 20:42: «Есть еще кнопки сохранить стоимость и сообщения, у нее
   сверху отступ от текста нет». Своим родом, а не общим правилом на все кнопки
   блока: у ссылок-кнопок в других блоках свои отступы, и общее правило сдвинуло
   бы заодно их. */
.knopka--pod-tekstom {
    margin-top: 14px;
}

/* ТЕКСТ ВНУТРИ МНОГОСТРОЧНОГО ПОЛЯ НЕ ПРИЖИМАЕТСЯ К КРАЮ. Его же слово того же
   часа: «внутри формы есть текст, примерство можно написать, он тоже прилипает
   к краю, нужно сделать внутреннее отступ для него тоже». Однострочные поля
   отступ имели всегда (`input, select` выше), многострочное — нет: правило
   `textarea` задавало только углы и рост. */
textarea {
    padding: 9px 14px;
    font: inherit;
    color: inherit;
    background: var(--card);
    border: 1px solid #c9cdd3;
}

/* ПОЛЯ СТОИМОСТИ НА ПК НЕ ТЯНУТСЯ НА ВСЮ ШИРИНУ. Его слово: «там стоимость не
   должна быть очень большой, поэтому там много на всю шляну растягивать не
   нужно». Число из пяти знаков в поле шириной в блок читается как ошибка ввода.
   На узком экране предел снимается сам — там ширина и так меньше. */
@media (min-width: 720px) {
    .field--summa input,
    .field--cena input {
        max-width: 180px;
    }
}

/* ГРУППА «НАСТРОЙКИ» В ЛЕВОМ МЕНЮ (владелец, 25.09.2026 14:13: «Я предлагаю
   сделать отдельный блок настройки и в нем будут вложены такие подразделы»).

   Заголовок группы — не ссылка: вести ему некуда, а нажимаемый на вид пункт,
   который не нажимается, читается как поломка. В свёрнутом меню он скрыт вместе
   со всеми словами, и остаётся ряд значков, как было. */
.razdely__gruppa {
    margin: 14px 0 2px;
    padding: 0 10px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-quiet);
}

/* Отступ показывает вложенность там, где слова видны. В свёрнутом меню отступа
   нет: значки обязаны стоять в один столбец, иначе ряд выглядит сбитым. */
.kabinet--shiroko .razdely__link--vlozhen {
    padding-left: 22px;
}

/* КРОШКИ МАСТЕРА — ПУТЬ ПО ОТВЕТАМ, А НЕ ПО РАЗДЕЛАМ (владелец, 25.09.2026
   14:13). Показывают, чьи настройки правятся сейчас, чтобы вернувшийся через
   час человек не гадал, у кого он. */
.kroshki {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--ink-quiet);
}

.kroshki__strelka {
    margin: 0 6px;
}

.kroshki__shag--zdes {
    color: var(--ink);
    font-weight: 600;
}

/* «НАЗАД» И «ДАЛЬШЕ» СТОЯТ В ОДНОМ РЯДУ. На узком экране ряд разворачивается в
   столбец сам: рядом они там не помещаются, а перенос посреди ряда выглядит
   сбоем вёрстки. Главное действие — справа, возврат — слева, как в любом
   пошаговом опросе. */
.master__knopki {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

@media (max-width: 560px) {
    .master__knopki {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

/* КРОШКА-КНОПКА выглядит ссылкой, а не кнопкой: это переход, и человек ждёт от
   неё поведения ссылки. Кнопкой она сделана потому, что прыжок меняет состояние
   опроса, а такое не делают переходом по адресу. */
.kroshki__shag--knopka {
    border: 0;
    background: none;
    padding: 0;
    min-height: 0;
    font: inherit;
    color: var(--ink-quiet);
    text-decoration: underline;
    cursor: pointer;
}

.kroshki__shag--knopka:hover {
    color: var(--ink);
}

/* ССЫЛКА ПРИГЛАШЕНИЯ: ПОЛЕ ПО СОДЕРЖИМОМУ И ЗНАЧОК КОПИРОВАНИЯ ВНУТРИ НЕГО.

   Слово владельца 25.09.2026 17:52: «чтобы прямо в поле стоял значок
   копирование, например, как в VS Code… только при этом поле надо сделать не
   таким здоровым, у тебя опять все поля растянута на всю ширину».

   Ширину задаёт `size` у самого поля — то есть длина ссылки, — а здесь стоит
   только предел: шире края экрана поле не станет. `width:auto` нужен потому,
   что общее правило полей кабинета растягивает их на всю строку. */
.ssylka-pole { max-width: 100%; }
/* ЗНАЧОК КОПИРОВАНИЯ ДЕРЖИТСЯ В ПОЛЕ НА ЛЮБОЙ ШИРИНЕ. Слово владельца
   26.09.2026 04:17: «показал знаки копировать, но они у тебя почему-то не
   зафиксировались в полях вода, когда осужаешь окошко, они могут отдельно от
   поля быть, могут перемещаться куда-то, за пределы этого поля».

   Причина была в том, что поле не сжималось: ширину ему задаёт `size` по длине
   ссылки, а внутри flex элемент не сжимается уже содержимого без `min-width: 0`.
   Ряд упирался в предел 100 %, поле из него вылезало, и значок, привязанный к
   правому краю РЯДА, оказывался посреди ссылки или за полем. Теперь поле
   сжимается вместе с рядом, и правый край у них общий. */
.ssylka-pole__ryad { position: relative; display: flex; align-items: center;
    width: fit-content; max-width: 100%; }
.ssylka-pole__ryad input { flex: 1 1 auto; min-width: 0; width: auto; max-width: 100%;
    padding-right: 40px; box-sizing: border-box; }
.ssylka-pole__znachok {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    background: none; border: 0; border-radius: 6px; cursor: pointer; color: #6b7280;
}
.ssylka-pole__znachok:hover { background: #eef1f5; color: #111827; }
.ssylka-pole__znachok svg {
    width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}

/* Плашка «Настройки сохранены» после кнопки «Готово» в мастере настройки.

   Имя своё, а не общее `.plashka`: под тем именем в кабинете живёт карточка на
   доске заявок, и общее правило переписало бы ей отступы и цвет. */
.master-plashka { margin: 0 0 16px; padding: 11px 14px; border-radius: 8px;
    background: #e8f5ec; color: #1b5e34; }
.master-plashka a { margin-left: 10px; color: inherit; font-weight: 600; }

/* Стрелка между именем двери и переходом во вторую (владелец, 25.09.2026 18:17:
   «Рядом должна быть стрелочка и кнопка перейти в ЛидОс CRM»). */
.top__strelka { margin: 0 2px 0 10px; color: #9aa3ad; }