/* Comment threads. Flat, hairline-separated, newest last, with the lean
   composer waiting at the bottom — see lexxy.css. */
@layer components {
  /* ====================================================================
     Comments
     ==================================================================== */
  /* ——— Comments: flat threads, hairline-separated, newest last (Hanshi 07).
     The lean composer waits at the bottom of every one — see lexxy.css. ——— */

  /* The thread label is a tracked-caps label like every other section label.
     `.comments > h2` is in labels.css's selector list; a comments heading is
     never anything else. */
  .comment {
    padding-block: var(--block-space);

    & + .comment {
      border-block-start: var(--border);
    }

    /* The byline is bylines.css's — avatar, name, time on one line, the same
       everywhere. The words themselves start back at the margin rather than
       indenting under the face, because a thread of indented paragraphs reads
       as a hierarchy it does not have (HANSHI 07), and that is what leaving
       the byline unpositioned already says.

       Rendered rich text leaves a trailing margin under its last block, which
       would double the rhythm above the next hairline. */
    .lexxy-content > :last-child {
      margin-block-end: 0;
    }

    /* A full inline space after the face, rather than the half every other
       byline takes (user, 2026-08-29). A thread is the one surface where the
       line is read as a person speaking rather than scanned as a row, and at
       half the name sits on the circle. Retuned here and not in bylines.css:
       a board row wants the tighter one, and this is what says which. */
    .byline {
      gap: var(--inline-space);
    }
  }

  /* The composer row that closes every thread (comments/_section): the
     hairline above, air, then your face beside the prompt — BC's calm
     (user, 2026-08-10). BESIDE means on the same line: the compact wrapper's
     own lead-in plus the editor's 1ch padding seated the prompt ~17px below
     the avatar (user, 2026-08-11), so both are stripped here and the one
     seat the line needs — centring its 1lh against the face — is said in the
     terms it is made of. Top-aligned, not centred: the avatar must hold its
     line as the comment grows. */
  .comment-composer {
    display: flex;
    align-items: flex-start;
    gap: var(--inline-space);
    border-block-start: var(--border);
    padding-block-start: var(--block-space);

    .composer--compact {
      padding-block-start: 0;
    }

    /* The editor's own padding is zeroed by lexxy.css, for every frameless
       composer rather than only this one. */
    .lexxy-editor__content {
      padding-block-start: calc((var(--avatar-size, 1.75rem) - 1lh) / 2);
    }
  }

  /* The action row wakes with the toolbar, never before it (user, 2026-08-11):
     at rest the composer is a prompt and nothing else, so a Never mind / Add
     comment pair standing under it answers a question no one has asked yet.

     Same condition as the toolbar's own in lexxy.css — empty AND unfocused,
     so nothing moves out from under a pointer once there are words — but
     asked of the form rather than the composer, so the buttons stay put once
     focus is on them and Tab out of an empty editor has somewhere to land.

     The edit form is exempt: it stands in a comment's own place with that
     comment's words already in it, so its Never mind has to stay reachable
     even in the moment the author has selected all and deleted. */
  form:not(.comment-edit):has(> .comment-composer):has(lexxy-editor.lexxy-editor--empty):not(:focus-within) > .actions {
    display: none;
  }

  /* The edit composer wears the thread composer's anatomy (comments/edit) but
     not its rule: it sits inside the comment article, which already carries
     the hairline above it, and a second one would draw the line twice. */
  .comment-edit .comment-composer {
    border-block-start: none;
    padding-block-start: 0;
  }

  /* An event line among the comments keeps the thread's hairline rhythm. Its
     boost used to be positioned here too; that treatment moved to events.css
     when the feeds turned out to want it as well — a line's boost belongs to
     the line, not to whichever page it is being read on (user, 2026-08-13). */
  .comments :is(.event, .comment) + :is(.event, .comment) {
    border-block-start: var(--border);
  }

  /* A comment's boosts sit under the words they answer, at the margin those
     words start from (user, 2026-08-29). They used to close the line at the
     far right, BC's corner — but BC's corner holds pills, and ours holds a
     lone rocket on every comment that has none: an isolated mark in an
     otherwise empty band, which the eye reads as the separator before it ever
     reaches the hairline that actually is one. At the left it is simply the
     last thing this comment says. */
  .comment .boosts {
    margin-block-start: var(--block-space-half);
  }

  /* The trace a commentable surface carries, and the only other mark a card
     may show: a dotted circle and a count. Nothing at all when it is zero. */
  .comment-count {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-half);
    font-size: var(--text-x-small);
    color: var(--color-ink-subtle);

    &::before {
      content: "";
      inline-size: 0.75rem;
      block-size: 0.75rem;
      border: var(--border-size) dotted currentColor;
      border-radius: 50%;
    }
  }
}