/* The conversation keeps the site's single-column notebook layout. */
#comments-title { overflow-wrap: anywhere; }
#comments-post-link { color: var(--cell); text-underline-offset: .2em; }
#comments-list, #moderation-list { list-style: none; padding: 0; margin: 1.5rem 0 2.5rem; }
.comment-card { border-top: 1px solid var(--hair); padding: 1.2rem 0; }
.comment-card h2 { font-size: 1.125rem; margin: 0 0 .35rem; }
.comment-meta { color: var(--ink-2); font-size: .875rem; margin: 0 0 .6rem; overflow-wrap: anywhere; }
.comment-meta strong { color: var(--ink); }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: .6rem 0; }
.comment-note { color: var(--ink-2); font-size: .9375rem; }
#comments-status, #moderation-status { padding: .75rem 1rem; border-left: 3px solid var(--cell); background: var(--code-bg); font-size: 1rem; overflow-wrap: anywhere; }
#comments-status:empty, #moderation-status:empty { display: none; }
#comments-status.is-error, #moderation-status.is-error { border-color: var(--mark); }
#comment-form, #moderation-login { border-top: 1px solid var(--hair); padding-top: 1.25rem; margin: 1.5rem 0; }
#comment-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#comment-form legend { font-size: 1.25rem; font-weight: 700; padding: 0; margin-bottom: .75rem; }
#comment-form label, #moderation-login label { display: block; font-size: 1rem; font-weight: 700; margin: 1rem 0 .35rem; }
#comment-form input, #comment-form select, #comment-form textarea, #moderation-login input, #moderation-filter { width: 100%; min-height: 44px; border: 1px solid var(--ink-2); border-radius: 3px; color: var(--ink); background: var(--paper); font: inherit; font-size: 1rem; padding: .55rem .7rem; }
#comment-form textarea { min-height: 10rem; resize: vertical; }
#comment-form :disabled { opacity: .65; }
#comment-form button, #moderation-login button, #moderation-refresh, #moderation-lock, .comment-actions button { min-height: 44px; cursor: pointer; border: 1px solid var(--cell); border-radius: 3px; background: var(--paper); color: var(--cell); font: inherit; font-size: 1rem; font-weight: 700; padding: .5rem .85rem; }
#comment-form button, #moderation-login button { margin-top: 1rem; }
#comment-form button:hover, #moderation-login button:hover, #moderation-refresh:hover, #moderation-lock:hover, .comment-actions button:hover { background: var(--code-bg); }
#comment-form button:disabled, #moderation-login button:disabled, #moderation-refresh:disabled, #moderation-lock:disabled, .comment-actions button:disabled { cursor: default; opacity: .55; }
.comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: 1rem; }
#moderation-filter { width: auto; max-width: 100%; }
.comment-load-more { min-height: 44px; cursor: pointer; border: 1px solid var(--cell); border-radius: 3px; background: var(--paper); color: var(--cell); font: inherit; font-size: 1rem; font-weight: 700; padding: .5rem .85rem; margin-bottom: 1rem; }
.comment-load-more:hover { background: var(--code-bg); }
.comment-load-more:disabled { cursor: default; opacity: .55; }
.comment-actions button.comment-delete { color: var(--mark); border-color: var(--mark); }
@media (max-width: 480px) { .comment-actions > button { flex: 1 1 auto; } }