/*
 * Комментарии с сайта: форма (новый комментарий и ответ), кнопки «Ответить» и «Пожаловаться» (с формой жалобы),
 * отметка «На проверке» у своего комментария до проверки редакцией. Дополнение к comments.css (тот — из шаблона wol-v5-6);
 * цвета и радиусы — переменные темы из global.css.
 */

main .feed .comment { scroll-margin-top: calc(var(--wl-header-offset, var(--t-header-height, 60px)) + 20px); }
main .feed .comment:target { box-shadow: 0 0 0 1px var(--maincolor); }
main .feed .comment[data-pending] { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.55); }

/* ───────────────────────────── форма ───────────────────────────── */

main .feed .cm-form { display: grid; gap: 10px; scroll-margin-top: calc(var(--wl-header-offset, var(--t-header-height, 60px)) + 20px); }
main .feed .cm-form textarea {
  min-height: 110px;
  line-height: 1.5;
  color: var(--color_lightgray);
  border: 1px solid transparent;
  transition: border-color var(--transform_0-2);
}
main .feed .cm-form textarea:focus { border-color: var(--color4); }
main .feed .cm-form textarea:focus-visible { outline: 2px solid var(--color4); outline-offset: 1px; }
main .feed .cm-form textarea[aria-invalid] { border-color: rgba(241, 26, 54, 0.6); }

/* гость: имя и почта ([not-logged] в addcomments.tpl); поле-приманка для ботов скрыто */
main .feed .cm-form__guest { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
main .feed .cm-form__guest input { color: var(--color_lightgray); border-radius: var(--borderradius); }
main .feed .cm-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

main .feed .cm-form__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  color: var(--color_gray);
  font-size: 12px;
}
main .feed .cm-form__count { margin-left: auto; font-variant-numeric: tabular-nums; }
main .feed .cm-form__count[data-over] { color: var(--maincolor); font-weight: bold; }
main .feed .cm-form__error { color: #fecaca; font-size: 13px; line-height: 1.45; }
main .feed .cm-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
main .feed .cm-form .com-submit:disabled { opacity: 0.6; cursor: default; }
main .feed .com-submit:focus-visible { outline: 2px solid var(--color_white); outline-offset: 2px; }
main .feed a.com-submit { display: inline-block; text-decoration: none; }

main .feed .cm-linkbtn {
  padding: 0;
  color: var(--color_gray);
  font-size: 13px;
  background: none;
  border: 0;
  cursor: pointer;
}
main .feed .cm-linkbtn:hover { color: var(--color_white); }

main .feed .cm-note { color: var(--color_gray); font-size: 13px; line-height: 1.45; }

/* Гость: приглашение войти вместо формы. */
main .feed .cm-guest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
main .feed .cm-guest p { color: var(--color_lightgray); font-size: 14px; }

/* Сообщение после отправки. */
main .feed .cm-flash {
  padding: 10px 14px;
  color: #bbf7d0;
  font-size: 14px;
  line-height: 1.45;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: var(--borderradius);
}
main .feed .cm-flash:focus { outline: 0; }

/* ───────────────────────────── ответы ───────────────────────────── */

main .feed .cm-reply {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: var(--color_gray);
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--transform_0-2);
}
main .feed .cm-reply:hover,
main .feed .cm-reply[aria-expanded='true'] { color: var(--maincolor); }
main .feed .cm-reply:focus-visible { outline: 2px solid var(--color4); outline-offset: 2px; border-radius: 4px; }

main .feed .cm-replyform {
  margin-top: 10px;
  padding: 15px;
  background: var(--color2);
  border: 1px solid var(--color3);
  border-radius: var(--borderradius);
}

main .feed .cm-badge {
  padding: 1px 8px;
  color: #fde68a;
  font-size: 11px;
  line-height: 1.6;
  white-space: nowrap;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.36);
  border-radius: 10px;
}

/* ───────────────────────────── жалобы ───────────────────────────── */

main .feed .cm-report {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: var(--color_gray);
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--transform_0-2);
}
main .feed .cm-report:hover,
main .feed .cm-report[aria-expanded='true'] { color: var(--maincolor); }
main .feed .cm-report:focus-visible { outline: 2px solid var(--color4); outline-offset: 2px; border-radius: 4px; }

/* «Пожаловаться на публикацию»: небольшая ссылка над формой комментария. */
main .feed .cm-report-wrap { display: grid; gap: 10px; justify-items: start; font-size: 13px; }
main .feed .cm-report-wrap .cm-reportform { justify-self: stretch; }

main .feed .cm-reportform {
  margin-top: 10px;
  padding: 15px;
  background: var(--color2);
  border: 1px solid var(--color3);
  border-radius: var(--borderradius);
}
main .feed .cm-reportform textarea,
main .feed .cm-reportform select,
main .feed .cm-reportform input[type='text'],
main .feed .cm-reportform input[type='email'] {
  width: 100%;
  min-height: 0;
  padding: 10px;
  color: var(--color_lightgray);
  font-size: 14px;
  background-color: var(--color3);
  border: 1px solid transparent;
  border-radius: var(--borderradius);
}
main .feed .cm-reportform select:focus,
main .feed .cm-reportform input:focus,
main .feed .cm-reportform textarea:focus { border-color: var(--color4); outline: 0; }
main .feed .cm-reportform__guest { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Приманка для ботов: за пределами экрана, для людей и скринридеров её нет. */
main .feed .cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

@media (max-width: 480px) {
  main .feed .cm-replyform,
  main .feed .cm-reportform { padding: 10px; }
  main .feed .cm-reportform__guest { grid-template-columns: 1fr; }
  main .feed .cm-form__meta span:first-child { display: none; }
}

/* «Закрепить», «Цитировать», «Редактировать», «Удалить» — текстом, как «Пожаловаться» (без иконок, comments.tpl). */
main .feed .cm-act {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: var(--color_gray);
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--transform_0-2);
}
main .feed .cm-act:hover,
main .feed .cm-act[aria-expanded='true'] { color: var(--maincolor); }
main .feed .cm-act:focus-visible { outline: 2px solid var(--color4); outline-offset: 2px; border-radius: 4px; }
main .feed .cm-act:disabled { opacity: 0.6; cursor: default; }

/* Закреплённый комментарий: булавка справа от даты ([best] в comments.tpl). */
main .feed .comment-header .cm-pin { display: inline-flex; color: var(--maincolor); transform: rotate(45deg); }
.cm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Цитата из «Цитировать»: подпись «Цитата: Имя» и абзацы внутри. */
main .feed .comment-body .quote { margin: 0 0 10px; }
main .feed .comment-body .quote .title_quote { margin-bottom: 5px; color: var(--color_lightgray); font-style: normal; font-weight: 600; font-size: 13px; }
main .feed .comment-body .quote p { margin: 0; }
main .feed .comment-body .quote p + p { margin-top: 8px; }