.comment-item { margin: 1rem 0; padding: 1rem; border: 1px solid #dbe3ed; border-radius: .65rem; }
.comment-author { margin-bottom: .2rem; font-weight: 600; overflow-wrap: anywhere; }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: .8rem 0; }
.comment-replies { margin-top: 1.25rem; margin-left: 1.5rem; border-left: 3px solid #93b4e8; padding-left: 1.25rem; }
.comment-item--reply { position: relative; background: #f5f8fd; }
.comment-item--reply::before { content: ''; position: absolute; top: 1.25rem; left: calc(-1.25rem - 3px); width: 1.25rem; border-top: 3px solid #93b4e8; }
.comment-replies > .comment-item:first-child { margin-top: 0; }
.comment-replies > .comment-item:last-child { margin-bottom: 0; }
.comment-context { margin: 0 0 .65rem; color: #475569; font-size: .85rem; overflow-wrap: anywhere; }
.comment-context a { color: #244f91; text-decoration: underline; text-underline-offset: .15em; }
.comment-item { scroll-margin-top: 6rem; }
.comment-item:target { border-color: #416fba; box-shadow: 0 0 0 2px #dbeafe; }
.comment-replies .comment-replies { margin-left: .4rem; padding-left: .75rem; }
.comment-replies .comment-replies > .comment-item--reply::before { left: calc(-.75rem - 3px); width: .75rem; }
/* Keep long exchanges readable without consuming the mobile text column. */
.comment-replies .comment-replies .comment-replies { margin-left: 0; padding-left: 0; border-left: 0; }
.comment-replies .comment-replies .comment-replies > .comment-item--reply { padding-left: .5rem; padding-right: .5rem; }
.comment-replies .comment-replies .comment-replies > .comment-item--reply::before { display: none; }
.comments-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.bragamix-comments [data-comments-message] { margin-top: .8rem; }
@media (max-width: 576px) {
  .comment-item { padding: .7rem; }
  .comment-replies { margin-left: .4rem; padding-left: .75rem; }
  .comment-item--reply::before { left: calc(-.75rem - 3px); width: .75rem; }
}