@layer components {
  /* Capture runs the width of the bar. Everything in this product starts with
     something landing in the Inbox, so the field for it is the largest thing in
     the masthead rather than one control among five. */
  .capture {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1;
    min-width: 0;
  }

  /* Written as .input.capture__input, and it has to be.

     The field carries both classes, and on its own `.capture__input` has
     exactly the same specificity as `.input` — so which one wins is decided by
     which file the browser read last, and Propshaft links them in filename
     order. capture.css is read before forms.css, so every property the two had
     in common was being taken by .input, and the design written here was never
     once on the screen.

     Two classes, so it outranks the one it is customising rather than racing
     it up the alphabet. See the note in forms.css.

     What is left here is what is true of this field and no other: it fills the
     bar, it keeps room on the right for the key that says how to reach it, and
     it rounds like the composer. The paper and the line are the shared field's
     — the same ones the comment composer uses, which is the field this one is
     really a sibling of. Both are places you type a sentence into, and the two
     of them disagreeing about their own shape was the last place in the
     product where two writing surfaces did. */
  .input.capture__input {
    height: var(--control-h);
    padding-left: var(--space-3);
    padding-right: var(--space-6);
    /* The panel corner rather than the field one, which is the composer's and
       a posted comment's — see comment-form.css. The surfaces somebody writes
       a sentence into are the size of the panels rather than the size of a
       field, and --radius reads as a tighter corner the larger the box under
       it. The fields you fill in keep the field corner. */
    border-radius: var(--radius-lg);
  }

  .capture__key {
    position: absolute;
    right: var(--space-2);
    pointer-events: none;
    transition: opacity var(--transition);
  }

  .capture__input:focus + .capture__key { opacity: 0; }
}