/* ── Комментарии: ОДИН набор стилей на все поверхности ────────────────────────
   Разметку рисует web/comments.js, и поверхностей у неё три: модалка карточки
   «Сообщества» (.pm-comments), страница документации в кабинете (.doc-comments)
   и статические страницы «Технологий» в /app/tech (та же .doc-comments).
   Файл вынесен из styles.css именно поэтому: статике нужен блок комментариев, но
   не нужен весь кабинет (styles.css — 192 КБ и своя вёрстка body), а копия правил
   разошлась бы с оригиналом на первой же правке.

   ⚠️ Цвета и радиусы берутся ПЕРЕМЕННЫМИ ХОСТА (--ink, --blue, --line…): в кабинете
   их задаёт styles.css, в документации — её собственная палитра (scripts/docs_build.py,
   блок «Переменные для comments.css»). Прибей тут значение — и ветка будет выглядеть
   инородно на одной из двух поверхностей.
   ⚠️ Подключать ПОСЛЕ styles.css: .pm-modal ниже перебивает правило равной
   специфичности порядком, а не !important. */
.cmt-block { margin-top: 4px; }
.cmt-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.cmt-title { font-family: var(--brand); font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.cmt-count {
  font-size: 12px; font-weight: 700; color: var(--muted);
  padding: 1px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2);
}
.cmt-count:empty { display: none; }
.cmt-list { display: flex; flex-direction: column; gap: 14px; }
.cmt-item { display: flex; gap: 10px; }
.cmt-item .prop-avatar { margin-top: 2px; }
.cmt-main { flex: 1; min-width: 0; }
.cmt-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 12px; color: var(--muted); margin-bottom: 3px;
}
.cmt-author { font-weight: 700; color: var(--ink-2); }
.cmt-dot { opacity: .6; }
.cmt-time { font-variant-numeric: tabular-nums; }
.cmt-edited { font-style: italic; opacity: .8; }
/* Ответ команды — единственное визуальное отличие в ветке: человек должен видеть,
   что ему ответили мы, а не сосед по ленте. Признак ставит сервер (is_staff). */
.cmt-staff {
  padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  color: var(--blue-700); background: var(--blue-50); border: 1px solid var(--blue-100);
}
/* overflow-wrap: anywhere — сплошная строка без пробелов (токен, длинная ссылка)
   иначе распирает блок и даёт горизонтальную прокрутку всей модалке. */
.cmt-body {
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
  word-wrap: break-word; overflow-wrap: anywhere;
}
.cmt-link { color: var(--blue); text-decoration: none; border-bottom: 1px solid var(--blue-100); }
.cmt-link:hover { border-bottom-color: var(--blue); }
.cmt-item.is-staff .cmt-body { color: var(--ink); }
.cmt-acts { display: flex; align-items: center; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.cmt-act {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; background: none;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
  transition: color .15s, background .15s, border-color .15s;
}
.cmt-act:hover { color: var(--blue); background: var(--blue-50); }
.cmt-act svg { width: 13px; height: 13px; }
/* Удаление — клик-подтверждение прямо в кнопке (как .prop-del у карточек):
   системный confirm() поверх модалки выглядит как ошибка страницы. */
.cmt-del .cmt-del-b { display: none; }
.cmt-del:hover { color: var(--red); background: #fff2f1; }
.cmt-del.armed { color: #fff; background: var(--red); border-color: transparent; }
.cmt-del.armed .cmt-del-a { display: none; }
.cmt-del.armed .cmt-del-b { display: inline; }
/* Ответы — один уровень вложенности и всё. Линия слева вместо отступа-лесенки:
   на телефоне лесенка съедает ширину быстрее, чем добавляет ясности. */
.cmt-replies {
  margin: 12px 0 0 32px; padding-left: 14px; border-left: 2px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
}
.cmt-empty { font-size: 13.5px; color: var(--muted); padding: 4px 0 2px; }
.cmt-fail { font-size: 13px; color: var(--muted); }
.cmt-form { margin-top: 14px; }
.cmt-form textarea {
  width: 100%; resize: vertical; min-height: 62px; padding: 11px 13px;
  border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.9);
  font-family: inherit; font-size: 14.5px; line-height: 1.5; color: var(--ink);
}
.cmt-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
.cmt-form-foot { display: flex; align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.cmt-form-foot .btn { padding: 8px 16px; font-size: 14px; }
.cmt-form-foot .cmt-send { margin-left: auto; }
.cmt-anon { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.cmt-err { font-size: 12.5px; color: var(--red); min-width: 0; }
.cmt-form-reply { margin-top: 10px; }
.cmt-edit { margin-top: 10px; }
.cmt-edit textarea {
  width: 100%; resize: vertical; padding: 11px 13px; border-radius: 14px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.9);
  font-family: inherit; font-size: 14.5px; line-height: 1.5; color: var(--ink);
}
.cmt-edit textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
.cmt-edit .cmt-edit-save { margin-left: auto; }

/* Врезка в модалку карточки: отделяем чертой, как подвал автора. Пустой блок
   (поверхность выключена / карточка недоступна) не должен оставлять отступ. */
.pm-comments:not(:empty) { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
/* Врезка под статьёй документации: карточка-стекло, чтобы обсуждение читалось как
   отдельная секция, а не как продолжение текста инструкции. */
.doc-comments:not(:empty) {
  margin-top: 32px; padding: 20px; border-radius: var(--radius);
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
/* Счётчик комментариев в подвале карточки ленты */
.prop-cmt {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.prop-cmt[hidden] { display: none; }
.prop-cmt svg { width: 15px; height: 15px; }

@media (max-width: 560px) {
  /* 16px — порог, ниже которого iOS зумит страницу при фокусе в поле */
  .cmt-form textarea, .cmt-edit textarea { font-size: 16px; }
  .cmt-replies { margin-left: 14px; }
  .cmt-form-foot .cmt-send, .cmt-edit .cmt-edit-save { width: 100%; margin-left: 0; }
}
/* Карточка с обсуждением шире стандартной модалки: в 460px ветка с аватарами и
   ответами уже не читается (у «Сервер не работает» ветки нет — она осталась узкой). */
.pm-modal { width: min(560px, 96vw); }

/* ── Действия в ветке: жалоба, модерация, скрытая строка ─────────────────────
   Живут ЗДЕСЬ, а не рядом с экраном модерации: кнопки рисуются внутри самой
   ветки (comments.js), то есть нужны на каждой её поверхности — включая
   статические «Технологии», где экрана модерации нет вовсе.
   Кнопки-действия — те же .cmt-act, что «Ответить/Изменить», плюс модификаторы
   под клик-подтверждение (второй клик = подтверждение, без системного confirm). */
.cmt-report:hover { color: var(--amber); background: #fff6e8; }
.cmt-report .cmt-rep-b { display: none; }
.cmt-report.armed { color: #fff; background: var(--amber); }
.cmt-report.armed .cmt-rep-a { display: none; }
.cmt-report.armed .cmt-rep-b { display: inline; }
.cmt-reported { color: var(--muted); cursor: default; }
.cmt-mod { color: var(--blue-700); }
.cmt-mod:hover { background: var(--blue-50); }
/* Кнопка «Ограничить автора» (класс cmt-ban, НЕ cmt-block — тот у контейнера ветки,
   иначе :hover красил бы весь блок обсуждения). Клик-подтверждение как у удаления. */
.cmt-ban:hover { color: var(--red); background: #fff2f1; }
.cmt-ban .cmt-blk-b { display: none; }
.cmt-ban.armed { color: #fff; background: var(--red); }
.cmt-ban.armed .cmt-blk-a { display: none; }
.cmt-ban.armed .cmt-blk-b { display: inline; }
/* Скрытая строка в ветке админа — приглушена и с пунктирной рамкой: видно, что её
   не видит обычный человек. */
.cmt-item.is-hidden { opacity: .68; }
.cmt-item.is-hidden .cmt-body {
  border-left: 2px dashed var(--line-2); padding-left: 10px;
}
.cmt-hidden-mark {
  padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2);
}