/* Shared comments widget styles (platform/comments). Single source for every style; the build emits
   this as /assets/comments.css and the page links it only when a comment widget is present. Uses the
   host page's CSS variables (--border/--bg/--accent) with safe fallbacks so it adapts per style. */
.hp-comments { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--border, #e2e2e2); }
.hp-comments .hpc-title { font-size: 1.05rem; margin: 0 0 .75rem; }
.hp-comments .hpc-empty { color: #888; font-size: .9rem; padding: .25rem 0 .75rem; }
.hp-comments .hpc-item { padding: .55rem 0; border-bottom: 1px solid var(--border, #ececec); }
.hp-comments .hpc-meta { display: flex; gap: .6rem; align-items: baseline; font-size: .8rem; margin-bottom: .15rem; }
.hp-comments .hpc-author { font-weight: 600; }
.hp-comments .hpc-time { color: #999; font-size: .72rem; }
.hp-comments .hpc-body { white-space: normal; line-height: 1.5; word-break: break-word; }
.hp-comments .hpc-form { margin-top: .9rem; }
.hp-comments .hpc-input { width: 100%; box-sizing: border-box; resize: vertical; padding: .5rem .6rem; font: inherit;
  border: 1px solid var(--border, #ccc); border-radius: 6px; background: var(--bg, #fff); color: inherit; }
.hp-comments .hpc-actions { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.hp-comments .hpc-msg { color: #c0392b; font-size: .8rem; flex: 1; }
.hp-comments .hpc-post { padding: .4rem .9rem; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--accent, #2d6cdf); color: #fff; font: inherit; }
.hp-comments .hpc-post[disabled] { opacity: .55; cursor: default; }
.hp-comments .hpc-signin { margin-top: .9rem; font-size: .9rem; }
.hp-comments .hpc-del { margin-left: auto; padding: 0 .4rem; border: 0; background: none; cursor: pointer;
  color: #c0392b; font-size: .72rem; line-height: 1; opacity: .75; }
.hp-comments .hpc-del:hover { opacity: 1; text-decoration: underline; }
.hp-comments .hpc-del[disabled] { opacity: .4; cursor: default; }
.gx-comments { max-width: 760px; margin-left: auto; margin-right: auto; }