@layer components {
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);

    & small { font-size: var(--text-x-small); font-weight: 500; }
    &:has([aria-invalid=true]) small { color: var(--color-negative); }
  }

  .field--check {
    flex-direction: row;
    align-items: start;
    gap: var(--inline-space);

    & label { font-weight: 400; }
  }

  .links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half) var(--inline-space-double);
    font-size: var(--text-small);
  }

  /* The owner's customer search. */
  .search {
    display: flex;
    gap: var(--inline-space);
    max-inline-size: 32rem;

    & input { flex: 1; min-inline-size: 0; }
  }

  /* F12 history filters: one row where it fits, stacked on a phone. */
  .filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--block-space) var(--inline-space-double);
  }
}