/* ════════════════════════════════════════════════════════════════════════════════════
   patterns.css — ПРИМИТИВЫ КОМПОНОВКИ. Второй слой после tokens.css.

   ЗАЧЕМ. Токены в проекте дисциплинированы: цвета, радиусы, кегли, тени — всё через
   переменные. А ФОРМЫ, из которых собран каждый экран, токенов не имеют, и каждая задача
   изобретает их заново. Замер по css/ (main + ui-kit + pages):

     · 39  классов «чип»          (cp-tag, cp-flag, cp-hbadge, flt-chip, facet-chip,
                                   stock-chip, cat-chip, loan-chip, holder-chip, …)
     · 13  классов «строка»       (cp-contract-row, cp-detail-row, cp-ov-krow, le-item,
                                   mem-item, obj-facts, m-attchip, …)
     · 12  классов «коробка»      (cp-registry, cp-aside-sec, recon-kpi, bank-src,
                                   calc-pad, map-group, …)
     ·  4  семейства «поле»       (cp-fin-cell, cp-reg-cell, cp-ov-cell, cp-ov-card —
                                   у каждого свои .l / .v / .s)
     · 1667 отступов в пикселях и РОВНО НОЛЬ через шкалу --sp-*
     · 16  разных значений letter-spacing, из них .04em и .4px — одно и то же намерение

   Каждое из этих мест по отдельности выглядит прилично. Вместе — «навалено»: на одном
   экране шесть видов пилюли, четыре вида подписи и три вида строки списка. Глаз не
   находит систему, потому что её нет — есть 1261 класс.

   ЧТО ЭТО ЗА ФАЙЛ. Пять форм, из которых собирается любой экран учётной системы.
   Форма задаётся ЗДЕСЬ и только здесь. Компонент выбирает форму и добавляет к ней
   смысл — цвет состояния, ширину колонки, порядок. Компонент НЕ задаёт заново padding,
   border-radius, font-size подписи и толщину рамки: как только он это делает, начинается
   расползание.

   ПОДКЛЮЧЕНИЕ: @import сразу после tokens.css в main.css; публичные страницы линкуют
   <link> перед своим страничным файлом. Порядок точный — см. patch/ЗАДАЧА.md.

   ТОКЕНЫ ЭТОГО СЛОЯ ЖИВУТ В tokens.css, А НЕ ЗДЕСЬ. Сначала они стояли в :root этого
   файла — и это сломало бы ветку: сторож checkboxstyle.test.js требует, чтобы каждый
   var() ссылался на токен, объявленный в tokens.css. Правило верное, и спорить с ним
   незачем: --ls-caps и --rh-* — такие же токены, как --sp-*, и место у них одно.
   Блок для вставки в tokens.css — в patch/ЗАДАЧА.md, шаг 1.

   Правило прежнее и распространяется на форму: никаких пиксельных отступов вне шкалы
   --sp-*, никаких хексов, никаких своих радиусов. Сторож — tests/spacing.test.js.
   ════════════════════════════════════════════════════════════════════════════════════ */

/* ЧТО ОТСЮДА УБРАНО (09.743) И ПОЧЕМУ. Слой приехал набором форм «на будущее»: чипы,
   двухколоночная раскладка с боковой полосой, строка-добавление, стопка секций. Прижились
   четыре — коробка, заголовок, поле и строка списка, — остальные полтора года не
   использовал никто. Мёртвая форма хуже отсутствующей: её никто не проверяет, она тихо
   расходится с живыми (у неё свои отступы и кегли), и следующий читатель принимает её за
   действующее правило. Вернуть их — это `git revert` одного коммита, а не археология.

/* ═══ 1. КОРОБКА ─────────────────────────────────────────────────────────────────
   Обособленный кусок содержимого. Подложка + рамка. Единственный вид.
   .plain — на белом (внутри другой коробки или на цветном фоне).
   ГРАНИЦА — НЕ УКРАШЕНИЕ. Заворачивать в коробку каждый абзац значит рисовать сетку
   там, где хватило бы воздуха: экран из девяти рамок выглядит навалено при любых
   отступах. Коробка нужна там, где содержимое ЧУЖДО соседнему (сводка среди полей,
   правая колонка сигналов), а не там, где просто идёт следующий заголовок. */
.p-box        { border:1px solid var(--border); border-radius:var(--r-md);
                background:var(--surface-2); padding:var(--sp-5) var(--sp-6)}
.p-box.plain  { background:var(--surface) }
.p-box.attn   { border-color:var(--warn-border); background:var(--warn-bg) }
.p-box.hint   { border-color:var(--info-border); background:var(--info-bg) }
.p-box + .p-box { margin-top:var(--rh-block)}

/* ═══ 2. ЗАГОЛОВОК СЕКЦИИ ────────────────────────────────────────────────────────
   Одна форма на все служебные заголовки: и над коробкой, и над группой полей.
   Было: .cp-group (капитель, акцент, рамка сверху), .cp-aside-title (капитель, muted),
   .p-box-title у каждой новой панели — три вида одного и того же. */
.p-title      { margin:0 0 var(--sp-4); font-size:var(--fs-2xs);
                font-weight:var(--fw-semibold); text-transform:uppercase;
                letter-spacing:var(--ls-caps); color:var(--text-muted) }
.p-title.accent { color:var(--accent) }

/* ═══ 3. ПОЛЕ: ПОДПИСЬ — ЗНАЧЕНИЕ — ПОЯСНЕНИЕ ────────────────────────────────────
   Самый частый узел учётного интерфейса и главный источник расползания: четыре
   семейства с разной капителью, разной разрядкой и разными кеглями значения.
   Три роли, ровно три класса. Больше ролей в поле не бывает: если нужна четвёртая —
   это не поле, это секция. */
.p-kv         { display:grid; gap:var(--sp-1); min-width:0 }
.p-kv-l       { margin:0; font-size:var(--fs-2xs); text-transform:uppercase;
                letter-spacing:var(--ls-caps); color:var(--text-muted) }
.p-kv-v       { margin:0; font-size:var(--fs-sm); overflow-wrap:anywhere }
.p-kv-v.num   { font-family:var(--font-num); font-variant-numeric:tabular-nums }
.p-kv-v.big   { font-size:var(--fs-2xl); font-weight:var(--fw-semibold);
                line-height:1.2 }
.p-kv-v.pos   { color:var(--pos) } .p-kv-v.neg { color:var(--neg) }
.p-kv-v.warn  { color:var(--warn) }

/* СЕТКА ПОЛЕЙ. Колонки считаются от минимальной ширины поля, а не назначаются числом:
   один и тот же блок сам даёт четыре колонки в карточке и две в правой панели. */
.p-kv-grid    { display:grid; gap:var(--sp-5) var(--sp-8);
                grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr)) }
.p-kv-grid.tight { gap:var(--sp-4) var(--sp-6)}
.p-kv-grid > .wide { grid-column:1/-1 }

/* ═══ 4. СТРОКА СПИСКА ───────────────────────────────────────────────────────────
   Договор, счёт, лицо, участник, объект — всё это однородные строки. Один вид: человек
   видит тот же язык и не думает, что попал в другой раздел.
   Роли внутри строки фиксированы, и порядок их — часть правила: что это → когда →
   про что → справа итог/действие. */
.p-rows       { display:flex; flex-direction:column; gap:var(--rh-item)}
.p-row        { display:flex; align-items:center; gap:var(--sp-5);
                padding:var(--sp-3) var(--sp-4); border:1px solid var(--border);
                border-radius:var(--r-sm); background:var(--surface);
                font-size:var(--fs-sm); min-width:0 }
.p-row.nested { margin-left:var(--sp-8); background:var(--surface) }

/* ═══ ДВЕ КОЛОНКИ: СОДЕРЖИМОЕ + СИГНАЛЫ ─────────────────────────────────────────
   Раскладка карточки-экрана. Правая колонка узкая и фиксированная: она для того, что
   ТРЕБУЕТ ВНИМАНИЯ, и расти вместе с содержимым ей незачем. На узком — под содержимое:
   сигналы важнее раскладки. */
.p-cols       { display:flex; gap:var(--rh-block); align-items:flex-start; min-width:0 }
@media (max-width:900px){
  .p-cols     { display:block }
}