/* Shared form refinements; preserve native choice and file controls. */
.form-card .form-grid > label:not(.choice):not(.inline-check):not(:has(> input[type=checkbox])):not(:has(> input[type=radio])),
.form-card .form-grid > .searchable-select-field > label {
  grid-template-rows: minmax(1.4em, auto) auto auto;
  gap: 8px;
  min-width: 0;
}
.form-card .form-grid > label.full-width { grid-template-rows: auto auto auto; }
.form-card :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), select) { min-height: 48px; }
.form-card :where(label > small, .helper-text) { font-size: .875rem; line-height: 1.5; }
.form-card :where(legend) { font-size: 1.15rem; }
.optional-fields > summary { gap: 12px; flex-wrap: wrap; }
.optional-fields > summary [data-filled-summary] { font-size: .875rem; font-weight: 500; color: var(--muted); }
.optional-fields > .form-grid, .optional-fields > label { margin-block: 20px; }

/* Separate form sections while keeping labels close to their own controls. */
form.form-card:not(.payment-filter-card):not(.list-filter-card) { gap: 32px; }
form.form-card > fieldset { padding-bottom: 28px; }
form.form-card .optional-fields[open] > fieldset { margin-top: 20px; }
@media (max-width: 760px) {
  form.form-card:not(.payment-filter-card):not(.list-filter-card) { gap: 28px; }
  .form-card .form-grid { row-gap: 24px; }
  .form-card .form-grid > label:not(.choice):not(.inline-check):not(:has(> input[type=checkbox])):not(:has(> input[type=radio])),
  .form-card .form-grid > .searchable-select-field > label { grid-template-rows: auto auto auto; }
}
/* Share label, control and helper rows so wrapped labels align with short ones. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 761px) {
    .form-card .form-grid { row-gap: 8px; column-gap: 28px; }
    .form-card .form-grid > label:not(.choice):not(.inline-check):not(:has(> input[type=checkbox])):not(:has(> input[type=radio])),
    .form-card .form-grid > .searchable-select-field {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 8px;
      margin-bottom: 20px;
    }
    .form-card .form-grid > .searchable-select-field > label {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 8px;
    }
  }
}

.select-current-label { min-width: 0; white-space: normal; overflow-wrap: anywhere; }

/* The receipt category note describes both fields and must not occupy one column. */
form[data-receipt-mode="direct"] .form-grid > .helper-text { grid-column: 1 / -1; margin: 0; }

/* Optional search supports the native picker without becoming a second field. */
.select-search-disclosure { min-width: 0; align-self: start; }
.select-search-disclosure > .select-search-toggle {
  display: list-item; min-height: 44px; padding: 10px 0;
  color: var(--forest); font-size: .875rem; font-weight: 600; cursor: pointer;
  line-height: 1.5; overflow-wrap: anywhere;
}
.select-search-disclosure > .select-search-toggle:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.select-search-disclosure .select-search-control { margin: 0; padding-block: 4px 12px; gap: 8px; }
.select-search-disclosure .select-search-caption { display: none; }
.select-search-disclosure .select-search-input { min-height: 48px; }

/* Align label, primary control and supporting rows, not whole field heights. */
:is(.list-filter-card, .payment-filter-card, .work-filter-form) { container-type: inline-size; }
.aligned-filter-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: start; gap: 8px 20px; min-width: 0;
}
.aligned-filter-grid > .search-field { grid-column: auto; }
.payment-filter-card .aligned-filter-grid { margin: 0; gap: 8px 16px; }
.aligned-filter-grid > label,
.aligned-filter-grid > .searchable-select-field > label {
  display: grid; grid-template-rows: auto auto auto; gap: 8px;
  min-width: 0; margin: 0;
}
.aligned-filter-grid > .searchable-select-field { min-width: 0; gap: 0; }
.aligned-filter-grid :is(input:not([type=hidden]), select) { min-height: 48px; margin: 0; width: 100%; min-width: 0; }
.aligned-filter-grid > .filter-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-self: start;
  justify-content: flex-start; min-width: 0; margin: 0;
}
.aligned-filter-grid > .filter-actions > .button { min-height: 48px; margin: 0; white-space: nowrap; }
.work-filters.aligned-filter-grid { display: grid; }
@container (min-width: 560px) {
  .aligned-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .list-search-row.aligned-filter-grid:not(:has(select)),
  .work-filter-search.aligned-filter-grid { grid-template-columns: minmax(0, 1fr) auto; }
  @supports (grid-template-rows: subgrid) {
    .aligned-filter-grid > label,
    .aligned-filter-grid > .searchable-select-field,
    .aligned-filter-grid > .filter-actions {
      display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 8px;
    }
    .aligned-filter-grid > .searchable-select-field > label {
      grid-row: span 3; grid-template-rows: subgrid;
    }
    .aligned-filter-grid > .filter-actions { grid-template-columns: repeat(2, auto); align-content: start; }
    .aligned-filter-grid > .filter-actions > .button { grid-row: 2; }
    .aligned-filter-grid > .filter-actions:has(> :only-child) { grid-template-columns: auto; }
  }
}
@container (min-width: 850px) {
  .payment-search-controls.aligned-filter-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .list-search-row.aligned-filter-grid:has(select) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; }
  .work-filters.aligned-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .aligned-filter-grid { gap: 16px; }
  .aligned-filter-grid > .filter-actions > .button { flex: 1; }
}