/* Comments under a post. Built from the tokens and components in css/base.css. */

.comments { border-top: 1px solid var(--line); padding-top: 16px; }
.comments h1 { font-size: 1.2rem; }
.comments__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.comments__head h2 { font-size: 1rem; margin: 0; }
.comments__head form { margin: 0; }
.comments__list { margin-bottom: 12px; }
.comments__body { white-space: normal; overflow-wrap: anywhere; }
.comments__form { display: grid; gap: 8px; margin-top: 8px; }
.comments__form .field { margin: 0; }
.comments__form textarea { min-height: 0; }
.comments__send { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.comments__send .subtle { margin-right: auto; }
/* Honeypot field for bots; people never see it. */
.comments__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Replies sit indented under their comment, one level deep. */
.comments__list > li.comment:has(+ .comments__thread) { border-bottom: 0; padding-bottom: 4px; }
.comments__list > li.comments__thread { padding: 0 0 12px 44px; }
.comments__replies > li { padding: 8px 0; border-bottom: 0; }
.comments__replies > li:last-child { padding-bottom: 0; }
.comments__replies .comment__like { margin-top: -6px; }

/* Heart on the right of each comment. */
.comment__like { width: 32px; height: 32px; color: var(--ink-3); flex: none; }
.comment__like.is-on { color: var(--danger); }
.comment__like.is-on .icon { fill: currentColor; }
.comment__like[data-busy] { opacity: .6; }

/* The reply form opens under the comment: with a script on click, without one via #reply-<id>. */
.comments__reply { display: none; }
.comments__reply:target, .comments__reply.is-open { display: block; }
.comments__reply .comments__form { margin-top: 6px; }
@media (max-width: 480px) {
  .comments__list > li.comments__thread { padding-left: 24px; }
}