/* apm_search_bar_html — the search card's own rules.
 *
 * The form root is the .apm-search-card div itself, so that rule stays a
 * bare class; the descendant rules are scoped :where(.apm-search-card), which
 * adds no specificity and so cannot change which rule wins. This is a child
 * form mounted into the auto-pmring shell, never a screen, so the root rule
 * takes no position, flex or min-height.
 *
 * One rule is written BARE rather than :where()-scoped:
 *   .apm-search-row .px-input — at (0,2,0), already led by a private
 *       ancestor. The dependency injects `.px-input, .px-select { width: 100% }`
 *       at runtime, AFTER every head link, so a head-linked copy of this rule
 *       loses any specificity tie on document order. The two declarations here
 *       (flex, min-width) do not overlap `width`, so no tie exists today;
 *       keeping (0,2,0) is what stops one appearing if the dependency's rule
 *       grows.
 *
 * The @media copy keeps the same selector weight as its base rule, so which of
 * the two wins is decided by their order in this file.
 *
 * THE RESET CAN REACH THE ROOT. theme.css has
 *   .px-anvil-reset .anvil-component { padding:0 !important; margin:0 !important;
 *                                      max-width:100% !important; border:none !important }
 * and the card is the form's own mounted root, under the shell's
 * .apm-dashboard.px-anvil-reset in every state, so if the runtime stamps .anvil-component on an adopted HTML-form root that
 * rule beats the bare root rule below and the card renders flush with no
 * border. Whether the class lands there is not established anywhere in either
 * repo, so the twin rule below re-states the only two declarations the reset
 * can reach, at (0,3,0) — one class more than the reset — which wins whatever
 * the head-link order turns out to be and is an inert no-op if the class never
 * lands. margin and max-width need no twin: the card declares neither. The
 * bare rule stays as the values' one home for the designer canvas, which loads
 * this form with no .px-anvil-reset ancestor.
 *
 * --accent on :hover is declared on .apm-dashboard and inherited.
 *
 * No designer gate: nothing in this form is hidden until JavaScript runs.
 */

.apm-search-card {
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  box-shadow: var(--px-shadow);
  padding: 16px 20px;
  font-family: var(--px-font);
}

.px-anvil-reset .apm-search-card.px-anvil-reset {
  border: 1px solid var(--px-border) !important;
  padding: 16px 20px !important;
}

:where(.apm-search-card) .apm-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

:where(.apm-search-card) .apm-search-row label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--px-text-muted);
  font-family: var(--px-font);
  white-space: nowrap;
}

.apm-search-row .px-input {
  flex: 1;
  min-width: 200px;
}

:where(.apm-search-card) .apm-search-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--px-text-muted);
  font-size: 20px;
  padding: 4px 8px;
  border-radius: var(--px-radius-sm);
  transition: color 0.15s ease;
  line-height: 1;
}

:where(.apm-search-card) .apm-search-clear:hover {
  color: var(--accent);
}

@media (max-width: 600px) {
  :where(.apm-search-card) .apm-search-row {
    flex-direction: column;
    align-items: stretch;
  }
}