/* Our additions to the forums. Thredded's own styles are built into thredded.css. */

.forum-latest { margin-bottom: 24px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); }
.forum-latest__title { margin: 0 0 10px; font-size: 1.05rem; }
.forum-latest__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.forum-latest__topic { display: block; font-weight: 600; overflow-wrap: anywhere; }
.forum-latest__meta { color: var(--ink-3); font-size: 0.85rem; }

/* One line for each thread where there's room: the title gives way before the details. */
@media (min-width: 700px) {
  .forum-latest__list { gap: 6px; }
  .forum-latest__list li { display: flex; align-items: baseline; gap: 16px; }
  .forum-latest__topic { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .forum-latest__meta { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Thredded has no side margins on phones, and its follow icons and post menus sit past
   the edge of the content, so they stuck out and made the page scroll sideways. */
@media (max-width: 34rem) {
  .thredded--main-container { padding: 0 16px; }
  .thredded--main-container .thredded--topics--follow-icon { right: -28px; }
}

/* Long lines in a code block wrap, which also keeps contact messages readable. */
.thredded--post--content pre { white-space: pre-wrap; overflow-wrap: anywhere; }

.contact-panel { margin: 16px 0; }
.contact-panel__done { margin: 12px 0 0; }