/* Comments Section - No avatars, #294557 blue */
.comments-section {
  margin-top: 3rem;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.comments-section__header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.comments-section__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(240 10% 3.9%);
  margin: 0;
}

/* Murmur lifetime hint next to the section title — quiet,
   neutral so it reads as an aside rather than a warning. */
.comments-section__hint {
  font-size: 0.75rem;
  color: hsl(240 5.3% 45%);
  border: 1px solid hsl(240 5.9% 85%);
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  text-transform: lowercase;
}

/* Muted-state notice — when the author opts out of murmurs on a
   per-post basis, this replaces the form + thread. Same visual
   weight as a quiet info card so it reads as an explanation. */
.comments-muted-notice {
  margin: 0;
  padding: 1rem 1.25rem;
  background: hsl(0 0% 100%);
  border: 1px solid hsl(240 5.9% 92%);
  border-radius: 0.5rem;
  color: hsl(240 5.3% 45%);
  font-size: 0.875rem;
  text-align: center;
}

.comment-form-optional {
  color: hsl(240 5.3% 45%);
  font-weight: 400;
  font-size: 0.8125rem;
}

/* Lifetime label paired with the submit button — same role as the
   PWA's "Murmurs fade after 48h · ⌘↵ to send" footer copy. */
.comment-form-lifetime {
  flex: 1;
  align-self: center;
  font-size: 0.75rem;
  color: hsl(240 5.3% 45%);
}

/* Marked-passage citation block on a saved murmur. Same visual
   vocabulary as the PWA's blockquote chip — left-bordered, faded
   primary tint, italic body. Quote glyph anchors the start. */
.comment-quote {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.25rem 0 0.5rem 0;
  padding: 0.4rem 0.6rem;
  border-left: 2px solid hsl(221 83% 53%);
  background: hsl(221 83% 53% / 0.06);
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: hsl(240 5.3% 35%);
}
.comment-quote i {
  flex-shrink: 0;
  color: hsl(221 83% 45%);
  margin-top: 0.125rem;
}

/* Read-only "extra" reactions — PWA word reactions or legacy
   emojis that don't map to one of the SSR's 6 primary buttons.
   Same chip vocabulary as the active reaction buttons but
   non-interactive (no hover, no cursor). */
.comment-reaction-extra {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid hsl(240 5.9% 90%);
  background: hsl(0 0% 100%);
  font-size: 0.75rem;
  color: hsl(240 5.3% 35%);
}
.comment-reaction-extra-token {
  text-transform: lowercase;
}

/* Comment Form */
.comment-form {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: hsl(0 0% 100%);
  border: 1px solid hsl(240 5.9% 90%);
  border-radius: 0.5rem;
}

.comment-form--reply {
  margin-top: 1rem;
  padding: 1rem;
  background: hsl(240 4.8% 97%);
}

.comment-form-field {
  margin-bottom: 1rem;
}

.comment-form-field label {
  display: block;
  font-weight: 500;
  font-size: 0.875rem;
  color: hsl(240 10% 3.9%);
  margin-bottom: 0.375rem;
}

.comment-form-field input,
.comment-form-field textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid hsl(240 5.9% 85%);
  border-radius: 0.375rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: hsl(240 10% 3.9%);
  background: hsl(0 0% 100%);
  transition: border-color 0.15s;
}

.comment-form-field input:focus,
.comment-form-field textarea:focus {
  outline: 2px solid #294557;
  outline-offset: 2px;
  border-color: #294557;
}

.comment-form-checkbox {
  margin-bottom: 1rem;
}

.comment-form-checkbox label {
  display: flex;
  align-items: flex-start;  /* ← Aligns to top of container */
  gap: 0.5rem;
  line-height: 1.5;  /* ← Better text spacing */
}

.comment-form-checkbox input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  margin-top: 0.125rem;  /* ← Fine-tune alignment with text baseline */
  flex-shrink: 0;  /* ← Prevents checkbox from shrinking */
}

.comment-form-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

.comment-btn {
  padding: 0.625rem 1.25rem;
  border-radius: 0.375rem;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.comment-btn--primary {
  background: #294557;
  color: #fff;
  border-color: #294557;
}

.comment-btn--primary:hover {
  background: #1e3340;
}

.comment-btn--primary:focus {
  outline: 2px solid #294557;
  outline-offset: 2px;
}

.comment-btn--secondary {
  background: hsl(0 0% 100%);
  color: hsl(240 10% 3.9%);
  border-color: hsl(240 5.9% 85%);
}

.comment-btn--secondary:hover {
  background: hsl(240 4.8% 95%);
}

.comment-btn--secondary:focus {
  outline: 2px solid #294557;
  outline-offset: 2px;
}

/* Comment Thread - No avatars */
.comments-thread {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 2rem;
}

.comment-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid hsl(240 5.9% 92%);
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-item--reply {
  margin-left: 2rem;
  padding-top: 1rem;
  padding-bottom: 0.75rem;
}

.comment-content {
  width: 100%;
}

.comment-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.comment-author {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #294557;
}

.comment-time {
  font-size: 0.8125rem;
  color: hsl(240 5.3% 45%);
}

.comment-text {
  margin-bottom: 0.75rem;
  color: hsl(240 5.3% 20%);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.comment-text p {
  margin: 0 0 0.5rem 0;
}

.comment-text p:last-child {
  margin-bottom: 0;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.comment-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: hsl(240 5.3% 45%);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.comment-action-btn:hover {
  background: hsl(240 4.8% 95%);
  color: hsl(240 10% 3.9%);
}

.comment-action-btn:focus {
  outline: 2px solid #294557;
  outline-offset: 2px;
}

.comment-reactions {
  display: flex;
  gap: 0.25rem;
}

.comment-reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid hsl(240 5.9% 90%);
  border-radius: 9999px;
  background: hsl(0 0% 100%);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.875rem;
}

.comment-reaction-btn:hover {
  background: hsl(240 4.8% 95%);
  border-color: hsl(240 5.9% 80%);
}

.comment-reaction-btn:focus {
  outline: 2px solid #294557;
  outline-offset: 2px;
}

.comment-reaction-btn--active {
  background: #e8f0f4;
  border-color: #294557;
}

.comment-reaction-btn--reacted {
  background: #d0e5ed;
  border-color: #294557;
  font-weight: 600;
}

.comment-reaction-emoji {
  line-height: 1;
}

.comment-reaction-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(240 10% 3.9%);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .comments-section {
    padding: 0 1rem;
  }
  
  .comment-item--reply {
    margin-left: 1.5rem;
  }
  
  .comment-form {
    padding: 1rem;
  }
  
  .comment-btn {
    min-height: 44px;
  }
}

/* ════════════════════════════════════════════
   DARK MODE — Comments
   All colors per joegullo.com brand style guide
   ════════════════════════════════════════════ */

/* Section */
[data-theme="dark"] .comments-section__title {
  color: #f1f5f9;
}

/* Comment form */
[data-theme="dark"] .comment-form {
  background: #1e293b;
  border-color: #607888;
}

[data-theme="dark"] .comment-form--reply {
  background: #0f172a;
}

[data-theme="dark"] .comment-form-field label {
  color: #e2e8f0;
}

[data-theme="dark"] .comment-form-field input,
[data-theme="dark"] .comment-form-field textarea {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #607888;
}

[data-theme="dark"] .comment-form-field input:focus,
[data-theme="dark"] .comment-form-field textarea:focus {
  outline-color: #7cb8f7;
  border-color: #7cb8f7;
}

[data-theme="dark"] .comment-form-field input::placeholder,
[data-theme="dark"] .comment-form-field textarea::placeholder {
  color: #7a8a9b;
}

/* Checkbox */
[data-theme="dark"] .comment-form-checkbox label {
  color: #a8b5c4;
}

[data-theme="dark"] .comment-form-checkbox input[type="checkbox"] {
  accent-color: #7cb8f7;
  background-color: #0f172a;
  border-color: #607888;
}

/* Buttons */
[data-theme="dark"] .comment-btn--primary {
  background: #7cb8f7;
  color: #0f172a !important;
  border-color: #7cb8f7;
}

[data-theme="dark"] .comment-btn--primary:hover {
  background: #a5d4fd;
}

[data-theme="dark"] .comment-btn--primary:focus {
  outline-color: #7cb8f7;
}

[data-theme="dark"] .comment-btn--secondary {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #607888;
}

[data-theme="dark"] .comment-btn--secondary:hover {
  background: #334155;
}

[data-theme="dark"] .comment-btn--secondary:focus {
  outline-color: #7cb8f7;
}

/* Comment items */
[data-theme="dark"] .comment-item {
  border-bottom-color: #334155;
}

[data-theme="dark"] .comment-author {
  color: #7cb8f7;
}

[data-theme="dark"] .comment-time {
  color: #7a8a9b;
}

[data-theme="dark"] .comment-text {
  color: #e2e8f0;
}

/* Action buttons */
[data-theme="dark"] .comment-action-btn {
  color: #a8b5c4;
}

[data-theme="dark"] .comment-action-btn:hover {
  background: #334155;
  color: #e2e8f0;
}

[data-theme="dark"] .comment-action-btn:focus {
  outline-color: #7cb8f7;
}

/* Reaction buttons */
[data-theme="dark"] .comment-reaction-btn {
  background: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .comment-reaction-btn:hover {
  background: #1e293b;
  border-color: #607888;
}

[data-theme="dark"] .comment-reaction-btn:focus {
  outline-color: #7cb8f7;
}

[data-theme="dark"] .comment-reaction-btn--active {
  background: rgba(124,184,247,0.1);
  border-color: #7cb8f7;
}

[data-theme="dark"] .comment-reaction-btn--reacted {
  background: rgba(124,184,247,0.18);
  border-color: #7cb8f7;
}

[data-theme="dark"] .comment-reaction-count {
  color: #e2e8f0;
}