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

/* Мера ширины — та же, что у ленты: строка длиной во весь монитор не читается,
 * а здесь читают внимательно, слово за словом. */
.trust { display: grid; gap: 0; }

/* ── Строка журнала ───────────────────────────────────────────────────────── */

/* Значок сверху, а не по центру: строка бывает в шесть строк текста, и
 * посередине такой строки значок висит в пустоте. */
.trust-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.trust-row:last-of-type { border-bottom: 0; }
.trust-row > .ic { flex: none; margin-top: 2px; color: var(--muted); }
.trust-row b { display: block; font-weight: 600; line-height: 1.35; }
.trust-row p { margin: 4px 0 0; line-height: 1.45; overflow-wrap: anywhere; }
.trust-row .small { color: var(--muted); font-size: var(--fs-sm); }
.trust-row .tiny { margin-top: 4px; overflow-wrap: anywhere; }

/* Метки состояния: чем кончилось, до каких пор, когда решили.
 *
 * Переносятся, а не жмутся: на 320 точках три метки в строку либо режутся,
 * либо выдавливают карточку вбок вместе со всей страницей. */
.trust-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 8px;
}
.trust-tags .chip {
  min-height: 26px; padding: 0 12px;
  font-size: var(--fs-xs);
  border-radius: var(--r-sm);
}

/* Состояние цветом — **и словом**. Цвет здесь только подсказка: дальтоник и
 * человек в солнечный день на телефоне читают слово, а не оттенок рамки. */
.chip.ok {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 45%, var(--line));
}
.chip.bad {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 45%, var(--line));
}

/* Поданное обжалование — вложенным блоком под решением, к которому относится.
 * Отдельной карточкой оно потеряло бы связь с решением, и человеку пришлось бы
 * сверять номера. */
.trust-appeal {
  margin-top: 8px;
  padding: 12px 12px;
  border-left: 2px solid var(--line-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface2);
}
.trust-appeal b { font-weight: 600; }
.trust-appeal p { margin: 4px 0 0; line-height: 1.45; }

/* Списки «уйдёт» и «останется». Обычный маркированный список, но с воздухом:
 * это то, что человек читает перед необратимым нажатием. */
.trust-list {
  margin: 0 0 12px;
  padding-left: 24px;
  color: var(--muted);
  line-height: 1.5;
}
.trust-list li { margin: 4px 0; }

/* ── Назначенный уход ─────────────────────────────────────────────────────── */

/* Карточка наверху экрана: рамкой, а не заливкой в тревожный цвет. Красная
 * плашка во весь экран у того, кто сам назначил уход и не передумал, — это
 * упрёк, а не сообщение. */
.trust-alarm {
  border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line));
}
.trust-alarm > .card-title { color: var(--warn); }

/* Полоса поверх любого раздела, пока идёт срок.
 *
 * Строкой, а не окном: новость важная, но продукт, из которого человек ещё не
 * ушёл, закрывать собой она права не имеет. */
.trust-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 8px 16px 0;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.trust-strip > .ic { flex: none; color: var(--warn); }
.trust-strip .grow { min-width: 0; }
/* Нажимаемая цель — не меньше пальца. Ссылка в 13 точек посреди строки
 * промахивается на телефоне через раз. */
.trust-strip .link-btn { flex: none; min-height: 44px; padding: 0 4px; }

/* ── Скелет загрузки ──────────────────────────────────────────────────────── */

/* Полоски на местах будущих строк вместо надписи «загружаю…»: страница не
 * прыгает, когда данные приезжают, и видно, сколько их примерно будет. */
.skel {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg,
    var(--surface2) 25%,
    color-mix(in srgb, var(--surface2) 60%, var(--line)) 37%,
    var(--surface2) 63%);
  background-size: 400% 100%;
  animation: trust-shimmer 1.4s ease-in-out infinite;
}
.skel-title { height: 14px; width: 40%; margin: 16px 0 12px; }
.skel-row { height: 46px; margin-bottom: 8px; }

@keyframes trust-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Мерцание — не для всех. Человеку, попросившему систему не двигать картинку,
 * ползущий градиент так же неприятен, как всплывающее окно. */
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
}

/* ── Телефон ──────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* Кнопка «Снять» и подобные ей уезжают под текст, а не жмут его в столбик
   * по два знака. */
  .trust .card-row { flex-wrap: wrap; }
  .trust .card-row .btn { min-height: 44px; }
  .trust-row { padding: 16px 0; }
  /* Полоса ухода прижимается к краям экрана, но не под вырез. */
  .trust-strip {
    margin: 8px calc(12px + env(safe-area-inset-right, 0px)) 0
                calc(12px + env(safe-area-inset-left, 0px));
  }
}

/* Приложение с домашнего экрана: у последней карточки должно оставаться место
 * под плавающей полкой навигации и полосой жеста «домой». `.social-page` уже
 * держит этот отступ на узких экранах — здесь он повторён для широкого окна,
 * открытого ярлыком в горизонтальной ориентации, где полка тоже плавает. */
@media (display-mode: standalone) {
  .trust { padding-bottom: env(safe-area-inset-bottom, 0px); }
}