@layer components {
  /* Writing one

     The composer is the same shape 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);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
  }

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

  /* Nothing said yet, so there is nothing to be separated from. Three rules
     stacked between the footer 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; padding-top: 0; }

  .comment-form__body {
    font: inherit;
    font-size: var(--text-base);
    line-height: var(--leading-body);
    width: 100%;
    min-height: calc(var(--control-h) + var(--space-3));
    padding: var(--space-2);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-sunk);
    color: var(--ink);
    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 Post button down mid-sentence. */
    transition: background var(--transition), border-color var(--transition),
                height var(--transition), var(--responds);
  }

  .comment-form__body::placeholder { color: var(--ink-faint); }
  .comment-form__body:hover { border-color: var(--line-strong); }
  .comment-form__body:focus { background: var(--surface); border-color: var(--accent); }

  .comment-form__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
}