/**
 * Component — Comments
 * Comment list and reply form wrapper. Form fields themselves reuse
 * .rl-field/.rl-input/.rl-textarea from form.css.
 */

.rl-comments { padding-block: var(--rl-section-spacing-md); border-block-start: var(--rl-border-width) solid var(--rl-color-border); }

.rl-comments__title { font-family: var(--rl-font-display); font-size: var(--rl-text-2xl); font-weight: var(--rl-weight-regular); color: var(--rl-color-foreground); margin-block-end: var(--rl-space-6); }

.rl-comments__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rl-space-6); }

.rl-comments__list .children { list-style: none; margin-block-start: var(--rl-space-6); padding-inline-start: var(--rl-space-8); }

.comment-body { display: flex; flex-direction: column; gap: var(--rl-space-2); }

.comment-author { display: flex; align-items: center; gap: var(--rl-space-3); }

.comment-author .avatar { border-radius: var(--rl-radius-full); }

.comment-author .fn { font-weight: var(--rl-weight-semibold); color: var(--rl-color-foreground); font-style: normal; }

.comment-metadata { font-size: var(--rl-text-sm); color: var(--rl-color-foreground-muted); }

.comment-content { color: var(--rl-color-foreground); }

.rl-comments__closed { color: var(--rl-color-foreground-muted); }

.rl-comment-form { display: flex; flex-direction: column; gap: var(--rl-space-4); margin-block-start: var(--rl-space-8); }

.rl-comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: var(--rl-space-2); font-size: var(--rl-text-sm); }