/* A conversation on the article paper, followed by a distinct writing surface. */
.comments-area { margin: 24px 0 72px; min-width: 0; }
:is(.comments-area, .comment, .comment-body, .comment-respond) { scroll-margin-top: 120px; }
.comments-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 0 0 22px; border-bottom: 2px solid var(--line); }
.comments-heading-text { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; }
.comments-heading h2 { margin: 0; font-size: 28px; }
.comments-count { font-size: 14px; color: var(--muted); }
.comments-compose-link { font-size: 14px; padding-block: 6px; }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list li { min-width: 0; }
.comment-list > .comment { border-bottom: 1px solid var(--line); padding-block: 24px; }
.comment-body { min-width: 0; }
.comment-header { display: flex; align-items: flex-start; gap: 12px; }
.comment-avatar { position: relative; display: block; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--cream); border: 1px solid var(--line); }
.comment-avatar::before { content: ''; position: absolute; inset: 9px; border: 1px solid var(--control-line); border-radius: 50% 50% 40% 40%; }
.comment-avatar img { position: relative; display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.comment-identity { min-width: 0; flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
.comment-author { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 16px; line-height: 1.6; }
.comment-author .fn { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.comment-author .fn a { color: inherit; }
.comment-author-badge { color: var(--action); font-size: 12px; font-weight: 400; }
.comment-metadata { color: var(--muted); font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-metadata a:hover { text-decoration: underline; }
.comment-actions { display: flex; align-items: center; flex-wrap: wrap; flex: 0 0 auto; gap: 4px 14px; max-width: 40%; font-size: 13px; line-height: 1.6; }
.comment-actions a { display: inline-flex; align-items: center; min-height: 32px; text-underline-offset: 3px; }
.comment-parent-reference { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.comment-parent-reference::before { content: '↳'; margin-inline-end: 6px; color: var(--action); }
.comment-parent-reference a { color: inherit; }
.comment-content { margin-top: 8px; font-size: 16px; font-weight: 400; line-height: 1.8; overflow-wrap: anywhere; }
.comment-content > :first-child { margin-top: 0; }
.comment-content > :last-child { margin-bottom: 0; }
.comment-content p { margin: 0 0 .85em; }
.comment-content :is(ul, ol) { padding-inline-start: 1.4em; margin-block: .8em; }
.comment-content li { margin-block: .25em; }
.comment-content blockquote { margin: .8em 0; padding-inline-start: 16px; border-inline-start: 2px solid var(--line); }
.comment-content :is(pre, code) { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; }
.comment-content pre { max-width: 100%; overflow: auto; }
.comment-content a { text-underline-offset: 3px; }
/* One discussion rail; all deeper relations remain explicit through parent links. */
.comment-list .children { margin: 20px 0 0 16px; padding-inline-start: 20px; border-inline-start: 2px solid var(--line); }
.comment-list .children > .comment + .comment { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.comment-list .children .children { margin: 20px 0 0; padding: 0; border: 0; }
.comment-list .children .children > .comment:first-child { padding-top: 20px; border-top: 1px solid var(--line); }
.comment-awaiting-moderation { padding: 8px 12px; margin: 12px 0; border-inline-start: 2px solid var(--action); background: var(--cream); font-size: 14px; line-height: 1.7; }
.comments-pagination { margin: 24px 0 32px; }
.comments-pagination .nav-links { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.comments-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 40px; padding: 4px 10px; border: 1px solid transparent; border-radius: 6px; font-size: 14px; }
.comments-pagination .current { border-color: var(--line); color: var(--ink); background: var(--cream); }
.comments-empty, .comments-closed { padding: 24px 0; margin: 0; color: var(--muted); font-size: 15px; }
.comment-respond { margin-top: 32px; padding: 24px; border: 1px solid var(--line); border-top: 2px solid var(--action); border-radius: 4px 4px 12px 12px; background: var(--cream); min-width: 0; }
.comment-list .comment-respond { margin-bottom: 24px; }
.comment-reply-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin: 0 0 12px; font-size: 23px; overflow-wrap: anywhere; }
.comment-reply-title small { font: 14px/1.6 var(--font-body); }
.comment-reply-title small a { display: inline-block; padding-block: 6px; }
.comment-notes, .logged-in-as, .must-log-in { font-size: 13px; color: var(--muted); margin: 0 0 20px; }
.comment-form :is(.comment-form-author, .comment-form-email, .comment-form-url, .comment-form-comment) { margin: 0; gap: 8px; }
.comment-form label { font-size: 14px; line-height: 1.6; margin: 0; }
.comment-form input:not([type=checkbox]):not([type=submit]) { width: 100%; }
.comment-form textarea { min-height: 152px; }
.comment-field-help, .comment-submit-note { font-size: 13px; line-height: 1.7; color: var(--muted); }
.comment-form-identity { margin: 24px 0 0; padding: 0; border: 0; min-width: 0; }
.comment-form-identity legend { padding: 0; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.comment-identity-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
.comment-identity-fields > * { grid-column: 1 / -1; min-width: 0; }
.comment-identity-fields > :is(.comment-form-author, .comment-form-email) { grid-column: auto; }
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.comment-form-cookies-consent input { flex: 0 0 auto; margin: 5px 0 0; }
.comment-form-cookies-consent label { font-size: 13px; color: var(--muted); }
.comment-form .required { color: var(--error); }
.comment-form .form-submit { display: flex; align-items: center; gap: 16px 24px; margin: 24px 0 0; }
.comment-submit-note { flex: 1; }
.comment-form #submit { flex: 0 0 auto; max-width: 100%; white-space: normal; }
.comment-form .button:hover, .comment-form .button:active { transform: none; }
.comment-feedback { padding: 12px 16px; margin: 0 0 20px; border: 1px solid var(--line); border-inline-start: 3px solid var(--action); background: var(--surface); font-size: 14px; line-height: 1.7; }
.comment-feedback[data-state=error] { border-inline-start-color: var(--error); }
.comment-feedback-title { margin: 0; font-weight: 600; }
.comment-feedback-detail { white-space: pre-line; }
.comment-feedback-detail ul { padding-inline-start: 20px; margin: 8px 0 0; }
.comment-check-link { display: inline-block; margin-top: 8px; }
.comment-form .comment-field-error { font-size: 13px; line-height: 1.7; color: var(--error); }
@media (max-width: 600px) {
  .comments-area { margin-bottom: 48px; }
  .comments-heading { gap: 6px 16px; padding-bottom: 16px; }
  .comments-heading h2 { font-size: 25px; }
  .comment-header { flex-wrap: wrap; gap: 8px; }
  .comment-identity { display: block; }
  .comment-actions { max-width: 35%; gap: 4px 10px; }
  .comment-actions a { min-height: 36px; }
  .comment-metadata { margin-top: 2px; }
  .comment-list > .comment { padding-block: 20px; }
  .comment-list .children { margin-inline-start: 0; padding-inline-start: 12px; }
  .comment-list .children .children { padding-inline-start: 0; }
  .comment-respond { padding: 20px 16px; }
  .comment-identity-fields { grid-template-columns: minmax(0, 1fr); }
  .comment-form .form-submit { flex-direction: column; align-items: stretch; gap: 12px; }
  .comment-submit-note { text-align: center; }
}
.comment-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 24px; font-size: 13px; }
.comment-tools button { min-height: 40px; min-width: 40px; padding: 4px 8px; text-decoration: underline; }