@layer utilities {
  /* A tap target of at least --size-target, centred on a control whose drawn
     box is smaller, without growing what is drawn. It rides on ::before, so
     it can't go on an element that draws its own ::before, nor on an
     <input type="submit">, which has no pseudo-elements (use a <button>). */
  .hit-area {
    position: relative;
  }
  .hit-area::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    inline-size: max(100%, var(--size-target));
    block-size: max(100%, var(--size-target));
  }
}