#comment-form { display: grid; gap: .65rem; max-width: 44rem; margin: 1.5rem 0; }
#comment-form label { font-weight: 650; }
#comment-form input, #comment-form textarea { width: 100%; min-width: 0; padding: .7rem .85rem; border: 1px solid #8399b4; border-radius: 8px; font: inherit; color: var(--ink); background: white; }
#comment-form textarea { resize: vertical; }
#comment-form button { justify-self: start; cursor: pointer; }
#comment-form button:disabled { opacity: .65; cursor: wait; }
#comment-status { margin: 0; min-height: 1.65em; }
#comment-list { list-style: none; padding: 0; max-width: 44rem; }
#comment-list li { border-top: 1px solid var(--line); padding: 1rem 0; overflow-wrap: anywhere; }
#comment-list time { font-size: .9rem; color: var(--muted); }
#comment-list p { white-space: pre-wrap; margin: .35rem 0 0; }
.comments-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 4vw, 3rem); margin-top: 1.5rem; align-items: start; }
.comments-layout #comment-form { margin: 0; }
.comments-feed { max-height: 27rem; overflow-y: auto; padding: .35rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.comments-feed #comment-list { margin: 0; }
.comments-feed #comment-list li:first-child { border-top: 0; }
@media (max-width: 700px) {
  .comments-layout { grid-template-columns: minmax(0, 1fr); }
  .comments-feed { max-height: 18rem; }
}