@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: this field has been rendering with a
     white background and a full border since it was written, and the sunk,
     borderless field described here has never once been 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.
     
     Rounded like the things it belongs to rather than like the form controls it
     borrowed its styling from: the menu that drops out of this bar, the palette
     its sibling opens, and every card are all on --radius-lg. It is not in a
     form — it is the bar. */
  .input.capture__input {
    width: 100%;
    height: var(--control-h);
    padding-left: var(--space-3);
    padding-right: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface-sunk);
    border-color: transparent;
  }

  .input.capture__input:focus { background: var(--surface); border-color: var(--accent); }

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

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