@layer components {
  /* The thread under a comment, as a float (comment_thread_controller): the
     comment and its replies, moved in from the list. A popup, hung from its
     opener — the count beside Reply, or the document's marker on the words —
     so it stands under what was pressed and follows it as the page scrolls.
     Under the opener from its start edge, as a thread reads; the popup's own
     flips keep it on the screen.

     A popup is dense and small, for a menu; a thread is read, so it takes the
     page's rhythm and size back — said with both classes, which outweigh
     popups.css's one; at equal weight that file, loaded after this one,
     would have the last word. */
  .popup.comment-thread {
    position-anchor: --comment-thread;
    --popup-area: block-end span-inline-end;
    --block-space: 1rem;
    font-size: var(--text-normal);
    inline-size: min(36rem, calc(100vw - 2 * var(--inline-space)));
    /* A comment's face steps out into the thread's gutter (comments.css); the
       float gives it the same gutter. */
    --thread-indent: calc(var(--avatar-size, 1.75rem) + var(--inline-space));
    padding: var(--block-space-half) var(--inline-space) var(--block-space-half) calc(var(--inline-space) + var(--thread-indent));

    .comment {
      padding-block: var(--block-space-half);
    }

    /* Reply and Resolve wake on hover in the list (comments.css); in the
       thread they are the point, so they stand. */
    .comment__reply {
      opacity: 1;
    }

    /* The count beside Reply opens the thread; inside it the thread is
       already open, and pressing it only moved the float. */
    [data-comment-thread-target="count"] {
      display: none;
    }
  }
}