/**
 * Back-office search-bar vocabulary — the standard bar that sits ABOVE the
 * shared tray results on a search surface (`Content.Search`,
 * docs/design/backoffice-page-type.md). One shape (`SearchDef`), one renderer
 * (`renderSearch`, engine-src/staff-page.ts): a query input + a scope hint + a
 * submit, then the ordinary `renderTray` results below (styled by be-tray.css).
 *
 * Rides the design-system source→copy pipeline exactly like be-tray.css /
 * be-action.css: authored here, copied verbatim to /jds/be-search.css by
 * build.mjs, linked by the app (layout.html, scoped to `.be-search`, so
 * non-search pages render byte-identical).
 *
 * The bar composes NO card — the tray below is the only surface card
 * (docs/one-shared-card.md). This file styles only the bar's own layout; the
 * input inherits the base input chrome, the submit is the shared `.jud-button`.
 */

.be-search {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

/* The input grows to fill the row; the submit hugs its content on the right. */
.be-search__row {
  display: flex;
  align-items: stretch;
  gap: var(--space-sm);
}
.be-search__input {
  flex: 1 1 auto;
  min-width: 0;
}
.be-search__submit {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* The scope hint — quiet, tells the officer WHAT the box searches. */
.be-search__hint {
  font: var(--font-small);
  color: var(--color-grey-dark);
  margin: 0;
}