/* Native guide discussion; scoped to the blog's existing palette and type. */
.trimix-blog-comments { max-width: 74ch; margin: 60px auto 0; padding-top: 34px; border-top: 1px solid var(--blog-line); font-size: 18px; line-height: 1.7; scroll-margin-top: 28px; }
.trimix-blog-comments h2 { margin: 0 0 12px; font-size: clamp(28px, 2.8vw, 35px); line-height: 1.2; letter-spacing: -.025em; }
.trimix-comments-intro > p { margin: 0 0 28px; color: var(--blog-muted); font-size: 16px; }
.trimix-blog-comments .comment-reply-title { margin: 32px 0 16px; font-size: 25px; line-height: 1.3; letter-spacing: -.02em; }
.trimix-blog-comments #cancel-comment-reply-link { display: inline-block; margin-left: 16px; font-size: 14px; font-weight: 400; color: var(--blog-teal); text-decoration: underline; }
.trimix-comment-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 24px; }
.trimix-comment-form > p { margin: 0; min-width: 0; }
.trimix-comment-form .trimix-comment-privacy,
.trimix-comment-form .comment-form-comment,
.trimix-comment-form .form-submit { grid-column: 1 / -1; }
.trimix-blog-comments .trimix-comment-privacy { margin: 0; color: var(--blog-muted); font-size: 14px; line-height: 1.65; }
.trimix-comment-form label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; line-height: 1.5; }
.trimix-comment-form label span { font-size: 12px; font-weight: 400; color: var(--blog-muted); }
.trimix-comment-form input[type="text"],
.trimix-comment-form input[type="email"],
.trimix-comment-form textarea { width: 100%; max-width: 100%; min-width: 0; border: 1px solid #b6c8d0; border-radius: 4px; background: #fff; color: var(--blog-ink); padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.5; box-sizing: border-box; }
.trimix-comment-form input[type="text"],
.trimix-comment-form input[type="email"] { min-height: 48px; }
.trimix-comment-form textarea { min-height: 170px; resize: vertical; }
.trimix-comment-form .trimix-blog-button { border: 0; cursor: pointer; width: auto; }
.trimix-blog-comments input:focus-visible,
.trimix-blog-comments textarea:focus-visible,
.trimix-blog-comments button:focus-visible { outline: 3px solid var(--blog-teal); outline-offset: 3px; }
.trimix-comment-received { margin: 0 0 26px; border-left: 3px solid var(--blog-teal); background: var(--blog-ice); padding: 17px 20px; font-size: 15px; }
.trimix-comment-list,
.trimix-comment-list .children { list-style: none; margin: 0; padding: 0; }
.trimix-comment-list .trimix-comment { border-bottom: 1px solid var(--blog-line); padding: 26px 0; overflow-wrap: anywhere; }
.trimix-comment-list .children { margin: 24px 0 0 24px; padding-left: 22px; border-left: 2px solid var(--blog-line); }
.trimix-comment-list .children .trimix-comment:last-child { border-bottom: 0; padding-bottom: 0; }
.trimix-comment-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-bottom: 10px; }
.trimix-comment-meta strong { font-size: 15px; }
.trimix-comment-meta a { color: var(--blog-muted); font-size: 12px; }
.trimix-comment-text { font-size: 16px; line-height: 1.75; }
.trimix-comment-text p { margin: 0 0 15px; }
.trimix-comment-text > :last-child { margin-bottom: 0; }
.trimix-comment-text a,
.trimix-comment-reply a { color: var(--blog-teal); text-decoration: underline; text-underline-offset: 3px; }
.trimix-comment-reply { margin-top: 12px; font-size: 14px; }
.trimix-comments-closed { color: var(--blog-muted); font-size: 14px; }
.trimix-blog-comments .comments-pagination { margin: 26px 0; }
.trimix-blog-comments .comments-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.trimix-blog-comments .comments-pagination .page-numbers { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 13px; border: 1px solid var(--blog-line); border-radius: 3px; font-size: 14px; }
.trimix-blog-comments .comments-pagination .current { background: var(--blog-navy); border-color: var(--blog-navy); color: #fff; }
@media (max-width: 600px) {
  .trimix-blog-comments { margin-top: 40px; padding-top: 28px; font-size: 16px; }
  .trimix-comments-intro > p { font-size: 14px; }
  .trimix-comment-form { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .trimix-comment-form .form-submit .trimix-blog-button { width: 100%; }
  .trimix-comment-list .children { margin-left: 8px; padding-left: 14px; }
  .trimix-blog-comments .comment-reply-title { font-size: 23px; }
}