/* Blog comments (BlogPost component). Builds on blog.css and account.css. Tokens only. */
.srv-comments__count { color: var(--ink-muted); }
.srv-comments__notice { margin-top: var(--space-4); }
.srv-comments__list { margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.srv-comments__empty { margin-top: var(--space-4); color: var(--ink-muted); }
.srv-comments__empty[hidden] { display: none; }

.srv-comment { display: flex; gap: var(--space-4); padding-block: var(--space-4); border-top: 1px solid var(--line); }
.srv-comment:last-child { border-bottom: 1px solid var(--line); }
.srv-comment__avatar {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--btn-height);
  height: var(--btn-height);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--accent);
  font: 600 var(--text-label) var(--font-display);
}
.srv-comment__main { flex: 1; min-width: 0; }
.srv-comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.srv-comment__author { color: var(--ink); font: 600 var(--text-body) var(--font-display); }
.srv-comment__date { color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); }
.srv-comment__flag {
  padding: 0 var(--space-2);
  border: 1px dashed var(--warning);
  border-radius: var(--radius-pill);
  color: var(--warning);
  font: 600 var(--text-overline) var(--font-sans);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
}
.srv-comment.is-hidden .srv-comment__body { color: var(--ink-muted); }
.srv-comment__body {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--ink-soft);
  white-space: pre-wrap; /* keeps the commenter's newlines */
  overflow-wrap: anywhere;
}
.srv-comment__actions { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.srv-comment__actions .srv-textbtn:disabled { color: var(--ink-muted); cursor: default; }

/* Live arrival: transform and opacity only. */
.srv-comment { transition: opacity var(--dur-slow) var(--ease-reveal), transform var(--dur-slow) var(--ease-reveal); }
.srv-comment.is-entering { opacity: 0; transform: translateY(var(--space-4)); }
@media (prefers-reduced-motion: reduce) {
  .srv-comment { transition: none; }
  .srv-comment.is-entering { opacity: 1; transform: none; }
}

.srv-comments__gate {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink-soft);
}
.srv-comments__gate a { color: var(--accent); }
.srv-comments__form { margin-top: var(--space-8); }
.srv-comments__author { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-soft); }
.srv-comments__counter { margin-top: var(--space-1); color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); text-align: right; }

/* Report: a disclosure with an optional reason (works without JavaScript). */
.srv-report summary { list-style: none; }
.srv-report summary::-webkit-details-marker { display: none; }
.srv-report[open] summary { color: var(--accent); }
.srv-report__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); margin-block: var(--space-2) var(--space-3); }
.srv-report__form .srv-field__label { flex-basis: 100%; }
.srv-report__form .srv-field__input { flex: 1 1 calc(var(--space-32) * 2); width: auto; margin-top: 0; }
.srv-report__done { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--btn-height); color: var(--ink-muted); font: 500 var(--text-label) var(--font-sans); cursor: default; }
.srv-report__done:hover { color: var(--ink-muted); }
.srv-report__done svg { width: var(--space-4); height: var(--space-4); }
.srv-post__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.srv-post__admin-note { margin-top: var(--space-6); }