/* ==========================================================================
   Comments — The Sri COM
   Anonymous discussion under each post. Markup: partials/comments.hbs
   ========================================================================== */

.comments {
  --c-line: rgba(180, 204, 237, .16);
  --c-panel: rgba(16, 31, 54, .5);
  --c-text: #e4ecfa;
  --c-muted: #8ea2bd;
  --c-field: rgba(9, 20, 38, .7);
  --c-brand: #2475e8;
  max-width: 760px;
  /* Sits directly under the article body now, so it is pulled closer than when
     it lived at the very bottom of the page. The rule above it is the only
     separation — nothing else comes between the body and the discussion. */
  margin: 44px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--c-line);
  color: var(--c-text);
}

html[data-theme="light"] .comments {
  --c-line: #dce4ef;
  --c-panel: #ffffff;
  --c-text: #16233a;
  --c-muted: #60738b;
  --c-field: #ffffff;
}

/* --- Heading -------------------------------------------------------------- */

.comments-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
}

.comments-head h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: .004em;
}

.comments-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  border-radius: 99px;
  background: var(--c-brand);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.comments-count:empty { display: none; }

/* --- Form ----------------------------------------------------------------- */

.comment-form {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--c-line);
  border-radius: 13px;
  background: var(--c-panel);
}

.comment-name,
.comment-body {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--c-line);
  border-radius: 9px;
  background: var(--c-field);
  color: var(--c-text);
  font-family: inherit;
  font-size: .92rem;
  line-height: 1.55;
}

.comment-body {
  min-height: 92px;
  resize: vertical;
}

.comment-name::placeholder,
.comment-body::placeholder { color: var(--c-muted); }

.comment-name:focus,
.comment-body:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(36, 117, 232, .22);
}

/* Honeypot — must stay reachable to bots but invisible and unfocusable
   for people, so it is moved off-screen rather than display:none. */
.comment-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.comment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.comment-note {
  margin: 0;
  color: var(--c-muted);
  font-size: .76rem;
  line-height: 1.5;
}

.comment-submit {
  padding: 10px 18px;
  border: 0;
  border-radius: 9px;
  background: var(--c-brand);
  color: #fff;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
}

.comment-submit:hover:not(:disabled) {
  background: #1b62cb;
  transform: translateY(-1px);
}

.comment-submit:disabled {
  opacity: .6;
  cursor: default;
}

.comment-error {
  margin: 0;
  color: #ff8f9b;
  font-size: .8rem;
  line-height: 1.5;
}

html[data-theme="light"] .comment-error { color: #c0243a; }

/* --- The list ------------------------------------------------------------- */

.comment-list {
  display: grid;
  gap: 0;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.comment-list:empty { display: none; }

.comment {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line);
}

.comment:last-child { border-bottom: 0; }

.comment-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: hsl(var(--avatar-hue, 214) 62% 42%);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.comment-main { min-width: 0; }

.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 5px;
}

.comment-author {
  font-size: .88rem;
  font-weight: 650;
  letter-spacing: .004em;
}

.comment-time {
  color: var(--c-muted);
  font-size: .73rem;
}

.comment-text {
  margin: 0;
  font-size: .92rem;
  line-height: 1.62;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.comment-empty {
  margin: 20px 0 0;
  color: var(--c-muted);
  font-size: .86rem;
}

/* --- Phones --------------------------------------------------------------- */

@media (max-width: 620px) {
  .comments {
    margin-top: 34px;
    padding-top: 26px;
  }

  .comment-form { padding: 15px; }

  .comment-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .comment-submit { width: 100%; }

  .comment {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 11px;
  }

  .comment-avatar {
    width: 32px;
    height: 32px;
    font-size: .72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .comment-submit:hover:not(:disabled) { transform: none; }
}

/* ==========================================================================
   Replies + reactions
   Threads are two levels deep; a reply to a reply joins the same thread.
   ========================================================================== */

/* --- Actions row under each comment --------------------------------------- */

.comment-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.comment-reply-button {
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 99px;
  background: transparent;
  color: var(--c-muted);
  font-family: inherit;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}

.comment-reply-button:hover {
  background: rgba(36, 117, 232, .12);
  color: var(--c-brand);
}

.comment-reply-button:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}

/* --- Reaction chips -------------------------------------------------------- */

.comment-reactions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.reaction {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid var(--c-line);
  border-radius: 99px;
  background: transparent;
  color: var(--c-muted);
  font-family: inherit;
  font-size: .74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.reaction:hover { border-color: var(--c-brand); }

.reaction:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}

.reaction.is-on {
  border-color: var(--c-brand);
  background: rgba(36, 117, 232, .16);
  color: var(--c-brand);
}

.reaction-emoji {
  font-size: .92rem;
  line-height: 1;
}

.reaction-count:empty { display: none; }

/* Unused reactions sit back so the row reads as a tally, not a toolbar.
   They come forward on hover, and whenever the reader is over the comment. */
.reaction.is-empty { opacity: .45; }

.comment:hover .reaction.is-empty,
.reaction.is-empty:hover,
.reaction.is-empty:focus-visible { opacity: 1; }

/* --- Nested replies -------------------------------------------------------- */

.comment-replies {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--c-line);
  list-style: none;
}

.comment-replies .comment {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
}

.comment-replies .comment:first-child { padding-top: 0; }
.comment-replies .comment:last-child { border-bottom: 0; padding-bottom: 0; }

.comment-replies .comment-avatar {
  width: 30px;
  height: 30px;
  font-size: .7rem;
}

.comment-replies .comment-text { font-size: .89rem; }

/* --- "Replying to X" strip above the form ---------------------------------- */

.comment-form.is-replying {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(36, 117, 232, .14);
}

.comment-replying {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 2px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(36, 117, 232, .14);
  color: var(--c-brand);
  font-size: .78rem;
  font-weight: 600;
}

.comment-replying-cancel {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: .76rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 620px) {
  .comment-replies {
    margin-top: 13px;
    padding-left: 12px;
  }

  .comment-replies .comment {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 9px;
  }

  .comment-replies .comment-avatar {
    width: 26px;
    height: 26px;
    font-size: .64rem;
  }

  /* No hover on touch, so never hide the unused reactions there. */
  .reaction.is-empty { opacity: 1; }

  /* Six reactions plus a Reply button is a lot for a 375px phone, and a reply
     loses another ~50px to the avatar and the thread line. Tighten the chips
     so the whole row still lands on one line instead of wrapping awkwardly. */
  .comment-reactions { gap: 4px; }

  .reaction {
    min-height: 26px;
    padding: 2px 7px;
    gap: 4px;
    font-size: .72rem;
  }

  .reaction-emoji { font-size: .86rem; }

  .comment-actions-row { gap: 8px; }

  .comment-reply-button { padding: 4px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .reaction,
  .comment-reply-button { transition: none; }
}