/* The site's existing paper, ink and accent tokens carry every comment surface. */
.site-comments { color:var(--color-text); font-family:var(--font-sans); text-align:left; min-width:0; }
.site-comments *, .admin-comments * { box-sizing:border-box; }
.site-comments [hidden], .admin-comments [hidden] { display:none !important; }
.response-toolbar { display:flex; align-items:flex-start; flex-wrap:wrap; gap:.6rem 1rem; border-top:1px solid var(--color-border); padding-top:1rem; }
.page-reactions { flex:1 1 auto; min-width:0; }
.comment-controls { display:flex; align-items:center; min-width:0; }
.comment-total { font-size:.7rem; line-height:1.5; color:var(--color-text-secondary); font-variant-numeric:tabular-nums; text-align:center; }
.site-comments .comment-toggle { display:inline-flex; align-items:center; justify-content:space-between; gap:.65rem; border-color:transparent; padding:.55rem .75rem; min-height:44px; font-size:.75rem; white-space:nowrap; }
.comment-toggle-icon { font-size:1rem; color:var(--color-accent); }
.comment-toggle-short { display:none; }
@media (max-width:480px) {
  .response-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
  .response-toolbar .page-reactions, .response-toolbar .reaction-buttons { display:contents; }
  .response-toolbar .reaction-error { grid-column:1 / -1; }
  .response-toolbar .reaction-count { margin-left:auto; text-align:right; }
  .site-comments .comment-toggle { justify-content:center; gap:.4rem; padding-inline:.5rem; width:100%; }
  .comment-toggle-label { display:none; }
  .comment-toggle-short { display:inline; }
}
.reaction-label { display:block; color:var(--color-text-secondary); font-size:.8rem; margin-bottom:.8rem; }
.reaction-buttons { display:flex; flex-wrap:wrap; gap:.6rem; }
.site-comments .reaction-button { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .75rem; min-height:44px; border-radius:5px; font-size:.75rem; transition:background-color .15s, border-color .15s, color .15s; }
.reaction-button svg { width:18px; height:18px; flex-shrink:0; }
.reaction-count { font-family:var(--font-mono); font-variant-numeric:tabular-nums; min-width:1ch; color:var(--color-text-secondary); }
.site-comments .reaction-button[aria-pressed="true"] { color:var(--color-accent); border-color:var(--color-accent); background:color-mix(in srgb, var(--color-accent) 9%, var(--color-bg)); }
.reaction-button[aria-pressed="true"] .reaction-count { color:inherit; }
.reaction-status { margin:.6rem 0 0; }
.reaction-status:not(.reaction-error) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.site-comments .reaction-retry { padding:0 .3rem; min-height:44px; border:0; text-decoration:underline; font-size:inherit; }
@media (prefers-reduced-motion:reduce) { .site-comments .reaction-button { transition:none; } }
.comments-heading { margin:1.5rem 0 0; }
.comments-heading h2 { font-family:var(--font-heading); font-size:1rem; font-weight:500; margin:0; }
.comments-note, .comments-empty { color:var(--color-text-secondary); font-size:.8rem; line-height:1.7; }
.comments-empty { margin:1.25rem 0 2rem; }
.site-comment { padding:1.6rem 0; border-bottom:1px solid color-mix(in srgb, var(--color-border) 50%, transparent); }
.comment-byline { display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem 1rem; }
.comment-byline h3, .comment-byline h4 { margin:0; font-family:var(--font-sans); font-size:.875rem; font-weight:600; overflow-wrap:anywhere; }
.comment-byline time, .comment-author { font-size:.7rem; color:var(--color-text-secondary); }
.comment-byline time { margin-left:auto; }
.comment-author { color:var(--color-accent); }
.comment-body { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.9rem; line-height:1.85; margin:.6rem 0 0; }
.comment-reply { margin:1.25rem 0 0 .25rem; padding:.25rem 0 .25rem 1.15rem; border-left:2px solid var(--color-border); }
.comment-form { margin-top:1.25rem; position:relative; border-top:1px solid var(--color-border); padding-top:1rem; }
.comment-form h3 { font-family:var(--font-heading); font-weight:500; font-size:1.3rem; margin:0 0 .35rem; }
.comment-form > .comments-note { margin:0 0 .75rem; }
.comment-form label, .admin-comment label { display:block; width:fit-content; max-width:100%; font-size:.8rem; font-weight:500; margin:1rem 0 .4rem; }
.comment-form input, .comment-form textarea, .admin-comment textarea, .admin-comments select {
  display:block; width:100%; min-width:0; border:1px solid color-mix(in srgb, var(--color-text) 25%, var(--color-bg));
  border-radius:5px; background:color-mix(in srgb, var(--color-surface) 60%, var(--color-bg));
  color:var(--color-text); padding:.75rem .85rem; font:inherit; font-size:1rem; line-height:1.6;
}
.comment-form input[name="name"] { max-width:22rem; }
.comment-form textarea, .admin-comment textarea { resize:vertical; min-height:8rem; }
.site-comments :is(input, textarea, button):focus-visible, .admin-comments :is(textarea, button, select, a):focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }
.site-comments button, .admin-comments button { font:inherit; font-size:.8rem; padding:.65rem 1rem; min-height:42px; cursor:pointer; border:1px solid var(--color-border); border-radius:5px; color:var(--color-text); background:transparent; }
.site-comments button:hover, .admin-comments button:hover { background:color-mix(in srgb, var(--color-border) 15%, transparent); }
.site-comments button[type="submit"], .admin-comments .comment-primary { background:color-mix(in srgb, var(--color-accent) 10%, var(--color-bg)); border-color:var(--color-accent); }
.site-comments button:disabled, .admin-comments button:disabled { opacity:.5; cursor:default; }
.comment-form-footer, .comments-pagination, .admin-comment-actions, .admin-comments-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem 1rem; margin-top:1rem; }
.comment-form-footer .comments-note { margin-left:auto; font-size:.7rem; }
.comments-pagination { justify-content:space-between; font-size:.75rem; }
.comment-status { font-size:.85rem; line-height:1.6; margin:1rem 0 0; padding:.75rem 0; }
.comment-status[data-state="success"] { border-top:1px solid var(--color-border); }
.comment-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.admin-comments-toolbar { margin:0 0 1.5rem; }
.admin-comments-toolbar select { width:auto; }
.admin-comment { padding:1.5rem 0; border-top:1px solid var(--color-border); }
.admin-comment-page { display:block; color:var(--color-accent); font-size:.8rem; margin-bottom:.8rem; overflow-wrap:anywhere; }
.admin-comment-actions { margin-top:.8rem; }
.admin-comment textarea { font-size:.9rem; }
@media (max-width:420px) {
  .comment-form-footer { align-items:flex-start; flex-direction:column; }
  .comment-form-footer .comments-note { margin-left:0; }
}