@layer components {
  /* A form does not have a width of its own. The panel it sits in takes the
     column like every other panel; the things you actually type into take the
     measure, because a 1024px email field is not generous, it is just wide.
     Two widths on the page, one nested inside the other. */
  /* Descendant, not child: form_with renders its own <form> inside the panel,
     so the fields are grandchildren of .form and a child selector reaches none
     of them. */
  .form .field,
  .form .row,
  .form .button,
  .form input.button { max-width: var(--measure); }

  .field { display: flex; flex-direction: column; gap: var(--space); }


  /* The shared controls.
     
     A component that customises one of these must say so with both classes —
     `.input.capture__input`, not `.capture__input` — because a single class
     ties with this rule on specificity, and a tie is settled by which file
     Propshaft happened to link last. That is filename order, which is to say
     alphabetical, which is to say nothing at all about intent: `capture.css`
     and `joinlink.css` both lost silently to this rule for months, and the
     designs written in them were never once drawn.
     
     The tokens file makes the same point about @layer deciding which layer
     wins. This is the level below it: inside a layer, source order still
     decides, and source order here is an accident of the alphabet. */
  .input, .select, .textarea {
    font: inherit;
    font-size: var(--text-base);
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-2);
    height: var(--control-h);
    width: 100%;
    transition: border-color var(--transition), background var(--transition), var(--responds);
  }

  .textarea { height: auto; min-height: 9rem; padding: var(--space-2); line-height: var(--leading-body); resize: vertical; }

  .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
  .input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
}