@layer components {
  /* Centered box of a thread; the phone shows first names only. */
  .thread-event {
    width: fit-content; max-width: calc(100% - 2 * var(--gutter)); margin: 10px auto; padding: 6px 12px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--muted);
    text-align: center; line-height: 1.45;
    font-size: var(--text-meta); color: var(--muted-foreground);
  }
  .thread-event__short { display: none; }
  @media (max-width: 767px) {
    .thread-event__long { display: none; }
    .thread-event__short { display: inline; }
  }
}