/* Вкладка «Клиенты» (справочник заказчиков). ТЗ private/docs/TZ-Klienty-v1.md, этап Э1.
   ⚠️ КАЖДЫЙ СЕЛЕКТОР ЗАСКОУПЛЕН ПОД #tab-clients — как zay-panel.css под #tab-requests и por-panel.css под
   #tab-tasks. :root/body/html не переопределяем: токены и общие классы (.btn, .chip, .msg, --primary,
   --danger…) берутся из app.css. */

/* ── Каркас панели ──
   Колонка раздела — общая (.tab-panel .wrap, wrap.css). Прежнее предупреждение «.wrap задаётся каждой
   панелью свой, и его легко забыть» сбылось второй раз: при новом разделе число разошлось опять. Теперь
   правило одно на все разделы, и забыть его нельзя. */
/* ⚠️ ШАПКА — ДОСЛОВНО КАК У «ЗАЯВОК» (zay-panel.css: .zay-head/.zay-title/.zay-add). Заголовок 18/500 и
   круглая кнопка 40px — не мой выбор, а повтор соседа: два раздела рядом с разными заголовками и разной
   формой кнопки читаются как разные продукты. Свой размер здесь означал бы, что при переходе между вкладками
   шапка прыгает. */
#tab-clients .crm-head { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; }
#tab-clients .crm-head__t { flex: 1; min-width: 0; }
#tab-clients .crm-title { font-size: 18px; font-weight: 500; margin: 0; }
#tab-clients .crm-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
#tab-clients .crm-add { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 2px 6px rgba(79,70,229,.28); transition: transform .08s ease;
    font-size: 22px; line-height: 1; }
#tab-clients .crm-add:hover { filter: brightness(1.06); }
/* Кнопка «Поля» — текстовая, рядом с «+»: настройка набора живёт в разделе, а не в общих настройках. */
#tab-clients .crm-fieldsbtn { flex: none; border: 1px solid var(--border); background: #fff; border-radius: var(--btn-radius, 10px);
    padding: 8px 12px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
#tab-clients .crm-fieldsbtn:hover { border-color: var(--primary); color: var(--primary); }

/* ── Настройка своего поля ── */
#tab-clients .crm-cf { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 10px;
    margin-bottom: 8px; }
#tab-clients .crm-cf__top { display: flex; gap: 8px; align-items: center; }
#tab-clients .crm-cf__name { flex: 1; min-width: 0; box-sizing: border-box; padding: 7px 10px; font: inherit;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
#tab-clients .crm-cf__type { flex: none; padding: 7px 10px; font: inherit; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg); color: var(--text); }
#tab-clients .crm-cf__x { flex: none; border: 0; background: none; font-size: 16px; line-height: 1;
    color: var(--muted); cursor: pointer; padding: 4px 6px; }
#tab-clients .crm-cf__x:hover { color: var(--danger); }
#tab-clients .crm-cf__req { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px;
    color: var(--text); }
#tab-clients .crm-cf textarea { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 7px 10px;
    font: inherit; font-size: 14px; border: 1px solid var(--border); border-radius: 8px; resize: vertical; }
#tab-clients .crm-fld select[multiple] { min-height: 88px; }
/* Предупреждение перед тем, как убрать поле со значениями. Браузерные диалоги в проекте запрещены —
   спрашиваем прямо в строке, чтобы видно было, о каком поле речь. */
#tab-clients .crm-cf__warn { margin-top: 8px; padding: 9px 10px; border-radius: 8px; font-size: 13px;
    line-height: 1.45; background: rgba(209, 36, 47, .07); color: var(--danger); }
#tab-clients .crm-cf__warnacts { display: block; margin-top: 8px; }
#tab-clients .crm-cf__yes,
#tab-clients .crm-cf__no { border: 1px solid currentColor; background: none; border-radius: var(--btn-radius, 10px);
    padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; margin-right: 8px; }
#tab-clients .crm-cf__yes { color: var(--danger); }
#tab-clients .crm-cf__no { color: var(--muted); border-color: var(--border); }

/* ── Убранные поля ── */
/* Блок убранных полей: отступ от списка сверху. Черту и заголовок несёт .crm-sect внутри — тот же
   подзаголовок, что «Контакты · 1» в карточке, чтобы раздел читался одинаково в обоих местах. */
#tab-clients .crm-arch { margin-top: 22px; }
#tab-clients .crm-arch__row { display: flex; align-items: center; gap: 10px; padding: 9px 0;
    border-bottom: 1px solid var(--border); }
#tab-clients .crm-arch__t { flex: 1; min-width: 0; font-size: 14px; color: var(--text); }
#tab-clients .crm-arch__m { display: block; font-size: 12px; color: var(--muted); }
#tab-clients .crm-arch__btn { flex: none; }
/* ⚠️ ПАРНОЕ ПРАВИЛО К [hidden]: кнопку прячет showScreen атрибутом, а display от класса (1,1,0) сильнее
   браузерного [hidden] (0,1,0) — без этой строки «+» оставался висеть на карточке и в форме. Замерено:
   hidden=true, а вычисленный display=flex. Ниже базового правила: при равной силе побеждает нижнее. */
#tab-clients .crm-add[hidden] { display: none; }

/* ── Фильтры ── */
#tab-clients .crm-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
#tab-clients .crm-search input { width: 100%; box-sizing: border-box; padding: 9px 11px; font: inherit;
    border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); }
#tab-clients .crm-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Список ── */
/* Группировка списка («Компании», «Контакты»): тот же заголовок секции (.crm-sect в разметке рядом), здесь
   только свой отступ — он делит список, а не коробку, и черта ему не нужна. */
#tab-clients .crm-grp { margin: 14px 0 6px; }
/* Строки списка и карточек — .lrow из linked-row.css: элемент общий для трёх разделов, и здесь его больше
   нет намеренно. Заскоупленная под #tab-clients копия делала строку невидимой для «Заявок». */
#tab-clients .crm-empty { font-size: 13px; color: var(--muted); padding: 14px 2px; }
#tab-clients .crm-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ── Карточка ── */
#tab-clients .crm-card__head { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; }
/* ⚠️ 19/600 — ЭТАЛОН ЗАГОЛОВКА ЭКРАНА ПО ВСЕМ РАЗДЕЛАМ. Было 18/700; в «Заявках» (.zay-detail-title,
   .zay-form-title) и «Поручениях» (.task__title) — 19/600. Три против двух, и менять решили меньшинство. */
#tab-clients .crm-card__ttl { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--text); }
/* ⚠️ ПОМЕТКА «В АРХИВЕ» — СВОЁ ИМЯ, И ЭТО ПОЧИНКА. Она звалась .crm-arch, как и блок убранных полей на
   экране настройки: правила равной специфичности, побеждало нижнее — то есть ЭТО, — и заголовок «Убранные
   поля» рисовался пилюлей бейджа, теряя свой отступ сверху. Второй такой случай подряд (первым был
   .crm-sub), и лечится так же: одно имя — один смысл. Имя про СОСТОЯНИЕ записи, а не про экран архива,
   поэтому с семейством .crm-arch__* больше не спорит.
   ⚠️ БЛИЗНЕЦ ОБЩЕГО .badge--off (app.css:674), но НЕ копия: у того паддинг 2px 9px и цвет #64748b. Свести
   их — поменять вид, а это отдельное решение; пока держим своё правило с прежними значениями. */
#tab-clients .crm-off { flex: none; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
    background: #eef0f4; color: #475569; }
/* ⚠️ ОДНА КОРОБКА НА ВСЮ КАРТОЧКУ — ОДНИМ ПРАВИЛОМ, А НЕ ДВУМЯ С ОДИНАКОВЫМИ ЗНАЧЕНИЯМИ. .crm-card__b —
   реквизиты, .crm-box — файлы и переписка; вид у них обязан совпадать, и совпадает он потому, что задан
   здесь один раз. Второе правило «с теми же значениями» разъехалось бы при первой же правке радиуса. */
#tab-clients .crm-card__b,
#tab-clients .crm-box { display: flex; flex-direction: column; gap: 8px; background: #fff;
    border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
#tab-clients .crm-f { display: flex; gap: 10px; align-items: baseline; }
#tab-clients .crm-f__l { flex: 0 0 110px; font-size: 12px; color: var(--muted); }
#tab-clients .crm-f__v { flex: 1; min-width: 0; font-size: 14px; color: var(--text); word-break: break-word; }
#tab-clients .crm-card__acts { display: flex; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; }
#tab-clients .crm-danger { color: var(--danger); }

/* ── Форма ── */
#tab-clients .crm-form__ttl { margin: 6px 0 12px; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--text); }
#tab-clients .crm-fld { margin-bottom: 12px; }
/* ⚠️ ПРЯМОЙ ПОТОМОК — ПО ТОЙ ЖЕ ПРИЧИНЕ, ЧТО У input НИЖЕ, и это поймано ЗАМЕРОМ, а не чтением. Внутри поля
   теперь живут чужие <label>: строки галочек в панели множественного выбора. Правило «.crm-fld label»
   (1,1,1) сильнее «.crm-check» (1,1,0) и одевало их подписью поля — жирным, 13px и display:block вместо
   flex, отчего галочка и текст вставали друг под другом. getComputedStyle показывал block там, где
   ожидался flex. */
#tab-clients .crm-fld > label { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: #374151; }
/* ⚠️ ПРЯМОЙ ПОТОМОК, А НЕ ЛЮБОЙ ВЛОЖЕННЫЙ. Панель одевает СВОЙ контрол поля; правило «.crm-fld input»
   (1,1,1) накрывало и <input> внутри общего пикера, перебивая его собственные стили (0,1,0) — поле
   выглядело полем формы, а выпадашка оставалась голой. «>» выражает исходный замысел точно. */
#tab-clients .crm-fld > input,
#tab-clients .crm-fld > select,
#tab-clients .crm-fld > textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; font: inherit;
    font-size: 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); }
#tab-clients .crm-fld textarea { min-height: 72px; resize: vertical; }
#tab-clients .crm-req { color: var(--danger); }
#tab-clients .crm-form__acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
/* ⚠️ ПАРНОЕ ПРАВИЛО К [hidden] — обязательное: display от класса (1,1,0) сильнее браузерного [hidden]
   (0,1,0). Кнопки импорта прячутся атрибутом (crmImpActs), и без этой строки они висели бы на пустом
   экране до выбора файла. Ниже базового правила: при равной силе побеждает нижнее. */
#tab-clients .crm-form__acts[hidden] { display: none; }

/* Выбор сущности при добавлении: две кнопки вместо диалога — браузерные диалоги в проекте запрещены. */
#tab-clients .crm-pick { display: flex; gap: 10px; flex-wrap: wrap; }
#tab-clients .crm-pick__b { flex: 1 1 140px; border: 1px solid var(--border); border-radius: var(--btn-radius, 10px); background: #fff;
    padding: 18px 12px; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; }
#tab-clients .crm-pick__b:hover { border-color: var(--primary); }

/* ── Похожие записи ── */
#tab-clients .crm-dups { border: 1px solid #fde68a; background: #fffbeb; border-radius: 12px; padding: 12px;
    margin-top: 12px; }
/* ⚠️ ПАРНОЕ ПРАВИЛО К [hidden]: панель показывается и прячется из JS, а display от класса (1,1,0) сильнее
   браузерного [hidden] (0,1,0) — без этой строки спрятанная панель осталась бы на экране. Ловушка в проекте
   уже срабатывала трижды (.zay-stg-drop, .zay-board, пояснение в модалке). Ниже базового правила. */
#tab-clients .crm-dups[hidden] { display: none; }
#tab-clients .crm-dups__t { font-size: 14px; font-weight: 700; color: #92400e; margin-bottom: 8px; }
#tab-clients .crm-dups__h { font-size: 12px; color: #92400e; margin-top: 8px; }
#tab-clients .crm-dup { display: flex; align-items: center; gap: 10px; padding: 8px 0;
    border-top: 1px solid #fde68a; }
#tab-clients .crm-dup:first-of-type { border-top: 0; }
#tab-clients .crm-dup__b { flex: 1; min-width: 0; }
#tab-clients .crm-dup__n { font-size: 14px; font-weight: 600; color: var(--text); }
#tab-clients .crm-dup__s { font-size: 12px; color: var(--muted); }
/* Сила совпадения названа словом, а не только цветом: «Совпадение по ИНН» и «Похоже по наименованию» —
   разные утверждения, и путать их нельзя (ТЗ 6.2). */
#tab-clients .crm-dup__m { font-size: 12px; color: var(--muted); margin-top: 2px; }
#tab-clients .crm-dup__m.is-strong { color: #b91c1c; font-weight: 600; }

/* Узкий экран: поля по бокам съедают ширину там, где её и так нет. Порог и значения — как у «Заявок»
   (zay-panel.css) и «Поручений» (por-panel.css): один каркас на все разделы. */
@media (max-width: 560px) {
    /* Две кнопки выбора сущности в 360px рядом не помещаются — ставим в столбец, а не сжимаем до нечитаемого. */
    #tab-clients .crm-pick { flex-direction: column; }
    #tab-clients .crm-f { flex-direction: column; gap: 2px; }
    #tab-clients .crm-f__l { flex: none; }
}

/* ── ИМПОРТ CSV ── */
/* Шаблон-пример. Кнопка ВТОРОСТЕПЕННАЯ по виду: главное действие экрана — выбрать файл, и заливная кнопка
   рядом с ним спорила бы с ним за внимание. Рамка и радиус — те же, что у .crm-opt__add (кнопка «+ Вариант»
   в редакторе полей): один и тот же вес действия обозначен в разделе одинаково. */
#tab-clients .crm-imp__tpl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
#tab-clients .crm-imp__tpl .crm-hint { flex: 1; min-width: 220px; margin-top: 0; }
#tab-clients .crm-imp__tplb { display: inline-flex; align-items: center; gap: 6px; flex: none;
    border: 1px solid var(--border); background: #fff; border-radius: var(--btn-radius, 10px); padding: 5px 11px; font: inherit;
    font-size: 13px; color: var(--text); cursor: pointer; }
#tab-clients .crm-imp__tplb:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
#tab-clients .crm-imp__tplb:disabled { opacity: .6; cursor: default; }
/* Родной <input type=file> в проекте не оформить одинаково в трёх браузерах — прячем его и одеваем метку. */
#tab-clients .crm-imp__pick { display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px dashed var(--border); border-radius: var(--btn-radius, 10px); padding: 18px 12px; margin-top: 12px;
    cursor: pointer; color: var(--muted); font-size: 14px; background: #fff; }
#tab-clients .crm-imp__pick:hover { border-color: var(--primary); color: var(--primary); }
#tab-clients .crm-imp__pick input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0;
    pointer-events: none; }

/* ── Файлы карточки (Э4) ──
   ⚠️ СТРОКА СО СМЫСЛОМ, А НЕ ПРОСТО ССЫЛКА: имя, размер, дата, кто приложил. Приём и состав — те же, что у
      файлов результата этапа в заявках (.zay-resf): картинка показывается превью, документ — иконкой и
      строкой. Значения (радиус 8, рамка var(--border), 13px у подписи) совпадают с ними намеренно — один и
      тот же предмет на экране обязан выглядеть одинаково.
   ⚠️ ПРЕВЬЮ 40×40 — РОВНО ПО ВЫСОТЕ СТРОКИ, чтобы список картинок и список документов шли одной сеткой.
      Крупнее — и строки запрыгают; мельче — по миниатюре ничего не узнать. */
#tab-clients .crm-files { display: flex; flex-direction: column; gap: 6px; }
#tab-clients .crm-file { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border);
    border-radius: 8px; background: #fff; padding: 7px 10px; }
#tab-clients .crm-file:hover { border-color: var(--primary); }
#tab-clients .crm-file__ic { flex: none; display: inline-flex; color: var(--muted); }
#tab-clients .crm-file__ic .ic { width: 16px; height: 16px; }
#tab-clients .crm-file__img { flex: none; width: 40px; height: 40px; border-radius: 6px; overflow: hidden;
    display: block; background: var(--bg); }
#tab-clients .crm-file__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
#tab-clients .crm-file__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
    text-decoration: none; color: var(--text); }
#tab-clients .crm-file__n { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tab-clients .crm-file__b:hover .crm-file__n { color: var(--primary); text-decoration: underline; }
#tab-clients .crm-file__m { font-size: 12px; color: var(--muted); }
#tab-clients .crm-file__x { flex: none; border: 0; background: none; font-size: 18px; line-height: 1;
    color: var(--muted); cursor: pointer; padding: 2px 6px; }
#tab-clients .crm-file__x:hover { color: var(--danger); }
/* ⚠️ ЛЕНТА ВНУТРИ КОРОБКИ — БЕЗ СВОИХ ОТСТУПОВ И БЕЗ ВТОРОЙ РАМКИ. Отступ теперь даёт паддинг .crm-box;
   оставь мы здесь margin-top, он сложился бы с ним в двойной. Рамки у ленты нет вовсе — ни своей, ни
   унаследованной: у сообщений свои пузыри (.tc-bubble), и коробка в коробке читалась бы как вложенный блок. */
#tab-clients .crm-box .tc { margin: 0; }

/* ── Засыпка старых заявок (Э6) ──
   ⚠️ ОТБИТА ЧЕРТОЙ И СВОИМ ЗАГОЛОВКОМ: это не шаг импорта, а соседнее дело на том же экране. Без черты
      блок читался бы как «что делать после загрузки файла», хотя приходят сюда и без всякого файла. */
#tab-clients .crm-bf { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); }
/* Заголовок блока «Заявки без клиента»: эталон секции (.crm-sect в разметке). Черту рисует сам .crm-bf
   выше — второй раз она бы удвоилась. */
#tab-clients .crm-bf__ttl { margin: 0 0 4px; }
#tab-clients .crm-bf__sum { font-size: 14px; color: var(--text); margin: 10px 0 8px; }
#tab-clients .crm-bf__l { margin: 0 0 10px; max-height: 220px; overflow-y: auto; }
#tab-clients .crm-bf__r { font-size: 13px; color: var(--muted); padding: 2px 0; }
#tab-clients .crm-bf__m { color: #b45309; }

#tab-clients .crm-imp__facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px;
    font-size: 13px; color: var(--muted); }
#tab-clients .crm-imp__facts b { color: var(--text); }
#tab-clients .crm-imp__dups { margin-top: 8px; font-size: 13px; color: var(--text); }

/* Три заголовка экрана импорта — эталон секции (.crm-sect в разметке), у каждого только свой отступ. */
#tab-clients .crm-imp__maph { margin: 16px 0 8px; }
#tab-clients .crm-imp__row { display: flex; align-items: center; gap: 10px; padding: 7px 0;
    border-bottom: 1px solid var(--border); }
#tab-clients .crm-imp__col { flex: 1; min-width: 0; font-size: 14px; color: var(--text); }
#tab-clients .crm-imp__ex { display: block; font-size: 12px; color: var(--muted); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
#tab-clients .crm-imp__t { flex: none; max-width: 52%; padding: 7px 10px; font: inherit; font-size: 13px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }

#tab-clients .crm-imp__pol { margin-top: 16px; }
#tab-clients .crm-imp__polttl { margin-bottom: 6px; }
#tab-clients .crm-imp__opt { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0;
    font-size: 13px; color: var(--muted); cursor: pointer; }
#tab-clients .crm-imp__opt b { color: var(--text); }
#tab-clients .crm-imp__warn { margin-top: 14px; padding: 10px 12px; border-radius: 10px;
    background: rgba(209, 36, 47, .07); color: var(--danger); font-size: 13px; line-height: 1.45; }

#tab-clients .crm-imp__rep { margin-top: 14px; }
#tab-clients .crm-imp__repl { font-size: 14px; color: var(--text); padding: 3px 0; }
#tab-clients .crm-imp__repl.ok { color: var(--success); }
#tab-clients .crm-imp__repl.error { color: var(--danger); }
#tab-clients .crm-imp__detttl { margin: 14px 0 6px; }
#tab-clients .crm-imp__det { font-size: 13px; color: var(--muted); padding: 3px 0; line-height: 1.4; }
#tab-clients .crm-imp__ln { display: inline-block; min-width: 84px; color: var(--text); }

/* ── ПРИВЯЗКА КОНТАКТА К КОМПАНИИ ── */
/* Кнопка в заголовке группы: заголовок — обычная строка, поэтому кнопку прижимаем вправо flex'ом. */
#tab-clients .crm-grp__act { margin-left: auto; flex: none; border: 1px solid var(--border); background: #fff;
    border-radius: var(--btn-radius, 10px); padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 400; color: var(--text);
    cursor: pointer; text-transform: none; letter-spacing: 0; }
#tab-clients .crm-grp__act:hover { border-color: var(--primary); color: var(--primary); }

/* ⚠️ ПОДЗАГОЛОВОК ВНУТРИ КОРОБКИ — С ЧЕРТОЙ СВЕРХУ, А НЕ ПРОСТО ОТСТУПОМ. Он делит один блок надвое:
   «данные» и «люди», — и без черты вторая половина читалась бы продолжением реквизитов. Отступы
   отрицательные по бокам ровно на паддинг коробки (12px): черта обязана идти во всю её ширину, иначе она
   выглядит подчёркиванием заголовка, а не разделителем.
   ⚠️ ИМЯ .crm-sect, А НЕ .crm-sub, И ЭТО ПОЧИНКА. Обоими элементами — подписью раздела под заголовком
   «Клиенты» и этим подзаголовком — звался один класс. Правила равной специфичности, побеждает нижнее, то
   есть ЭТО: подпись раздела рисовалась 12/600 uppercase с чертой сверху вместо 13/400, как в «Заявках» и
   «Поручениях». Замерено getComputedStyle. Имя взято по образцу .zay-sect — подзаголовка блока в заявках:
   один смысл, одно имя, соседние разделы зовут его одинаково. */
/* ЗАГОЛОВОК СЕКЦИИ — ЭТАЛОН РАЗДЕЛА. Сам вид: 12/600, прописные, приглушённый.
   ⚠️ ЧЕРТА СВЕРХУ — ВАРИАНТ, А НЕ ЧАСТЬ ЭТАЛОНА, и это решение по итогам переписи. Заголовков секций по
   трём разделам набралось пять видов, и совпадают они как раз в 12/600/прописных — расходятся ровно чертой.
   Сделай её обязательной — линии появились бы на каждом экране: в сводке поручений, в чек-листе, в форме
   заявки. Поэтому черта там, где она РАЗДЕЛЯЕТ (половины одной коробки), а не везде, где есть заголовок. */
/* ⚠️ ОТСТУПОВ У ЭТАЛОНА НЕТ, И ЭТО НЕ ЗАБЫВЧИВОСТЬ. Отступ у заголовка секции свой в каждом месте: в списке
   он отделяет группу (14px), в форме — блок вариантов (0), на экране импорта — таблицу сопоставления (16px).
   Задай мы отступ здесь — он перекрыл бы все три: специфичность равная, а базовое правило лежит ниже
   потребителей. Поймано замером: «Компании» потеряли свои 14px сверху. Отступ приносит место применения. */
#tab-clients .crm-sect { display: flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
/* Черта во всю ширину КОРОБКИ: отрицательные отступы по бокам ровно на её паддинг (12px), иначе черта
   выглядит подчёркиванием заголовка, а не разделителем. */
#tab-clients .crm-sect--rule { margin: 4px -12px 2px; padding: 10px 12px 0;
    border-top: 1px solid var(--border); }
/* ⚠️ ТА ЖЕ ЧЕРТА, НО ВНЕ КОРОБКИ — БЕЗ ОТРИЦАТЕЛЬНЫХ ОТСТУПОВ. Они посчитаны по паддингу коробки; там, где
   коробки нет (экран настройки полей), черта вылезала бы за колонку на 12px с каждой стороны — замерено
   (6..954 вместо 18..942). Оба варианта стоят НИЖЕ базового: при равной специфичности побеждает нижнее. */
#tab-clients .crm-sect--rule-flat { margin: 4px 0 2px; padding: 10px 0 0;
    border-top: 1px solid var(--border); }

/* Аватар контакта (.lrow__ava) и строка с крестиком отвязки (.lrow-wrap) — тоже в linked-row.css. */

#tab-clients .crm-link__pick { margin: 10px 0; }
#tab-clients .crm-link__ask { padding: 9px 10px; border-radius: 8px; font-size: 13px; line-height: 1.45;
    background: rgba(209, 36, 47, .07); color: var(--danger); margin-bottom: 10px; }
#tab-clients .crm-link__acts { margin-top: 8px; }
/* ⚠️ ПАРНОГО ПРАВИЛА К [hidden] ЗДЕСЬ НЕ НУЖНО, и это проверено: ни .crm-link__ask, ни контейнер #crmLinkBox
   display классом не получают, поэтому браузерное [hidden] их гасит само. Правило добавляют там, где класс
   задаёт display (см. .crm-add, .crm-dups, .crm-form__acts) — а не «на всякий случай». */

/* ── РЕДАКТОР ВАРИАНТОВ СПИСКА ── */
#tab-clients .crm-opts { margin-top: 10px; }
/* Заголовок вариантов списка: эталон секции (.crm-sect в разметке), здесь только свой нижний отступ. */
#tab-clients .crm-opts__ttl { margin-bottom: 6px; }
#tab-clients .crm-opt { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
#tab-clients .crm-opt__in { flex: 1; min-width: 0; box-sizing: border-box; padding: 7px 10px; font: inherit;
    font-size: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
/* Счётчик записей — он объясняет, почему крестик может быть выключен, поэтому стоит рядом с ним. */
#tab-clients .crm-opt__n { flex: none; font-size: 12px; color: var(--text); white-space: nowrap; }
#tab-clients .crm-opt__n--free { color: var(--muted); }
#tab-clients .crm-opt__b { flex: none; width: 28px; height: 28px; border: 1px solid var(--border);
    background: #fff; border-radius: var(--btn-radius, 10px); font-size: 14px; line-height: 1; color: var(--text); cursor: pointer;
    padding: 0; }
#tab-clients .crm-opt__b:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
#tab-clients .crm-opt__b:disabled { opacity: .4; cursor: not-allowed; }
#tab-clients .crm-opt__b--del:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
#tab-clients .crm-opt__add { border: 1px solid var(--border); background: #fff; border-radius: var(--btn-radius, 10px);
    padding: 5px 11px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
#tab-clients .crm-opt__add:hover { border-color: var(--primary); color: var(--primary); }

/* ── МНОЖЕСТВЕННЫЙ ВЫБОР: КНОПКА И ПАНЕЛЬ ── */
/* Устройство повторяет фильтр «Стадии» реестра заявок (zay-panel.css: .zay-stg-drop). */
#tab-clients .crm-ms { position: relative; }
/* ⚠️ ВЫСОТА ЗАКРЕПЛЕНА, А НЕ ВЫВЕДЕНА ИЗ СОДЕРЖИМОГО. Внутри кнопки теперь живут чипы: они на 5px выше
   строки текста (замер: чип 21px против 16px), и от прежних padding: 9px кнопка выросла бы до 41px — то есть
   прыгала бы при первом же выборе и разъезжалась с соседними полями. Отступы сверху и снизу сняты, высота
   задана явно: 36px — это НЕ круглое число, а замеренная высота соседнего .crm-fld > input (сверено
   getComputedStyle). align-items: center выше центрирует и текст, и чипы. */
#tab-clients .crm-ms__btn { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
    min-height: 36px; padding: 0 11px; font: inherit; font-size: 14px; text-align: left;
    border: 1px solid var(--border); border-radius: var(--btn-radius, 10px); background: #fff; color: var(--text); cursor: pointer; }
#tab-clients .crm-ms__btn:hover { border-color: var(--primary); }
#tab-clients .crm-ms__lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ЧИПЫ В КНОПКЕ — ТОТ ЖЕ .crm-chip, ЧТО В ПРОСМОТРЕ КАРТОЧКИ, со строчной раскладкой поверх.
   ⚠️ ПОТОЛОК ШИРИНЫ ВЫБРАН ЗАМЕРОМ: 8.3px на букву, подписи вариантов — медиана 35 символов, 90% ≤ 166,
      максимум 255. Без потолка одна подпись занимает 2112px и вытесняет все остальные чипы. 180px ≈ 21
      буква: «Рекомендация клиента» (172px) влезает целиком, а на широком экране рядом встают четыре
      такие подписи вместо одной. min(…, 100%) — второй предел, чтобы чип не вылез за кнопку на телефоне
      и всегда оставил место счётчику (замер: 878px под чипы на широком, 316px на узком).
   ⚠️ display: inline-block ОБЯЗАТЕЛЕН для многоточия: у inline-flex (вид чипа в карточке) text-overflow не
      работает — обрезать нечего, текст лежит анонимным элементом флекса. Вид от этого не меняется: те же
      фон, цвет, радиус и отступы, сверено getComputedStyle. */
#tab-clients .crm-ms__lbl .crm-chip { display: inline-block; vertical-align: middle;
    max-width: min(180px, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Промежуток тот же, что у .crm-chipset (6px), но здесь раскладка строчная, а не флексом — gap не работает. */
#tab-clients .crm-ms__lbl .crm-chip + .crm-chip { margin-left: 6px; }
/* ⚠️ ОДИННАДЦАТЫЙ СЛУЧАЙ ЛОВУШКИ [hidden]: невлезшие чипы прячутся атрибутом, а display им задан классом —
   (1,2,0) против (0,1,0) у браузерного [hidden]. Без этой пары «спрятанные» чипы остались бы на виду. */
#tab-clients .crm-ms__lbl .crm-chip[hidden] { display: none; }
/* ⚠️ СЧЁТЧИК НЕ СЖИМАЕТСЯ И СТОИТ ПОСЛЕ ЧИПОВ: прячутся именно чипы, а число обязано уцелеть — ради него
   счётчик и появляется. display НЕ задаём: он скрывается атрибутом hidden, и лишнее display потребовало бы
   ещё одной пары [hidden] (та же ловушка, что закрыта у панели и строки списка). */
#tab-clients .crm-ms__n { flex: none; font-size: 12px; color: var(--muted); background: var(--bg);
    border-radius: 20px; padding: 1px 7px; }
#tab-clients .crm-ms__chev { flex: none; display: flex; color: var(--muted); }
#tab-clients .crm-ms__drop { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.16);
    padding: 8px; display: flex; flex-direction: column; gap: 8px; }
/* ⚠️ ПАРНОЕ [hidden] ОБЯЗАТЕЛЬНО. Строка выше даёт display:flex со специфичностью (1,1,0), а браузерное
   [hidden]{display:none} — (0,1,0): без этой пары панель висела бы раскрытой всегда. Девятый случай той же
   ловушки в проекте; проверено getComputedStyle, а не «правило добавлено». */
#tab-clients .crm-ms__drop[hidden] { display: none; }
/* Не поместилась снизу — разворачиваем вверх (класс ставит place() после замера).
   ⚠️ ПРАВИЛО ОБЯЗАНО СТОЯТЬ ПОСЛЕ БАЗОВОГО. Специфичность одинаковая, и стоя ВЫШЕ оно проиграло бы:
      top: calc(100% + 4px) остался бы в силе вместе с bottom, панель растянулась бы между ними и схлопнулась
      в пару пикселей. Ровно это уже случалось с автодополнением подстановок (zay-panel.css: .zay-ac--up).
   ⚠️ top: auto ОБЯЗАТЕЛЕН здесь же — одного bottom мало, top надо снять явно. */
#tab-clients .crm-ms__drop--up { top: auto; bottom: calc(100% + 4px); }
#tab-clients .crm-ms__search input { width: 100%; box-sizing: border-box; padding: 7px 10px; font: inherit;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
/* ⚠️ ВЫСОТА СПИСКА ОГРАНИЧЕНА ПО ЗАМЕРУ: медиана 7 вариантов, встречаются списки на 47. Шесть строк видно
   целиком, дальше прокрутка ВНУТРИ панели — сама панель за экран не уезжает. */
#tab-clients .crm-ms__list { max-height: 232px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#tab-clients .crm-check { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 14px;
    color: var(--text); cursor: pointer; border-radius: 8px; }
#tab-clients .crm-check:hover { background: #f3f4f6; }
#tab-clients .crm-check input { flex: none; margin: 0; }
/* ⚠️ И ЗДЕСЬ ТОЖЕ: строку поиск прячет атрибутом, а display от класса (1,1,0) сильнее [hidden] (0,1,0). */
#tab-clients .crm-check[hidden] { display: none; }

/* ── РАДИО: ВСЕ ВАРИАНТЫ ВИДНЫ СРАЗУ, В ОБЩЕЙ РАМКЕ ── */
/* ⚠️ РАМКА ТА ЖЕ, ЧТО У ПОЛЯ ВВОДА И У КНОПКИ МНОЖЕСТВЕННОГО СПИСКА: 1px var(--border), радиус 10, белый
   фон. Голые кнопки на фоне формы весили меньше соседних полей и читались как подпись, а не как контрол —
   блок обязан выглядеть полем, потому что он и есть поле. Значения не «похожие», а те же самые: сверено
   getComputedStyle с .crm-fld > input рядом. */
/* ⚠️ ВЫСОТА ОГРАНИЧЕНА ТЕМ ЖЕ ПОТОЛКОМ, ЧТО У МНОЖЕСТВЕННОГО СПИСКА (232px ≈ шесть строк). Сорок семь
   радиокнопок в рамке — та же простыня, только обрамлённая; замер тот же (медиана 7, максимум 47). */
#tab-clients .crm-radios { border: 1px solid var(--border); border-radius: 10px; background: #fff;
    padding: 4px; box-sizing: border-box; max-height: 232px; overflow-y: auto;
    -webkit-overflow-scrolling: touch; }
#tab-clients .crm-radio { display: flex; align-items: center; gap: 8px; padding: 6px 7px; font-size: 14px;
    color: var(--text); cursor: pointer; border-radius: 8px; }
#tab-clients .crm-radio:hover { background: #f3f4f6; }
/* ⚠️ ВЫБРАННЫЙ ВАРИАНТ — ПОДЛОЖКОЙ НА ВСЮ СТРОКУ, а не только точкой в кружке. Точка мелкая, и в списке из
   десяти строк глазу не за что зацепиться; подложка отвечает на «что выбрано» с одного взгляда. :has()
   в проекте уже используется (por-panel.css: .por-ai-zone:has(.air:empty)), нового приёма не заводим. */
#tab-clients .crm-radio:has(input:checked) { background: #eef2ff; }
#tab-clients .crm-radio input { flex: none; margin: 0; }
#tab-clients .crm-radio__none { color: var(--muted); }

/* Чипы выбранного в просмотре карточки — вид тот же, что у чипов пикера (emp-picker.css). */
#tab-clients .crm-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
#tab-clients .crm-chip { display: inline-flex; align-items: center; background: #eef2ff; color: #3730a3;
    border-radius: 20px; padding: 3px 10px; font-size: 13px; }