/* Панель разбора проверенного чека.
 *
 * Свой файл и СВОЙ корень токенов — по той же причине, что у окна ручной
 * проверки (`detecto-check.css`): панель живёт в трёх разных хозяевах. В окне
 * «Приёма» её окружают токены `--pv-*`, в просмотрщике вложений Bybit — никакие
 * (он рисует свой хром литеральным белым поверх чёрного на 78 %), в окне под
 * лупой — токены `.dchk`. Опираться на чужие переменные значило бы получить
 * невидимый текст в двух местах из трёх.
 *
 * Поэтому всё выводится от ГЛОБАЛЬНЫХ токенов темы, а фон панель красит себе
 * сама и непрозрачным: прозрачная, в светлой теме она дала бы тёмный текст на
 * тёмной подложке просмотрщика — ровно тот класс ошибки, что 19.08.2026 сделал
 * половину текста белым по белому. */

.drep {
  --drep-fg: var(--text);
  --drep-mut: var(--muted);
  --drep-dim: color-mix(in srgb, var(--text) 45%, transparent);
  --drep-bg: var(--page-bg-2);
  --drep-inset: color-mix(in srgb, var(--text) 5%, transparent);
  --drep-line: color-mix(in srgb, var(--text) 10%, transparent);
  --drep-ok: var(--primary);
  --drep-bad: #e5484d;
  --drep-warn: #e0a83c;

  /* Красный и янтарный из тёмной темы дают на молочном фоне 2–3:1 — акценту
     хватает, абзацу нет. Поэтому у текста свои оттенки. */
  --drep-bad-fg: var(--drep-bad);
  --drep-warn-fg: var(--drep-warn);

  --drep-r: 10px;

  /* Раскладку решает СВОЯ ширина, а не ширина экрана.
   *
   * Панель живёт в трёх разных по ширине хозяевах: правая колонка окна
   * апелляции (её тянет сплиттер), колонка просмотрщика вложений и окно под
   * лупой в 680 px. `@media` мерил бы экран и разъезжался с каждым из них:
   * узкая колонка на большом мониторе оставалась бы «широкой». Приём в проекте
   * уже обкатан — лестница сужения карточки «Приёма» стоит на нём же.
   *
   * Контейнер ИМЕНОВАННЫЙ и объявлен ровно здесь. Переносить его на чужой узел
   * нельзя: `container-type` на соседе однажды заставил лестницу сужения мерить
   * не то, что она сужает. */
  container: drep / inline-size;

  color: var(--drep-fg);
  background: var(--drep-bg);
  border-radius: var(--drep-r);
  font-family: var(--font-ui);
  /* Ровные колонки цифр даёт не моноширинность, а табличные цифры: решение
     проекта, моноширинный шрифт здесь чужой (см. bybit.css). */
  font-variant-numeric: tabular-nums;
  /* Всё внутри пишет третья сторона: банк, реквизит, текст ответа. Длинная
     строка без пробелов иначе распирает колонку и уводит окно вбок. */
  overflow-wrap: anywhere;
}

[data-theme="light"] .drep {
  --drep-bad-fg: #b4262b;
  --drep-warn-fg: #855800;
}

/* Запас там, где color-mix не поддержан. Условие ОБЯЗАНО содержать свойство:
   у `@supports not (color-mix(...))` без него результат «истина» всегда, и
   запас перекрывал бы рабочие значения (обжигались 19.08.2026). Задан для
   ОБЕИХ тем — иначе светлая осталась бы с тёмными подложками. */
@supports not (color: color-mix(in srgb, white 50%, black)) {
  .drep {
    --drep-dim: rgba(255, 255, 255, .45);
    --drep-inset: rgba(255, 255, 255, .05);
    --drep-line: rgba(255, 255, 255, .10);
  }
  [data-theme="light"] .drep {
    --drep-dim: rgba(15, 20, 17, .45);
    --drep-inset: rgba(15, 20, 17, .05);
    --drep-line: rgba(15, 20, 17, .10);
  }
}

/* ---------- шапка ----------
   Тон вердикта читается ДО текста: цветная полоса слева и лёгкая заливка. Это
   не украшение — панель открывают, чтобы узнать один факт, и он должен быть
   виден раньше, чем глаз доберётся до букв. Полоса, а не рамка: рамка вокруг
   всего блока спорила бы с рамкой окна, в котором панель живёт. */

.drep-head {
  position: relative;
  padding: 16px 16px 14px 20px;
  border-radius: var(--drep-r) var(--drep-r) 0 0;
  background: var(--drep-tint, transparent);
}

.drep-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: var(--drep-r) 0 0 0;
  background: var(--drep-accent, var(--drep-line));
}

.drep--ok { --drep-accent: var(--drep-ok); --drep-tint: color-mix(in srgb, var(--drep-ok) 7%, transparent); }
.drep--bad { --drep-accent: var(--drep-bad); --drep-tint: color-mix(in srgb, var(--drep-bad) 8%, transparent); }
.drep--warn { --drep-accent: var(--drep-warn); --drep-tint: color-mix(in srgb, var(--drep-warn) 8%, transparent); }

@supports not (color: color-mix(in srgb, white 50%, black)) {
  .drep--ok, .drep--bad, .drep--warn { --drep-tint: transparent; }
}

/* Статус — ПИЛЮЛЯ, а не строчка капсом: у неё своя форма, и она отделяет
   «состояние» от «объяснения» без дополнительных отступов. */
.drep-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font: 600 9px var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--drep-dim);
  background: var(--drep-inset);
  box-shadow: inset 0 0 0 1px var(--drep-line);
}

.drep-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.drep--ok .drep-state { color: var(--drep-ok); }
.drep--bad .drep-state { color: var(--drep-bad-fg); }
.drep--warn .drep-state { color: var(--drep-warn-fg); }

.drep-title {
  margin-top: 9px;
  font: 600 17px/1.25 var(--font-heading);
  letter-spacing: -.01em;
}

.drep-meta {
  margin-top: 6px;
  font: 400 11px var(--font-ui);
  color: var(--drep-mut);
}

/* ---------- секции ---------- */

.drep-sec {
  padding: 14px 16px;
  box-shadow: inset 0 1px 0 var(--drep-line);
}

/* Заголовок секции и короткий итог справа. Итог — всегда СЛОВАМИ: цвет здесь
   не единственный носитель смысла и никогда им не станет. */
.drep-cap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 600 9.5px var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--drep-dim);
}

.drep-cap__note {
  margin-left: auto;
  font: 500 11px var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
  color: var(--drep-mut);
  text-align: right;
}

.drep-cap__note--warn { color: var(--drep-warn-fg); }
.drep-sec--bad .drep-cap__note { color: var(--drep-bad-fg); }
.drep-sec--ok .drep-cap__note { color: var(--drep-ok); }

/* ---------- замечания и обоснование ---------- */

.drep-notes {
  margin: 8px 0 0;
  list-style: none;
  padding-left: 0;
  font: 400 12px/1.5 var(--font-ui);
}

.drep-notes li {
  margin-top: 3px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.drep-reason {
  margin: 8px 0 0;
  font: 400 12px/1.5 var(--font-ui);
  color: var(--drep-mut);
}

/* ---------- поля чека ---------- */

.drep-facts { margin-top: 10px; }

.drep-kv {
  display: grid;
  grid-template-columns: minmax(96px, 40%) 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 3px 0;
  font: 400 12px var(--font-ui);
}

.drep-kv span { color: var(--drep-mut); }
.drep-kv b { font-weight: 500; text-align: right; }
/* Значение со значком банка: своя обёртка вместо <b>, прижата вправо. */
.drep-kv__v { display: flex; justify-content: flex-end; min-width: 0; font-weight: 500; }
.drep-kv--wide b { text-align: right; font: 400 11px/1.5 var(--font-ui); }

/* ---------- значок банка ----------
   Плашка светлая в ОБЕИХ темах — так решено для всего портала: у половины
   логотипов прозрачный фон с тёмной графикой, у другой впечатан белый квадрат,
   и светлая подложка уравнивает и тех, и других. Токены общие (--bank-*). */

.drep-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.drep-bank {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 4px;
  object-fit: contain;
  background: var(--bank-plate);
  box-shadow: inset 0 0 0 1px var(--bank-plate-edge);
}

.drep-bank--mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 9px var(--font-ui);
  color: var(--bank-ink);
}

.drep-bank--none {
  background: none;
  box-shadow: none;
  border: 1px dashed var(--drep-line);
}

/* ---------- сумма и реквизит чека ---------- */

.drep-money {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--drep-inset);
  box-shadow: inset 0 0 0 1px var(--drep-line);
}

.drep-money span { font: 600 19px/1 var(--font-heading); letter-spacing: -.02em; }
.drep-money i { font-style: normal; font-size: 12.5px; color: var(--drep-mut); }

/* ---------- сравнение: карточка, а не строки ----------
   Раньше это были голые строки на общем фоне, и глазу не за что было
   зацепиться. Теперь у сравнения своя коробка: видно, где оно начинается и
   кончается, а подписи столбцов держатся у своего содержимого. */
.drep-cmp {
  margin-top: 12px;
  padding: 4px 12px 8px;
  border-radius: 10px;
  background: var(--drep-inset);
  box-shadow: inset 0 0 0 1px var(--drep-line);
}

/* ---------- сверка: сравнение двух сторон ----------
   Ждём слева, в чеке справа, метка исхода у самой строки. Так глаз идёт по
   одной оси и сравнивает пары, а не ищет, что с чем сопоставлено. */

.drep-cmp__head,
.drep-cmp__row {
  display: grid;
  grid-template-columns: 16px minmax(58px, auto) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.drep-cmp__head {
  padding-top: 8px;
  font: 600 9px var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--drep-dim);
  padding-bottom: 6px;
  box-shadow: inset 0 -1px 0 var(--drep-line);
}

.drep-cmp__row {
  padding: 9px 0;
  font: 400 12px var(--font-ui);
  box-shadow: inset 0 -1px 0 var(--drep-line);
}

.drep-cmp__row:last-child { box-shadow: none; }

/* Метка исхода — знаком И цветом: один цвет боковым зрением не читается, а
   рядом стоят обе стороны словами. */
.drep-cmp__mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 9px var(--font-ui);
  color: var(--drep-dim);
  box-shadow: inset 0 0 0 1px var(--drep-line);
}

.drep-cmp__row--ok .drep-cmp__mark {
  color: var(--drep-ok);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--drep-ok) 45%, transparent);
}

.drep-cmp__row--bad .drep-cmp__mark {
  color: var(--drep-bad-fg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--drep-bad) 45%, transparent);
}

.drep-cmp__label { color: var(--drep-mut); }
.drep-cmp__val { min-width: 0; font-weight: 500; }
.drep-cmp__val--theirs { color: var(--drep-fg); }
.drep-cmp__row--bad .drep-cmp__val--theirs { color: var(--drep-bad-fg); }
.drep-cmp__row--unknown .drep-cmp__val { color: var(--drep-mut); }

@supports not (color: color-mix(in srgb, white 50%, black)) {
  .drep-cmp__row--ok .drep-cmp__mark { box-shadow: inset 0 0 0 1px var(--drep-ok); }
  .drep-cmp__row--bad .drep-cmp__mark { box-shadow: inset 0 0 0 1px var(--drep-bad); }
}

/* ---------- замечания источника ---------- */

.drep-notes__mark {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--drep-warn);
  transform: translateY(-2px);
}

.drep-untrusted {
  margin: 10px 0 0;
  font: 500 11.5px/1.45 var(--font-ui);
  color: var(--drep-warn-fg);
}

/* ---------- дословный отчёт: ОСНОВНОЙ блок ----------
   Наш разбор берёт лишь то, на что заведены поля, а решает человек — и решает
   по дословному тексту. Прятать его под раскрытие значило прятать главное. */

.drep-sec--raw .drep-pre {
  margin-top: 10px;
  max-height: 340px;
  font-size: 11.5px;
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--drep-line);
}

/* ---------- раскрытия ---------- */

.drep-fold {
  padding: 11px 16px;
  box-shadow: inset 0 1px 0 var(--drep-line);
  font: 400 11.5px var(--font-ui);
}

.drep-fold > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--drep-mut);
  list-style: none;
  user-select: none;
  font-weight: 500;
  transition: color var(--transition);
}

.drep-fold > summary:hover { color: var(--drep-fg); }

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

/* Своя стрелка: маркер браузера в разных движках выглядит по-разному, а
   поворот у нас общий с окном ручной проверки. */
.drep-fold > summary::before {
  content: "›";
  display: inline-block;
  width: 10px;
  color: var(--drep-dim);
  transition: transform var(--transition);
}

.drep-fold[open] > summary::before { transform: rotate(90deg); }

.drep-fold > summary i {
  margin-left: auto;
  font-style: normal;
  font: 600 9px var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--drep-dim);
}

/* Сырьё — единственное место, где моноширинный уместен: это не текст, а дамп. */
.drep-pre {
  margin: 8px 0 0;
  max-height: 42vh;
  overscroll-behavior: contain;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font: 400 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--drep-fg);
  background: var(--drep-inset);
  border-radius: 8px;
  padding: 10px;
}

/* ---------- сноска, отказ, кнопка ---------- */

.drep-note {
  margin: 0;
  padding: 11px 16px;
  font: 400 11px/1.45 var(--font-ui);
  color: var(--drep-dim);
  box-shadow: inset 0 1px 0 var(--drep-line);
}

.drep-fail {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--drep-r);
  border-left: 3px solid var(--drep-line);
  background: var(--drep-inset);
  font: 400 12px/1.45 var(--font-ui);
}

.drep-fail b { font-weight: 600; }
.drep-fail--bad { border-left-color: var(--drep-bad); }
.drep-fail--warn { border-left-color: var(--drep-warn); }
.drep-fail .drep-note { padding: 6px 0 0; box-shadow: none; }

.drep-act {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  margin-left: 16px;
  margin-right: 16px;
  margin-bottom: 12px;
}

.drep-btn {
  height: 30px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--drep-line);
  background: var(--drep-inset);
  color: var(--drep-fg);
  font: 500 12px var(--font-ui);
  cursor: pointer;
  transition: background var(--transition);
}

.drep-btn:hover:not(:disabled) { background: var(--drep-line); }
.drep-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--input-focus); }

/* Занятая кнопка обязана ВЫГЛЯДЕТЬ занятой. Класс без правила — это отсутствие
   отклика: окно создания реквизита так молчало в ответ на клик, и человек
   нажимал второй раз. Здесь второй раз стоит денег. */
.drep-btn:disabled {
  opacity: .6;
  cursor: default;
}

/* ---------- узкая панель ----------
 *
 * Что было нечитаемо на телефоне: весь текст 11–11.5 px без разделения на поля,
 * строка сверки рвалась посреди номера, а пары «подпись — значение» жались в
 * две колонки по 40 % и переносились как попало.
 *
 * Поэтому на узком кегль ПОДНИМАЕТСЯ, а не опускается: мелкий шрифт здесь не
 * «плотно», а нечитаемо. Пары встают вертикально — приём тот же, что у окна
 * ручной проверки. */

@container drep (max-width: 420px) {
  .drep-head { padding: 12px 12px 10px; }
  .drep-sec,
  .drep-fold,
  .drep-note { padding-left: 12px; padding-right: 12px; }

  .drep-title { font-size: 16px; }
  .drep-meta { font-size: 11.5px; }

  /* Подпись сверху капсом, значение под ней и крупнее. */
  .drep-kv {
    grid-template-columns: 1fr;
    gap: 1px;
    padding: 6px 0;
  }
  .drep-kv span {
    font: 600 9.5px var(--font-ui);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--drep-dim);
  }
  .drep-kv b,
  .drep-kv--wide b { font-size: 13px; text-align: left; }

  .drep-notes,
  .drep-reason { font-size: 12.5px; }

  .drep-cap { flex-wrap: wrap; }
  .drep-cap__note { margin-left: 0; width: 100%; text-align: left; }

  /* Сравнение в столбик: подпись, потом «ждём» и «в чеке» друг под другом.
     В четыре колонки на 390 px номер рвётся посередине, а сверяют его
     посимвольно. */
  .drep-cmp__head { display: none; }

  .drep-cmp__row {
    grid-template-columns: 16px 1fr;
    grid-template-areas: "mark label" ". ours" ". theirs";
    gap: 2px 10px;
    padding: 9px 0;
  }

  .drep-cmp__mark { grid-area: mark; align-self: start; }
  .drep-cmp__label { grid-area: label; font-weight: 500; color: var(--drep-fg); }
  .drep-cmp__val { grid-area: ours; font-size: 13px; }
  .drep-cmp__val--theirs { grid-area: theirs; }

  /* Без подписей столбцов пары надо назвать: иначе непонятно, где чьё. */
  .drep-cmp__val::before {
    content: "ждём ";
    color: var(--drep-dim);
    font-weight: 400;
  }
  .drep-cmp__val--theirs::before { content: "в чеке "; }

  .drep-money span { font-size: 19px; }

  /* Кнопка во всю ширину — тач-цель, а не мишень в углу. Высоту ей поднимает
     мобильный слой (`min-height: 40px` всем button), и это здесь уместно:
     отбивать надо тонкие элементы, а у этой кнопки крупная цель по смыслу. */
  .drep-act { margin-top: 12px; }
  .drep-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .drep-fold > summary::before,
  .drep-btn { transition: none; }
}

/* Обоснование источника — со своей подписью и врезкой.
   Это ЕГО объяснение вердикта, а не наш пересказ: у бота подпись тоже стоит, и
   без неё абзац читается как чей угодно. */
.drep-reasonBox {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--drep-inset);
  border-left: 2px solid var(--drep-line);
}

.drep-reasonCap {
  display: block;
  font: 600 9px var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--drep-dim);
}

.drep-reasonBox .drep-reason { margin-top: 4px; color: var(--drep-fg); }

/* Отказ и кнопка живут ВНУТРИ блока — фон у них общий с разбором. */
.drep-fail { margin-left: 16px; margin-right: 16px; }