/* Zaezzd — комментарии (рисует /assets/js/comments.js). */

.cmts__n { color: var(--ink-3); font-weight: 600; }
.cmts__empty { font-size: 14px; color: var(--ink-3); }

.cmts__form-slot { margin-bottom: 18px; }

.cmt__form { display: grid; gap: 8px; }
.cmt__ta { min-height: 74px; }
.cmt__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.cmt__rules { flex: 1 1 240px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.cmt__err {
  padding: 10px 12px; border-radius: var(--r-ctl);
  background: var(--warn-soft); border: 1px solid #EDD9A3;
  color: var(--warn-ink); font-size: 13.5px; line-height: 1.45;
}

.cmt__login {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-card);
  font-size: 14px; color: var(--ink-2);
}

.cmts__list { display: grid; gap: 14px; }

.cmt {
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card);
}
.cmt--child { border: 0; border-left: 2px solid var(--line); border-radius: 0; padding: 10px 0 2px 14px; }
.cmt__kids { margin-top: 12px; display: grid; gap: 6px; }

.cmt__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmt__ava {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ink); color: var(--yellow);
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.cmt__author { font-weight: 700; font-size: 14px; }
.cmt__date { font-size: 12.5px; color: var(--ink-4); }
.cmt__you { flex: 0 0 auto; }

.cmt__body {
  margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
}

.cmt__act { margin-top: 8px; display: flex; align-items: center; gap: 14px; }
.cmt__btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink-3);
}
.cmt__btn:hover { color: var(--ink); }
.cmt__like.is-on { color: var(--acc); }
.cmt__del:hover { color: var(--err); }

.cmt__reply { margin-top: 10px; }
.cmt__deleted { font-size: 13.5px; color: var(--ink-4); font-style: italic; }