/* Shared comments presentation. Inline and future drawer mode consume the same semantic tokens. */
.labs-comments { width: min(100%, var(--labs-content-width)); margin: 56px auto 0; padding-top: 24px; border-top: 1px solid var(--labs-border); }
.labs-comments-header h2 { margin: 0 0 18px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .09em; }
.labs-comment-thread { border-bottom: 1px solid var(--labs-border); }
.labs-comment-thread:last-child { border-bottom: 0; }
.labs-comment { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 11px; padding: 16px 0; }
.labs-comment-replies { margin-left: 30px; padding-left: 13px; border-left: 1px solid var(--labs-border); }
.labs-comment-replies .labs-comment { grid-template-columns: 27px minmax(0,1fr); padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--labs-border) 70%, transparent); }
.labs-comment-replies .labs-comment:first-child { border-top: 0; }
.labs-comment-avatar { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--labs-border); border-radius: 50%; background: var(--labs-surface-muted); color: var(--labs-muted); font-family: var(--labs-font-mono); font-size: 11px; font-weight: 650; }
.labs-comment-reply .labs-comment-avatar { width: 30px; height: 30px; font-size: 11px; }
.labs-comment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.labs-comment-meta strong { color: var(--labs-heading); font-size: 11px; font-weight: 600; }
.labs-comment-meta time { margin-left: auto; color: var(--labs-dim); font-family: var(--labs-font-mono); font-size: 11px; }
.labs-comment-badge { padding: 1px 5px; border: 1px solid color-mix(in srgb, var(--labs-accent) 40%, transparent); color: var(--labs-accent); border-radius: 2px; font-family: var(--labs-font-mono); font-size: 11px; font-weight: 650; text-transform: uppercase; }
.labs-comment-context { display: block; margin-top: 3px; color: var(--labs-dim); font-size: 11px; }
.labs-comment-text { margin-top: 7px; color: var(--labs-muted); font-size: 13px; line-height: 1.62; }
.labs-comment-text p { margin: 0 0 .7em; }
.labs-comment-reply-action { margin-top: 7px; }
.labs-comment-reply-action a { color: var(--labs-dim); font-family: var(--labs-font-mono); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.labs-comment-reply-action a:hover { color: var(--labs-accent); }
.labs-comments-compose { margin-top: 24px; padding: 20px 0 0; border-top: 1px solid var(--labs-border); }
.labs-comment-form-title { margin: 0 0 14px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.labs-comment-form p { margin: 0 0 13px; }
.labs-comment-form label { display: block; margin-bottom: 6px; color: var(--labs-muted); font-size: 11px; font-weight: 600; }
.labs-comment-form input[type="text"], .labs-comment-form input[type="email"], .labs-comment-form input[type="url"], .labs-comment-form textarea { width: 100%; padding: 10px; border: 1px solid var(--labs-input-border); border-radius: var(--labs-radius); background: var(--labs-input-bg); color: var(--labs-text); outline: none; }
.labs-comment-form input:focus, .labs-comment-form textarea:focus { border-color: var(--labs-focus); box-shadow: 0 0 0 1px var(--labs-focus); }
.labs-comments-empty { color: var(--labs-dim); }
@media (max-width: 640px) { .labs-comment-replies { margin-left: 18px; padding-left: 9px; } .labs-comment { grid-template-columns: 30px minmax(0,1fr); } }