/* [tsai_recent_comments] — the site's comment activity as one list.
   Colors stay inherited (like tsai-site-links.css) so the list tracks whatever
   palette the surrounding template sets. */

.tsai-comments {
  color: inherit;
}

.tsai-comments__title {
  margin: 0 0 1.5rem;
}

.tsai-comments__empty {
  opacity: 0.7;
}

.tsai-comments__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tsai-comments__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 0 0 2rem;
  padding: 0 0 2rem;
  border-bottom: 1px solid currentColor;
  /* A full-strength rule between every comment is far too loud; the border has
     to inherit the text color to work in both palettes, so fade the whole rule
     instead of picking a color. */
  border-bottom-color: color-mix(in srgb, currentColor 15%, transparent);
}

.tsai-comments__item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.tsai-comments__avatar {
  flex: 0 0 auto;
  line-height: 0;
}

.tsai-comments__avatar img {
  border-radius: 100px;
  display: block;
}

.tsai-comments__content {
  flex: 1 1 auto;
  min-width: 0;
}

.tsai-comments__meta {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.tsai-comments__author {
  font-weight: 600;
}

.tsai-comments__on {
  opacity: 0.65;
}

.tsai-comments__date {
  display: block;
  font-size: 0.8rem;
  opacity: 0.65;
}

.tsai-comments__reply-to {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  opacity: 0.75;
}

/* The theme's body size is set for an article, and these comments run long --
   at full size a page of 25 is an enormous scroll. Step it down so the list
   reads as a list without truncating anything. */
.tsai-comments__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.tsai-comments__text > :first-child {
  margin-top: 0;
}

.tsai-comments__text > :last-child {
  margin-bottom: 0;
}

.tsai-comments__pagination {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  font-size: 0.9rem;
}

.tsai-comments__page {
  opacity: 0.65;
}

/* Keep prev/next at the edges even when only one of them exists. */
.tsai-comments__pagination .tsai-comments__next:only-of-type {
  margin-left: auto;
}

@media (max-width: 480px) {
  .tsai-comments__item {
    gap: 0.75rem;
  }
}