/*
 * Comment — the thread under a record. Rows are standard .list__item rows
 * (avatar, hairline dividers, far-right .list__action zone come from
 * list.css); only the content column differs: byline + rich text for a
 * comment, a Lexxy editor for the composer (.comment--composer) and inline
 * edit. The composer keeps an empty action zone so every row's content
 * column lines up.
 *
 * Structure (BEM): .comments > .comments__heading + .list >
 *   turbo-frame.list__item.comment > .list__avatar (.avatar) +
 *   .comment__content (.byline + .comment__body | .comment__form) +
 *   .list__action.comment__actions
 */
@layer components {
  .comments {
    display: grid;
    gap: var(--u-pad);
    margin-block-start: var(--size-8);
    /* A smidge smaller than body text — the whole thread (posted bodies + the
       composer, which inherits) reads a touch more compact. */
    font-size: 0.9375rem;
  }

  .comments__heading {
    margin: 0;
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-7);
  }

  /* The collapsed entry point: a plain text button (no border), wide enough
     that the label never wraps. Clicking it turbo-swaps the prompt row for
     the composer row. */
  .comment__prompt {
    display: inline-block;
    inline-size: 200px;
    color: var(--ink-muted);
    font-size: var(--font-size-1);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }
  .comment__prompt:hover {
    color: var(--ink);
  }

  /* The content column: takes the track a list item's linked body would. */
  .comment__content {
    flex: 1;
    display: grid;
    gap: calc(var(--u-pad) / 4);
    min-inline-size: 0; /* let long rich text wrap instead of overflowing */
  }

  /* Editor rows (composer + inline edit): editor above compact actions. */
  .comment__form {
    display: grid;
    gap: calc(var(--u-pad) / 2);
  }
  /* The editor fills the composer's width. */
  .comment__form lexxy-editor { inline-size: 100%; }

  /* Reserve the action zone even when it holds nothing (composer, edit
     mode) so the content column is the same width on every row. */
  .comment__actions {
    min-inline-size: var(--size-7);
    display: flex;
    justify-content: flex-end;
  }

  /* While composing/editing there's no ⋯ menu, so drop the reserved action
     column and let the editor run to the row's edge. */
  .comment:has(.comment__form) .comment__actions { display: none; }

  /* Pull the ⋯ menu tight against the comment (reclaim most of the flex gap) so
     the text/byline get the width instead of wrapping early. */
  .comment__actions {
    min-inline-size: 0;
    margin-inline-start: calc(var(--u-pad) * -0.75);
  }

  /* Halve the avatar on your input row — the collapsed prompt and the open
     composer — so the editor gets the width (the content column is flex:1, so it
     fills whatever the smaller avatar frees). Posted comments keep the full-size
     avatar on desktop. */
  .comment--composer .list__avatar,
  .comment:has(.comment__prompt) .list__avatar { --avatar-size: 1.75rem; }

  /* Mobile: the full-size posted-comment avatar is too chunky — match the
     input row at 28px across the whole thread. */
  @media (width < 48rem) {
    .comment .list__avatar { --avatar-size: 1.75rem; }
  }
}