/* Blog post comments.
   Container copies the .sidebar-panel / .post__card recipe verbatim so
   this reads as part of the site rather than bolted on. Inputs and the
   submit button are lifted from css/shoutbox.css unchanged, so the two
   public write surfaces look like siblings. */

/* Standalone form of the section: its own translucent well, matching
   .post__card. Kept for any surface that mounts comments on their own. */
.comments {
  max-width: 880px;
  margin: 2.5rem auto 3rem;
}

.comments__panel {
  background: rgba(36, 26, 28, 0.4);
  border: 1px solid rgba(179, 0, 0, 0.18);
  border-radius: 16px;
  padding: 1.6rem 1.7rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 18px rgba(139, 0, 0, 0.12);
}

/* Nested in the post's .post__engage box, the panel sheds all of its own
   chrome — .post__engage already provides the well, the border, the blur
   and the halo. Doubling them up is exactly the stacked-boxes look this
   replaced. */
.post__engage .comments { max-width: none; margin: 0; }
.post__engage .comments__panel {
  background: none;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: none;
  padding: 1.5rem 1.7rem 1.6rem;
}

.comments__header { margin-bottom: 1.4rem; }

.comments__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
}

.comments__squiggle {
  width: 18px;
  height: 10px;
  flex-shrink: 0;
  color: var(--color-red-bright);
}

.comments__subtitle {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-label);
  margin: 0.35rem 0 0;
}

/* ---- the list ---- */

.comments__list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 1.6rem;
}

.comments__list .empty-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* Tapered divider between THREADS (a root plus its replies), in the
   shoutbox's idiom but much fainter. Inside a single box with several
   comments stacked, the shoutbox's 0.12 read as a ladder of rules; this
   is just enough to separate two threads without drawing lines. Replies
   inside a thread get no divider — the indent rail groups them. */
.comment-thread:not(:last-child)::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 1.1rem;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255, 255, 255, 0.055) 12%,
    rgba(255, 255, 255, 0.055) 88%,
    transparent 100%);
}

.comment__head {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-bottom: 0.35rem;
}

.comment__name {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-red-bright);
  text-decoration: none;
}

a.comment__name:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Beside the name rather than pinned right — at this width a
   right-aligned timestamp reads as belonging to the row, not the person.
   The middot keeps the two mono runs from blurring together. */
.comment__time {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--color-date);
  white-space: nowrap;
}
.comment__time::before {
  content: '·';
  margin-right: 0.45rem;
  opacity: 0.45;
}

.comment__text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-body-text);
  margin: 0;
  /* Authors write paragraphs; keep their line breaks. overflow-wrap
     stops a pasted 400-character URL from widening the panel. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* One level of nesting. The rail is a structural indent marker, not
   decoration — it says "these answer the comment above" in a way that
   indentation alone doesn't at this contrast. */
.comment__replies {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 1.1rem 0 0 0.5rem;
  padding-left: 1.1rem;
  border-left: 1px solid rgba(204, 80, 80, 0.2);
}

.comment--reply .comment__name { font-size: 0.66rem; }
.comment--reply .comment__text { font-size: 0.86rem; }

.comment__reply-prefix {
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--color-red-bright);
  margin-right: 0.25rem;
}

.comment__foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

/* Always visible, not hover-revealed. "Reply" is the whole point of a
   comment thread — a control you have to hunt for by hovering is one
   most people never find, and it doesn't exist at all on touch. Resting
   at 0.6 keeps it quiet without hiding it. Same for the admin controls:
   someone moderating is here to act. */
.comment__reply-btn,
.comment__mod button {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.comment:hover .comment__reply-btn,
.comment:hover .comment__mod button,
.comment__reply-btn:focus-visible,
.comment__mod button:focus-visible { opacity: 1; }

.comment__reply-btn:hover,
.comment__mod button:hover { color: var(--color-red-bright); }

.comment__mod {
  display: flex;
  gap: 0.75rem;
  margin-left: auto;
}

.comment__mod button:last-child:hover { color: var(--color-red-bright); }

/* Held for review. Only an admin (or the author, briefly) ever sees one. */
.comment--pending {
  border-left: 2px solid rgba(179, 0, 0, 0.4);
  padding-left: 0.75rem;
  margin-left: -0.75rem;
}

.comment__chip {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-red-bright);
  background: var(--color-red-subtle);
  border: 1px solid rgba(204, 80, 80, 0.3);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

/* ---- the form ---- */

.comment-form { display: flex; flex-direction: column; gap: 0.6rem; }

/* The same form, moved into a thread while you reply to it. Given a
   recessed well and a tighter box so it reads as belonging to the
   conversation above it rather than as the page's main comment box. */
.comment-form--inline {
  padding: 0.85rem 0.95rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(204, 80, 80, 0.15);
  border-radius: 8px;
  gap: 0.5rem;
}
.comment-form--inline textarea { min-height: 4rem; }
.comment-form--inline .comment-form__submit { padding: 0.45rem 1rem; }

.comment-form__reply-bar[hidden] { display: none; }

.comment-form__reply-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-text-muted);
}

.comment-form__reply-bar > span { flex: 1; }

.comment-form__reply-bar button {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.comment-form__reply-bar button:hover { color: var(--color-red-bright); }

.comment-form__row { display: flex; gap: 0.6rem; }

.comment-form input,
.comment-form textarea {
  flex: 1;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: 3px;
  outline: none;
  transition: border-color var(--transition-fast);
}

.comment-form textarea {
  resize: vertical;
  min-height: 5.5rem;
  line-height: 1.5;
}

.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--color-red); }

.comment-form input::placeholder,
.comment-form textarea::placeholder { color: var(--color-text-muted); }

.comment-form__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.comment-form__note {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.comment-form__note--error { color: var(--color-red-bright); }
.comment-form__note--held { color: var(--color-text-secondary); }

.comment-form__submit {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.55rem 1.25rem;
  background: var(--color-red);
  border: 1px solid var(--color-red);
  color: var(--color-text);
  border-radius: 3px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.comment-form__submit:hover:not(:disabled) {
  background: var(--color-red-bright);
  box-shadow: 0 0 15px var(--color-red-glow);
}

.comment-form__submit:disabled { opacity: 0.6; cursor: default; }
.comment-form__submit.is-failed { border-color: var(--color-red-bright); }

/* ---- narrow screens ---- */

@media (max-width: 600px) {
  .comments__panel { padding: 1.2rem 1.1rem; border-radius: 12px; }
  .post__engage .comments__panel { padding: 1.2rem 1.1rem 1.3rem; }
  .comment-form__row { flex-direction: column; }
  .comment__head { flex-wrap: wrap; }
  .comment__replies { margin-left: 0; padding-left: 0.8rem; }
}