/* v2kit.css — общий язык портала v2 для СТАРЫХ страниц (PORTAL_V2_SPEC §0).
 *
 * ЗАЧЕМ. Этапы 1–7 переодели шесть экранов (обзор, почта, сделки, документы, цены,
 * задачи-карточка), а остальные тридцать остались в прежней вёрстке: разный радиус,
 * разный воздух, кнопки без отклика, таблицы без липкой шапки. Портал выглядел
 * наполовину новым. Этот файл поднимает ОБЩИЕ примитивы, которыми набраны старые
 * страницы (.page-head, .card, .docs-table, .chip, .btn-*, поля ввода, .alert),
 * поэтому одна правка меняет сразу все экраны, где они встречаются.
 *
 * КАК. Подключается ПОСЛЕ style.css и doc.css — тем же весом селектора, но позже,
 * поэтому побеждает без !important. Ничего не переименовывает: разметку страниц
 * трогать не нужно. Всё новое (:has, container queries, @starting-style) под
 * @supports или само по себе безвредно: без поддержки остаётся прежний вид.
 *
 * Тема — только на --fg-rgb; цвета только смысловые (--c-good/--c-warn/--c-bad/--c-info).
 * Движение — ease-out ≤300 мс, при reduced-motion выключается.  */

:root {
  --v2-r-lg: var(--r, 18px); /* карточка — тот же радиус, что в эталоне */
  --v2-r-md: 12px;          /* кнопка, поле */
  --v2-r-sm: 9px;           /* мелкий чип, значок */
  --v2-ease: cubic-bezier(.2, .8, .2, 1);
  --v2-line: rgba(var(--fg-rgb), .12);
  --v2-hover: rgba(var(--fg-rgb), .06);
}

/* ── 1. Заголовок страницы: тот же воздух и типографика, что на /home и /documents ── */
.page-head { align-items: flex-end; margin: clamp(14px, 3.4vh, 28px) 0 16px;
  /* Шапка раздела - строка ЗАГОЛОВОК + ДЕЙСТВИЯ. Без переноса она держала оба блока
     в одной строке на любой ширине: на 320px форма нового счёта и кнопка "Раздел
     архивом" уезжали за экран (scrollWidth 345 и 360), и вбок ехала вся страница.
     Перенос ничего не меняет на широком экране - там оба блока и так помещаются. */
  flex-wrap: wrap; }
.page-head > * { min-width: 0; max-width: 100%; }
.page-head h1 {
  font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; line-height: 1.12;
  letter-spacing: -.022em;              /* крупный кегль требует отрицательного трекинга */
  text-wrap: balance; margin: 0;
}
.page-head h1 + .mini, .page-head .mini { font-size: 13.5px; line-height: 1.5; margin-top: 6px;
  max-width: 68ch; text-wrap: pretty; }
h2 { letter-spacing: -.012em; }

/* ── 2. Карточка ── */
.card {
  border-radius: var(--v2-r-lg); border-color: var(--v2-line);
  padding: clamp(16px, 2.2vw, 26px);
  box-shadow: var(--shadow-sm, 0 2px 8px -2px rgba(0, 0, 0, .10));
}
.card h2 { font-size: 16px; letter-spacing: -.01em; }

/* ── 3. Кнопки: отклик на нажатие, тап-цель 44px, видимый фокус (§1.3) ── */
.btn-primary, .btn-ghost, .btn-mini, button.btn, .btn {
  transition: background .16s var(--v2-ease), border-color .16s var(--v2-ease),
              transform .14s var(--v2-ease), filter .16s var(--v2-ease);
}
/* Пилюля вместо прямоугольника — форма кнопки эталона (.cta: 999px, padding 0 22px). */
.btn-primary, .btn-ghost { border-radius: 999px; min-height: 40px; padding: 0 22px; }
/* .btn не был описан ни в одном файле — браузер рисовал системную кнопку 22px
   (замер на живом /contacts). Класс остаётся в разметке, поэтому описываем его
   здесь: любой .btn на портале выходит органом управления главного яруса. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px; min-height: 40px; padding: 9px 18px;
  font: inherit; font-size: 14px; line-height: 1.2; cursor: pointer;
  border: 1px solid var(--v2-line); background: var(--v2-hover); color: inherit; }
.btn:hover { background: rgba(var(--fg-rgb), .12); }
.btn:focus-visible { outline: 3px solid var(--blue, #0071e3); outline-offset: 3px; }
.btn-primary:hover { transform: none; filter: brightness(1.06); }   /* сдвиг вверх заменён на яркость: строка не «дёргается» */
.btn-primary:active, .btn-ghost:active, .btn-mini:active { transform: scale(.96); }
.btn-mini, .btn-sm { border-radius: 999px; padding: 6px 14px; }

/* Плашка бывает подписью, а бывает кнопкой. Подпись живёт на 22px, а вот
   button.chip и a.chip нажимают пальцем: на живом /deal/979 «№ ЕМ7079»
   выходил 29px. Кликабельной плашке — мелкий ярус органов управления. */
button.chip, a.chip { min-height: 34px; box-sizing: border-box; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; }
.btn-primary:focus-visible, .btn-ghost:focus-visible, .btn-mini:focus-visible,
a.chip:focus-visible, .row-actions a:focus-visible {
  outline: 3px solid var(--blue, #0071e3); outline-offset: 3px;
}
/* Мелкая кнопка в строке таблицы физически маленькая — тап-цель добираем невидимой
   областью, а не размером: иначе строки таблицы разъезжаются по высоте. */
.btn-mini { position: relative; }
/* Область добирается ТОЛЬКО по вертикали. Горизонтальный вылет в 4px у кнопки,
   прижатой к правому краю (на /company при 375px это «Раздел архивом»), давал
   странице 2px горизонтальной прокрутки — палец её не видит, а страница ездит. */
.btn-mini::after { content: ''; position: absolute; inset: -9px 0; }

/* ── 4. Поля ввода: один размер, один радиус и одно фокус-кольцо на весь портал ──
   Замеряли на /deals: у поля поиска и у полей «Новой сделки» стояли БРАУЗЕРНЫЕ
   умолчания — высота 20px, padding 1px 2px, шрифт 13.33px. Рядом кнопка «Найти» в
   40px, и строка выглядела наполовину старой: плоская серая полоска против кнопки.
   Пальцем в поле 20px не попасть. Даём полям тот же рост, что и кнопкам, и тот же
   кегль, что и остальному тексту. */
/* input:not([type]) — поле БЕЗ атрибута type. Селектор input[type=text] его не
   ловит: на живых /contacts и /tickets поиск выходил браузерным полем в 21-22px
   рядом с кнопкой. Умолчание разметки — текстовое поле, значит и ярус общий. */
input:not([type]),
input[type=text], input[type=search], input[type=email], input[type=number],
input[type=date], input[type=tel], input[type=password], select, textarea {
  border-radius: var(--v2-r-md);
  font: inherit; font-size: 14px; line-height: 1.35;
  padding: 9px 13px; min-height: 40px;
  /* Поле не имеет права распирать строку. У flex-элемента min-width по умолчанию auto,
     и поле с size=… или с длинной подсказкой выталкивало соседей за экран: на 320px вся
     страница получала прокрутку вбок. Ширину диктует раскладка, а не содержимое. */
  min-width: 0; max-width: 100%;
  transition: border-color .16s var(--v2-ease), box-shadow .16s var(--v2-ease),
              background .16s var(--v2-ease);
}
textarea { min-height: 72px; }
/* Выбор файла — тоже орган управления. Браузерное поле выходило 20px в ряду
   сорокапиксельных (замер на живом /company): даём ему тот же рост и кегль. */
input[type=file] { font: inherit; font-size: 13px; min-height: 34px; max-width: 100%;
  padding: 6px 0; }
input[type=file]::file-selector-button {
  font: inherit; font-size: 13px; min-height: 34px; padding: 6px 12px; margin-right: 10px;
  border-radius: var(--v2-r-sm); border: 1px solid var(--v2-line);
  background: var(--v2-hover); color: inherit; cursor: pointer;
  transition: background .16s var(--v2-ease); }
input[type=file]::file-selector-button:hover { background: rgba(var(--fg-rgb), .12); }
/* Поле, которому разметка задала длину в символах (size=…), рассчитано на короткое
   значение: широкий отступ распёр бы его строку. Радиус и рост оставляем, воздух — по
   размеру поля. */
input[size] { padding: 7px 10px; }
input[type=checkbox], input[type=radio] { min-height: 0; padding: 0; }
/* Свой шеврон вместо системной стрелки: родная стрелка не знает ни темы портала, ни
   нашего цвета текста — в тёмной теме она оставалась чёрной. Рисунок задаём переменной
   и меняем её в тёмной теме (currentColor внутри data:-картинки не работает). */
/* Умолчание портала — ТЁМНАЯ тема, поэтому базовый шеврон светлый; на светлой теме
   (выбранной руками или системной) подменяем переменную на тёмный. */
:root { --v2-chev: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23a9b2c7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root[data-theme="light"] { --v2-chev: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235d6580' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { --v2-chev: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235d6580' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
select:not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px;
  background-image: var(--v2-chev);
  background-repeat: no-repeat; background-position: right 12px center;
  background-size: 12px 8px;
}
input:not([type]):focus,
input[type=text]:focus, input[type=search]:focus, input[type=email]:focus,
input[type=number]:focus, input[type=date]:focus, input[type=tel]:focus,
select:focus, textarea:focus {
  outline: none; border-color: var(--blue, #0071e3);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb, 0,113,227), .25);
}
@supports (color: color-mix(in srgb, red, blue)) {
  input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue, #0071e3) 25%, transparent);
  }
}

/* ── 5. Чипы и фильтры: форма как у чипов «Документов» ── */
.chip, .chip-gray, .chip-green, .chip-orange, .chip-link {
  border-radius: 999px; font-weight: 600; letter-spacing: .002em;
}
a.chip, .chip-link { text-decoration: none; transition: background .14s var(--v2-ease), transform .14s var(--v2-ease); }
a.chip:hover, .chip-link:hover { background: var(--v2-hover); }
a.chip:active, .chip-link:active { transform: scale(.96); }
/* Полоски фильтров (.tf на «Задачах», .f/.fl на прочих) — минимальная цель 36px */
.tf, .filters a, .task-filters a { border-radius: 999px; min-height: 36px; display: inline-flex;
  align-items: center; transition: background .14s var(--v2-ease), transform .14s var(--v2-ease); }
.tf:active, .filters a:active { transform: scale(.96); }

/* ── 6. Таблицы: липкая шапка и подсветка строки ── */
.docs-table th, .items-table th {
  position: sticky; top: 52px;          /* высота стеклянной шапки (§1.1) */
  z-index: 1; background: rgb(var(--bg-rgb));
  letter-spacing: .02em; text-transform: none;
  /* Шапка таблицы эталона: не жирная и не крикливая — вес 500 и приглушённые
     чернила, чтобы взгляд читал ДАННЫЕ, а не заголовки. */
  font-weight: 500; font-size: 12.8px; color: var(--muted); padding: 12px 16px;
}
.docs-table td, .items-table td { padding: 14px 16px; }
.docs-table tbody tr { transition: background .12s var(--v2-ease); }
.docs-table tbody tr:hover { background: var(--v2-hover); }
.tbl-scroll { border-radius: var(--v2-r-md); overscroll-behavior-x: contain; }
/* Тонкая полоса прокрутки у широких таблиц — как на новых экранах */
.tbl-scroll { scrollbar-width: thin; scrollbar-color: rgba(var(--fg-rgb), .25) transparent; }

/* ── 7. Сообщения ── */
.alert { border-radius: var(--v2-r-md); line-height: 1.5; text-wrap: pretty; }

/* ── 8. Появление карточек при прокрутке — там, где браузер умеет; иначе статично ── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card { animation: v2In linear both; animation-timeline: view();
      animation-range: entry 0% entry 16%; }
    @keyframes v2In { from { opacity: .3; } to { opacity: 1; } }
    /* Карточке, внутри которой лежит модальное окно, появление НЕ даём. Анимация
       прозрачности создаёт слой отрисовки: окно запиралось внутри карточки и его
       не спасал никакой z-index — сверху оказывались шапка, ссылки блоков и меню.
       А пока карточка не доехала до экрана (fill both держит .3), окно рисовалось
       на треть прозрачным, и сквозь него читалась страница. Так выглядели
       «наложения слоёв» в разделе УПД. */
    .card:has(.modal-overlay, .inv-modal, .upd-overlay) { animation: none; opacity: 1; }
  }
}

/* ── 9. Спокойный режим: без движения и без стекла ── */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-ghost, .btn-mini, .tf, a.chip, .docs-table tbody tr,
  input, select, textarea { transition: none; }
  .btn-primary:active, .btn-ghost:active, .btn-mini:active, .tf:active { transform: none; }
}

/* ── 10. Значок в строке текста. Треки ставят классу `v2i` inline-SVG вместо эмодзи;
   без выравнивания по средней линии значок «подпрыгивал» относительно букв. ── */
.v2i { vertical-align: -.16em; flex: none; }
a .v2i, button .v2i { pointer-events: none; }

/* ── 11. Нижний предел кегля ──────────────────────────────────────────────────
   12px — пол для любого текста портала. Подписи под цифрами карточек разъехались
   было на 11,5px: на телефоне в тёмной теме такая строка при прозрачности .6 уже
   не читается, а сэкономленного места — полпикселя. Если понадобится «мельче»,
   уменьшайте не кегль, а насыщенность цвета. */
.rc-sub, .ds-sub, .ic-sub, .tc-sub { font-size: 12px; }