/* ═══════════════════════════════════════════════════════════════════════
   Слой совместимости: утилиты, которые JavaScript подставляет в разметку.

   ЗАЧЕМ ЭТО ЕСТЬ. Экран отчёта, список нарушений, отклики исполнителей,
   сообщения чата и статусы сделок рисуются скриптами, а не шаблонами:
   app.js строит их через innerHTML с Tailwind-классами (77 уникальных,
   150 вхождений), плюс инлайновые скрипты в 10 шаблонах.

   В теме v2 Tailwind удалён. Без этого файла всё, что появляется после
   действия пользователя — результат скана, отчёт, переписка — отрисовалось бы
   без единого стиля. Ни гейт, ни smoke-тесты это не ловят: такой разметки
   нет в шаблоне, она возникает только в браузере.

   Здесь реализованы ровно те классы, которые скрипты реально используют,
   и отображены на токены v2. Это мост, а не дизайн-система: правильное
   решение — постепенно перевести скрипты на семантические классы v2,
   после чего файл сокращается и в конце исчезает.

   Список классов снимается скриптом scan_js_classes.py.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Размеры текста ────────────────────────────────────── */
.text-xs{font-size:.75rem;line-height:1.45}
.text-sm{font-size:.875rem;line-height:1.5}
.text-base{font-size:1rem;line-height:1.5}
.text-xl{font-size:1.25rem;line-height:1.3;letter-spacing:-.015em}
.text-2xl{font-size:1.5rem;line-height:1.25;letter-spacing:-.02em}
.text-3xl{font-size:1.875rem;line-height:1.2;letter-spacing:-.025em}

/* ── Начертание ────────────────────────────────────────── */
.font-semibold{font-weight:500}
.font-bold{font-weight:600}
.font-extrabold{font-weight:600}
.font-mono{font-family:var(--font-mono)}

/* ── Цвет текста ───────────────────────────────────────────
   Серая шкала старой темы и палитра Tailwind сводятся к трём ролям v2:
   основной текст, приглушённый, вспомогательный. Смысловые цвета — к --crit,
   --warn, --ok, --accent, чтобы отчёт говорил на языке остального сайта. */
.text-ink-700,.text-gray-600{color:var(--text)}
.text-ink-500,.text-gray-500{color:var(--muted-2)}
.text-gray-400,.text-gray-300{color:var(--muted)}
.text-white{color:#fff}
.text-center{text-align:center}
.text-left{text-align:left}

.text-crit,.text-red-600,.text-rose-600{color:var(--crit)}
.text-warn,.text-orange-600,.text-amber-900,.text-yellow-900,.text-yellow-400{color:var(--warn)}
.text-ok,.text-green-600,.text-green-700,.text-emerald-800{color:var(--ok)}
.text-accent-500,.text-blue-600,.text-blue-700,.text-purple-700{color:var(--accent)}

/* ── Фон ───────────────────────────────────────────────── */
.bg-white{background:var(--paper)}
.bg-gray-50,.bg-gray-100{background:var(--paper-2)}
.bg-accent-50,.bg-blue-100{background:rgba(11,132,224,.08)}
.bg-purple-100{background:rgba(11,132,224,.08)}
.bg-crit\/10{background:rgba(194,55,44,.10)}
.bg-warn\/10,.bg-amber-50,.bg-yellow-50{background:rgba(154,106,18,.10)}
.bg-ok,.bg-green-600{background:var(--ok);color:#fff}
.bg-ok\/10,.bg-green-100{background:rgba(47,122,77,.10)}
/* Динамические: bg-${sevColor} / bg-${sc.bg} собираются в скрипте по severity */
.bg-crit{background:var(--crit);color:#fff}
.bg-warn{background:var(--warn);color:#fff}
.bg-accent{background:var(--accent);color:#fff}
.bg-crit\/5{background:rgba(194,55,44,.05)}
.bg-warn\/5{background:rgba(154,106,18,.05)}
.bg-ok\/5{background:rgba(47,122,77,.05)}

/* ── Рамки ─────────────────────────────────────────────── */
.border{border:1px solid var(--rule)}
.border-l-4{border-left:3px solid var(--rule)}
.border-gray-200,.border-ink-300\/30{border-color:var(--rule)}
.border-crit\/30{border-color:rgba(194,55,44,.35)}
.border-ok\/30{border-color:rgba(47,122,77,.35)}
.border-accent-500\/40{border-color:rgba(11,132,224,.40)}
.border-amber-400,.border-yellow-300{border-color:rgba(154,106,18,.35)}

.rounded,.rounded-md{border-radius:var(--r-sm,8px)}
.rounded-lg,.rounded-xl,.rounded-2xl{border-radius:var(--r,12px)}
.rounded-full{border-radius:999px}

/* ── Раскладка ─────────────────────────────────────────── */
.flex{display:flex}
.flex-1{flex:1 1 0%;min-width:0}
.flex-col{flex-direction:column}
.grid{display:grid}
.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-stretch{align-items:stretch}
.justify-between{justify-content:space-between}
.block{display:block}

.gap-px{gap:1px}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}

/* ── Отступы ───────────────────────────────────────────── */
.p-2{padding:.5rem}   .p-3{padding:.75rem}  .p-4{padding:1rem}
.p-5{padding:1.25rem} .p-6{padding:1.5rem}  .p-8{padding:2rem}
.px-1\.5{padding-inline:.375rem}  .px-2{padding-inline:.5rem}
.px-2\.5{padding-inline:.625rem}  .px-3{padding-inline:.75rem}
.px-4{padding-inline:1rem}
.py-0\.5{padding-block:.125rem}   .py-1{padding-block:.25rem}
.py-1\.5{padding-block:.375rem}   .py-2{padding-block:.5rem}

.mt-0\.5{margin-top:.125rem} .mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}     .mt-4{margin-top:1rem}
.mb-1{margin-bottom:.25rem}  .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}    .mb-8{margin-bottom:2rem}

/* ── Размеры ───────────────────────────────────────────── */
.w-20{width:5rem}  .h-20{height:5rem}
.w-56{width:14rem} .h-56{height:14rem}
.max-w-md{max-width:28rem}
.min-h-\[1\.25rem\]{min-height:1.25rem}

/* ── Текстовые свойства ────────────────────────────────── */
.leading-relaxed{line-height:1.6}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-pre-wrap{white-space:pre-wrap}
.opacity-70{opacity:.7}
.ring-4{box-shadow:0 0 0 3px rgba(11,132,224,.18)}

/* ── Состояния ─────────────────────────────────────────── */
.hover\:bg-blue-200:hover{background:rgba(11,132,224,.14)}
.hover\:bg-green-700:hover{background:var(--ok);opacity:.88}
.hover\:bg-warn\/20:hover{background:rgba(154,106,18,.18)}
.hover\:border-blue-400:hover{border-color:var(--accent)}
.hover\:shadow-sm:hover{box-shadow:0 1px 3px rgba(14,14,16,.10)}

/* ── Брейкпоинты, которые встречаются в скриптах ───────── */
@media (min-width:640px){
  .sm\:flex-row{flex-direction:row}
  .sm\:items-center{align-items:center}
}
@media (min-width:768px){
  .md\:flex-row{flex-direction:row}
  .md\:items-center{align-items:center}
  .md\:text-right{text-align:right}
}

/* ── Добор после прогона по проду ───────────────────────────
   Эти восемь утилит app.js подставляет в разметку отчёта, а в шиме их не было.
   Виднее всего было по кружку с баллом: он рисуется как
   «grid place-items-center», без правила число вставало в левый верхний угол
   и вылезало за круг. Список снят скриптом по static/app.js и инлайновым
   скриптам templates/v2/**, а не на глаз. */
.place-items-center{place-items:center}
.shrink-0,.flex-shrink-0{flex-shrink:0}
.ml-1{margin-left:.25rem}
.ml-3{margin-left:.75rem}
.underline{text-decoration:underline}
.transition{transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
/* Длинные URL и токены в отчёте иначе распирают карточку. */
.break-all{word-break:break-all}
.break-words{overflow-wrap:break-word}