.community-comments {
  scroll-margin-top: 1rem;
}

.community-comments__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
}

.community-comments__eyebrow {
  margin: 0 0 .1rem;
  color: var(--secondary, #40c4ff);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .13em;
}

.community-comments .section-title {
  margin: 0;
  text-align: left;
}

.community-comments__count {
  flex: none;
  padding: .2rem .6rem;
  border: 1px solid rgba(64, 196, 255, .25);
  border-radius: 999px;
  color: #a9e8ff;
  font-size: .75rem;
  font-weight: 700;
}

.community-comments__notice {
  margin-bottom: .8rem;
  padding: .65rem .75rem;
  border: 1px solid rgba(64, 196, 255, .25);
  border-radius: .65rem;
  background: rgba(64, 196, 255, .08);
  color: #dff7ff;
  font-size: .82rem;
}

.community-comments__notice--warning {
  border-color: rgba(255, 193, 7, .3);
  background: rgba(255, 193, 7, .08);
  color: #ffe8a3;
}

.community-comments__list {
  display: grid;
  gap: .6rem;
}

.community-comments__list--scroll {
  max-height: min(34rem, 60vh);
  padding-right: .35rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(64, 196, 255, .5) rgba(255, 255, 255, .05);
  scrollbar-width: thin;
}

.community-comments__list--scroll:focus-visible {
  border-radius: .7rem;
  outline: 2px solid rgba(64, 196, 255, .65);
  outline-offset: 3px;
}

.community-comment {
  margin: 0;
  padding: .75rem .8rem;
  border-left: 3px solid rgba(255, 64, 129, .7);
  border-radius: .25rem .7rem .7rem .25rem;
  background: rgba(255, 255, 255, .035);
}

.community-comment p {
  margin: 0;
  color: rgba(240, 240, 246, .92);
  font-size: .9rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.community-comments__empty {
  margin: 0;
  padding: .8rem;
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: .7rem;
  color: rgba(240, 240, 246, .68);
  font-size: .85rem;
}

.community-comment-form {
  margin-top: .8rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .75rem;
  background: rgba(11, 15, 35, .35);
}

.community-comment-form summary {
  padding: .75rem .85rem;
  color: #fff;
  font-size: .88rem;
  font-weight: 750;
  cursor: pointer;
  list-style-position: inside;
}

.community-comment-form summary i {
  margin-right: .4rem;
  color: var(--primary, #ff4081);
}

.community-comment-form form {
  padding: 0 .85rem .85rem;
}

.community-comment-form label {
  display: block;
  margin-bottom: .35rem;
  color: rgba(240, 240, 246, .75);
  font-size: .75rem;
  font-weight: 700;
}

.community-comment-form textarea {
  display: block;
  width: 100%;
  min-height: 6.5rem;
  padding: .7rem;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: .65rem;
  background: #15152a;
  color: #f0f0f6;
  font: inherit;
  font-size: .88rem;
}

.community-comment-form textarea:focus {
  border-color: rgba(64, 196, 255, .65);
  outline: 2px solid rgba(64, 196, 255, .16);
}

.community-comment-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .6rem;
}

.community-comment-form__foot p {
  margin: 0;
  color: rgba(240, 240, 246, .52);
  font-size: .7rem;
}

.community-comment-form button {
  flex: none;
  padding: .5rem .85rem;
  border: 0;
  border-radius: 999px;
  background: var(--primary, #ff4081);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
}

.community-comments__more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .85rem;
  color: #a9e8ff;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 520px) {
  .community-comment-form__foot {
    align-items: stretch;
    flex-direction: column;
  }

  .community-comment-form button {
    width: 100%;
  }
}