/* Comments & rating widget — article pages only. Reads the host page's own
   theme tokens (article.njk defines --bg/--fg/etc. on :root, light + dark),
   with fallbacks so the widget still renders sanely if ever included
   elsewhere. */
#comments-widget {
  --cw-border: var(--border, rgba(0, 0, 0, 0.08));
  --cw-border-strong: var(--border-strong, rgba(0, 0, 0, 0.16));
  --cw-fg: var(--fg, #111827);
  --cw-fg-muted: var(--fg-muted, #4b5563);
  --cw-fg-dim: var(--fg-dim, #9ca3af);
  --cw-surface: var(--surface, #f3f4f6);
  --cw-bg-elevated: var(--bg-elevated, #f9fafb);
  --cw-pop: var(--pop, #f59e0b);
  --cw-font-sans: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --cw-font-mono: var(--font-mono, ui-monospace, monospace);
  font-family: var(--cw-font-sans);
  padding: 48px var(--pad-x, 20px) 0;
  max-width: calc(var(--content-w, 720px) + var(--pad-x, 20px) * 2);
  margin: 0 auto;
  border-top: 1px solid var(--cw-border);
}

#comments-widget .cw-section {
  margin-bottom: 48px;
}

#comments-widget h2 {
  font-family: var(--cw-font-sans);
  font-weight: 700;
  font-size: 20px;
  color: var(--cw-fg);
  margin-bottom: 18px;
}

/* Upvote */
#comments-widget .cw-upvote-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--cw-border-strong);
  background: var(--cw-bg-elevated);
  color: var(--cw-fg-muted);
  font-family: var(--cw-font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.1s ease;
}

#comments-widget .cw-upvote-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

#comments-widget .cw-upvote-btn:hover {
  border-color: var(--cw-pop);
  color: var(--cw-pop);
}

#comments-widget .cw-upvote-btn:active {
  transform: scale(0.97);
}

#comments-widget .cw-upvote-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

#comments-widget .cw-upvote-btn.cw-upvote-active {
  border-color: var(--cw-pop);
  background: var(--cw-pop);
  color: #111827;
}

#comments-widget .cw-upvote-count {
  font-family: var(--cw-font-mono);
}

/* Comment form */
#comments-widget .cw-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

#comments-widget .cw-form input[type="text"],
#comments-widget .cw-form textarea {
  font-family: var(--cw-font-sans);
  font-size: 14px;
  color: var(--cw-fg);
  background: var(--cw-bg-elevated);
  border: 1px solid var(--cw-border);
  border-radius: 8px;
  padding: 10px 14px;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s ease;
}

#comments-widget .cw-form input[type="text"]:focus,
#comments-widget .cw-form textarea:focus {
  border-color: var(--cw-fg-dim);
}

#comments-widget .cw-form textarea {
  min-height: 90px;
}

#comments-widget .cw-website {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#comments-widget .cw-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#comments-widget .cw-submit {
  font-family: var(--cw-font-sans);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--cw-fg);
  background: var(--cw-fg);
  color: var(--cw-bg-elevated);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

#comments-widget .cw-submit:disabled {
  opacity: 0.5;
  cursor: default;
}

#comments-widget .cw-status {
  font-size: 12.5px;
  color: var(--cw-fg-dim);
}

#comments-widget .cw-status.cw-status-error {
  color: #dc2626;
}

/* Comment list */
#comments-widget .cw-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#comments-widget .cw-comment {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--cw-border);
}

#comments-widget .cw-comment:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

#comments-widget .cw-comment-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

#comments-widget .cw-comment-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--cw-fg);
}

#comments-widget .cw-comment-date {
  font-family: var(--cw-font-mono);
  font-size: 11px;
  color: var(--cw-fg-dim);
}

#comments-widget .cw-comment-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cw-fg-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

#comments-widget .cw-empty {
  font-size: 13.5px;
  color: var(--cw-fg-dim);
}