@layer components {
  /* Writing one

     The composer is the same shape and the same paper as the comments above
     it, so posting reads as adding to the conversation rather than filling in
     a form below it. */

  .comment-form {
    display: flex;
    flex-direction: column;
    gap: var(--space);
    /* Clear of the last thing said. The stream ends and then there is room
       before the box you write into — the rule between them was doing that job
       on its own, with the entry above it almost touching it. */
    margin-top: var(--space-3);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
  }

  .timeline__list .comment-form { border-top: 0; margin-top: 0; padding-top: 0; }

  /* Nothing said yet, so there is nothing to be separated from. Three rules
     stacked between the properties and the box is exactly the reason the
     tokens file calls a line the last resort. */
  .timeline__list:not(:has(*)) ~ .comment-form { border-top: 0; margin-top: 0; padding-top: 0; }

  /* The field and the button it holds. Relative, because the button is placed
     in the corner of the box rather than under it — a composer with its button
     below is a form, and a composer with the button inside the field is a
     place to write. */
  .comment-form__field { position: relative; }

  /* The reference field, and now literally the shared one: it carries .textarea
     as well, so the paper, the line, the corner and the three states all come
     from forms.css and this says only what is different about writing a
     comment. It was the design every other field in the product was measured
     against and it was written out here in full, which is the arrangement
     where the original and the copies drift apart without anybody noticing.

     Two classes for the reason forms.css spells out: one class ties with
     .textarea and the tie goes to whichever file Propshaft linked last. */
  .textarea.comment-form__body {
    line-height: var(--leading-body);
    display: block;
    /* The one thing it takes from the panels rather than from the fields: it
       is the same size and the same paper as the comments above it, and a
       composer whose corner disagrees with what it posts reads as a different
       kind of thing. */
    border-radius: var(--radius-lg);
    /* One line of writing and the button under it, and no taller than that
       until there is something to be taller for. */
    min-height: calc(var(--control-h) + var(--control-h-sm));
    /* Room at the foot for the button that sits in it. Without the extra
       bottom padding a fourth line of typing runs underneath Post, and
       composer_controller grows the box from scrollHeight — so the padding is
       part of the height it measures and the button never catches up. */
    padding: var(--space-2);
    padding-bottom: calc(var(--control-h-sm) + var(--space-2));
    resize: none;
    overflow: hidden;
    /* height for the same reason the title field has it: composer_controller
       resizes this on every keystroke, and a box that grows in steps is a box
       that shunts the caret down mid-sentence. Appended to the shared
       transition rather than replacing it — `transition` is a shorthand, so
       the four properties forms.css animates have to be said again here. */
    transition: background var(--transition), border-color var(--transition),
                height var(--transition), var(--responds);
  }

  .comment-form__actions {
    position: absolute;
    right: var(--space);
    bottom: var(--space);
    display: flex;
    align-items: center;
    gap: var(--space);
  }

  /* No toolbar on this one — see the `comment` preset in application.js — so
     the field has nothing above it drawing its top edge. Said through the
     editor's own variable rather than as a padding of ours. */
  .comment-form lexxy-editor { --lexxy-editor-padding: var(--space); }
}