/* Карточка сообщения обратной связи (`admin/feedback_detail.html`).

   Отдельным файлом по образцу `client-detail.css`/`shop-detail.css`: это
   экран, а не компонент, и его раскладка не переиспользуется. Всё, что
   переиспользуется (миниатюры скриншотов, звёзды оценки, просмотрщик), живёт
   в `admin.css` рядом со своими ячейками списка — иначе на карточке и в
   таблице одно и то же выглядело бы по-разному.

   Ритм экрана — один зазор `--sp-gutter`, задаёт его контейнер (см. канон в
   `project-memory/panel.md`): собственного вертикального `margin` прямые дети
   стека не носят. */

.fbcard { display: flex; flex-direction: column; gap: var(--sp-gutter); }

.fbcard__head { align-items: flex-start; }
.fbcard__ident { display: flex; align-items: flex-start; gap: var(--sp-row); min-width: 0; }
/* Аватар крупнее строчного (32px): в шапке экрана он опознаёт автора, а не
   помечает строку. Величина та же, что у плитки маркетплейса на карточке
   магазина, — две карточки-шапки стоят в панели рядом по смыслу. */
.fbcard__ava { width: var(--mp-tile); height: var(--mp-tile); flex: 0 0 var(--mp-tile);
  font-size: var(--fs-head); }
/* Номер записи — рядом с заголовком и тише его: по нему сообщение называют в
   переписке, но заголовком оно не является. */
.fbcard__id { margin-left: var(--sp-item); font-family: inherit;
  font-size: var(--fs-lead); color: var(--muted4); }
.fbcard__sub { display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-snug); margin-top: var(--sp-tight);
  font-size: var(--fs-body); color: var(--muted3); }
.fbcard__sub a { color: var(--muted2); }
.fbcard__sub a:hover { color: var(--link); }

/* Две колонки: письмо и всё служебное. Правая узкая и фиксированная — она
   отвечает на вопросы, которые задают после прочтения, и расти вместе с
   экраном ей незачем. На узком окне колонки складываются в одну. */
.fbcard__cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-gutter); align-items: start; }
.fbcard__main { display: flex; flex-direction: column; gap: var(--sp-gutter); min-width: 0; }
.fbcard__side { display: flex; flex-direction: column; gap: var(--sp-gutter);
  position: sticky; top: calc(var(--header-h) + var(--sp-gutter)); }
@media (max-width: 1100px) {
  .fbcard__cols { grid-template-columns: minmax(0, 1fr); }
  .fbcard__side { position: static; }
}

/* Само сообщение. Кегль на ступень крупнее строки таблицы и с воздухом между
   строк: это единственный текст в панели, который читают целиком, а не
   опознают. Абзацы клиента сохраняются (`pre-line`), длинные ссылки и
   идентификаторы переносятся (`anywhere`), а не растягивают карточку. */
.fbcard__text { margin: 0; max-width: 78ch; font-size: var(--fs-lead);
  line-height: 1.65; color: var(--text2); white-space: pre-line;
  overflow-wrap: anywhere; }

/* Галерея: миниатюры крупнее строчных — на карточке по ним уже разбирают
   жалобу, а не убеждаются, что скриншот есть. */
.fbcard__gallery { display: flex; flex-wrap: wrap; gap: var(--sp-row); }
.fbcard__shot { display: block; width: 148px; height: 148px; border-radius: var(--radius-control);
  border: 1px solid var(--border2); overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--tile), var(--tile) 4px,
    var(--tile2) 4px, var(--tile2) 8px);
  transition: border-color .14s ease, transform .14s ease; }
.fbcard__shot:hover { border-color: var(--brand); transform: translateY(-2px); }
.fbcard__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Прежние версии — история, а не работа: тише основного текста и с линией
   слева, как цитата. */
.fbcard__revisions { display: flex; flex-direction: column; gap: var(--sp-block); }
.fbcard__revision { border-left: 2px solid var(--border3); padding-left: var(--sp-row); }
.fbcard__revision-meta { font-size: var(--fs-hint); color: var(--muted4); }
.fbcard__revision-text { margin: var(--sp-tight) 0 0; font-size: var(--fs-body);
  line-height: 1.55; color: var(--muted3); white-space: pre-line;
  overflow-wrap: anywhere; }

/* Факты о записи: подпись слева, значение справа — их читают парами и
   сравнивают с тем, что говорит клиент. */
.fbcard__meta { display: flex; flex-direction: column; gap: var(--sp-row); margin: 0; }
.fbcard__meta > div { display: flex; align-items: baseline;
  justify-content: space-between; gap: var(--sp-row); }
.fbcard__meta dt { font-size: var(--fs-hint); color: var(--muted4); }
.fbcard__meta dd { margin: 0; font-size: var(--fs-body); color: var(--text2);
  text-align: right; font-variant-numeric: tabular-nums; }