.comments-area {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border-soft);
  font-family: var(--font-ui);
}

.comments-title,
.comment-reply-title {
  margin: 0 0 var(--space-lg);
  font-size: clamp(1.35rem, 1.35vw, 1.72rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list .children {
  list-style: none;
  margin: var(--space-md) 0 0 var(--space-lg);
  padding: 0 0 0 var(--space-lg);
  border-left: 1px solid var(--color-border-soft);
}

.comment-list .comment {
  margin-bottom: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 22px rgba(66, 48, 31, 0.07);
}

[data-theme="dark"] .comment-list .comment {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.comment-body > *:last-child {
  margin-bottom: 0;
}

.comment-content {
  color: var(--color-text-soft);
  line-height: 1.7;
}

.comment-content p {
  margin: 0 0 1em;
}

.comment-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.comment-author {
  color: var(--color-text);
  font-weight: 800;
}

.comment-author .avatar {
  float: left;
  margin: 0 var(--space-sm) var(--space-xs) 0;
  border-radius: 999px;
}

.comment-metadata a,
.reply a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.comment-metadata a:hover,
.reply a:hover {
  color: var(--color-link-hover);
}

.comment-navigation {
  margin: var(--space-xl) 0;
}

.no-comments {
  color: var(--color-text-muted);
}

.comment-respond {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.comment-notes,
.logged-in-as {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.comment-form label {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-text-soft);
  font-size: 0.86rem;
  font-weight: 700;
}

.comment-form-cookies-consent {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.comment-form-cookies-consent input {
  width: auto;
  margin-top: 0.35em;
}

.comment-form-cookies-consent label {
  margin: 0;
  font-weight: 500;
}

@media (max-width: 640px) {
  .comments-area {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
  }

  .comment-list .children {
    margin-left: 0;
    padding-left: var(--space-md);
  }

  .comment-list .comment,
  .comment-respond {
    padding: var(--space-lg);
  }
}

/* v0.2.6 */
.comments-area { width: min(calc(100% - 2rem), var(--width-reading)); margin-left: auto; margin-right: auto; }


/* v0.2.9: keep comments on the same single-post canvas */
.comments-area {
  width: min(calc(100% - 2rem), var(--width-single));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.comment-respond,
.comment-list .comment-body,
.comment-list .pingback,
.comment-list .trackback {
  max-width: none;
}

@media (max-width: 640px) {
  .comments-area {
    width: min(calc(100% - 1.25rem), var(--width-single));
  }
}


/* v0.8.1: comment submit hover polish */
.comment-form .submit,
.comment-respond input[type="submit"] {
  color: #fff;
}

.comment-form .submit:hover,
.comment-respond input[type="submit"]:hover {
  color: color-mix(in srgb, #fff 88%, var(--color-surface) 12%);
}

[data-theme="dark"] .comment-form .submit,
[data-theme="dark"] .comment-respond input[type="submit"] {
  color: #1b120b;
}

[data-theme="dark"] .comment-form .submit:hover,
[data-theme="dark"] .comment-respond input[type="submit"]:hover {
  color: #130d08;
}


/* v0.9.2: reply title cancel spacing */
.comment-reply-title small {
  margin-left: 0.45rem;
}

.comment-reply-title #cancel-comment-reply-link::before {
  content: " ";
}


/* v0.17.0: comments section polish */
.comments-area {
  margin-top: var(--space-2xl);
}

.comments-title,
.comment-reply-title {
  margin-bottom: var(--space-lg);
  font-family: var(--font-ui);
  font-size: clamp(1.35rem, 1vw + 1.1rem, 1.85rem);
  line-height: 1.18;
  letter-spacing: -0.04em;
}

.comment-list,
.comment-list .children {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.comment-list {
  display: grid;
  gap: var(--space-lg);
}

.comment-list .children {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-left: clamp(1rem, 3vw, 2.1rem);
  border-left: 1px solid var(--color-border-soft);
}

.comment-body {
  position: relative;
  padding: clamp(1rem, 2.5vw, 1.35rem);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-shadow) 34%, transparent);
}

.comment-meta {
  display: grid;
  gap: 0.28rem;
  margin-bottom: var(--space-sm);
  font-family: var(--font-ui);
}

.comment-author {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  color: var(--color-text);
  font-weight: 850;
}

.comment-author .avatar {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px var(--color-border-soft);
}

.comment-author .says {
  display: none;
}

.comment-metadata,
.comment-awaiting-moderation {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.comment-metadata a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.comment-metadata a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.comment-content {
  color: var(--color-text-soft);
  line-height: 1.72;
}

.comment-content > *:first-child {
  margin-top: 0;
}

.comment-content > *:last-child {
  margin-bottom: 0;
}

.reply {
  margin-top: var(--space-sm);
}

.comment-reply-link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.38rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-border-soft));
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
  color: var(--color-link);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.comment-reply-link:hover {
  border-color: color-mix(in srgb, var(--color-accent) 48%, var(--color-border-soft));
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
  color: var(--color-link-hover);
}

.comment-respond {
  margin-top: var(--space-xl);
  padding: clamp(1rem, 2.8vw, 1.45rem);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--color-shadow) 30%, transparent);
}

.comment-list .comment-respond {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.comment-notes,
.logged-in-as,
.comment-form-cookies-consent {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.comment-form label {
  display: block;
  margin-bottom: 0.38rem;
  color: var(--color-text-soft);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 800;
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  width: 100%;
  border-radius: var(--radius-md);
}

.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url {
  margin-bottom: var(--space-md);
}

.comment-form-cookies-consent {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
}

.comment-form-cookies-consent input {
  margin-top: 0.25rem;
}

.comment-reply-title small {
  display: inline-flex;
  margin-left: 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0;
}

.comment-reply-title #cancel-comment-reply-link {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.comment-reply-title #cancel-comment-reply-link:hover {
  color: var(--color-link-hover);
}

.comment-navigation,
.comments-pagination {
  margin-top: var(--space-lg);
  font-family: var(--font-ui);
}

@media (max-width: 640px) {
  .comment-list .children {
    padding-left: 0.8rem;
  }

  .comment-body {
    padding: 0.95rem;
  }

  .comment-author .avatar {
    width: 2.2rem;
    height: 2.2rem;
  }

  .comment-reply-title small {
    display: block;
    margin-top: 0.35rem;
    margin-left: 0;
  }
}

/* v0.34.19: prevent hostile/accidental long strings from breaking comment layout */
.comment-list,
.comment-list .children,
.comment-list .comment,
.comment-body,
.comment-meta,
.comment-author,
.comment-metadata,
.comment-content {
  min-width: 0;
}

.comment-content,
.comment-content p,
.comment-content li,
.comment-content a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* v0.34.41/0.34.43: keep comment pagination compact and centered on narrow screens */
@media (max-width: 560px) {
  .comment-navigation .nav-links,
  .comments-pagination .nav-links {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.45rem;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding: 0 0 var(--space-xs);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .comment-navigation .nav-links::-webkit-scrollbar,
  .comments-pagination .nav-links::-webkit-scrollbar {
    display: none;
  }

  .comment-navigation .nav-links > *,
  .comments-pagination .page-numbers {
    flex: 0 0 auto;
  }
}


/* v0.34.42: avoid double-card nesting; the visible card belongs to .comment-body only */
.comment-list .comment {
  margin-bottom: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-theme="dark"] .comment-list .comment {
  box-shadow: none;
}

.comment-list .children {
  margin-top: var(--space-md);
}

/* v0.34.42: numbered comment pagination */
.comments-pagination {
  margin-top: var(--space-lg);
  font-family: var(--font-ui);
}

.comments-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.comments-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.35rem;
  min-height: 2.35rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-shadow) 18%, transparent);
}

.comments-pagination .page-numbers.current {
  border-color: color-mix(in srgb, var(--color-accent) 64%, var(--color-border-soft));
  background: var(--color-accent);
  color: #fff;
}

.comments-pagination a.page-numbers:hover,
.comments-pagination a.page-numbers:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 48%, var(--color-border-soft));
  color: var(--color-link-hover);
}

[data-theme="dark"] .comments-pagination .page-numbers.current {
  color: #1b120b;
}


/* v0.34.44: keep rich comment content from widening the reading canvas */
.comment-content img,
.comment-content video,
.comment-content iframe,
.comment-content embed,
.comment-content object {
  max-width: 100%;
  height: auto;
}

.comment-content pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comment-content code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.comment-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}