/*
 * A single row of filter fields, above a list (DESIGN.md §5): labelled
 * comboboxes, then Filter and Clear. Overrides the form defaults in
 * forms.css, which stack one field per line for a record a person fills in
 * -- this form is a quick lookup, so its fields sit side by side instead.
 */
@layer components {
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-4) var(--space-6);

    & p {
      margin: 0;
      max-inline-size: none;
    }

    & label {
      margin-block-end: var(--space-1);
    }

    & input:not([type="submit"]) {
      inline-size: 16rem;
      max-inline-size: 16rem;
    }

    /* The Filter + Clear pair: no label above it, so no top rule either --
       unlike a record form's action row, this is still part of the one row. */
    & p:has(> input[type="submit"]) {
      margin: 0;
      padding: 0;
      border: 0;
      gap: var(--space-4);
    }
  }
}