/* Search-field component (#3856) — a fully rounded field with a leading
   magnifier, for every type-to-narrow filter (pantry, ingredients, menu picker,
   USDA lookup). The pill radius is the load-bearing half of the treatment: it
   is what separates a search from the rectangular text inputs around it at a
   glance, before the icon is even read. Chosen over a sharp-cornered and a
   recessed-well candidate in the #3856 design-preview round.

   The wrapper owns the box and the input is unstyled inside it. That is the
   whole point of the shape: an icon that is a flex sibling needs no
   absolutely-positioned overlay and no hand-tuned padding to clear it (the
   `padding-left: 2.4rem` in home.css is what this replaces), and a focus ring
   on the wrapper encloses the icon along with the text.

   Public API (variables only; set them on any ancestor, never re-declare
   properties or re-style .search-field* from a page sheet — rake lint:hig):
     --search-field-max-width     (100%)
     --search-field-radius        (var(--radius-pill))
     --search-field-bg            (var(--input-bg))
     --search-field-border-color  (var(--rule-faint))
     --search-field-icon-color    (var(--text-placeholder))
     --search-field-font-size     (var(--type-base))
     --search-field-padding       (0.45rem 0.9rem)
     --search-field-gap           (var(--space-2))

   The icon defaults to the PLACEHOLDER rung, not --text-light: it sits beside
   placeholder text and should read as the same muted unit, and --text-light
   measures 2.72:1 on --input-bg where --text-placeholder clears both WCAG
   1.4.3 for the adjacent text and 1.4.11's 3:1 for the glyph itself (#4477).

   Ladder: rest / hover / focus-within / disabled. Press and selected are
   skipped because a text field has neither — not deferred (docs/wiki/style.md
   the state ladder).

   Collaborators: components/_search_field.html.erb, IconHelper#icon(:search). */

.search-field {
  display: flex;
  align-items: center;
  gap: var(--search-field-gap, var(--space-2));
  max-width: var(--search-field-max-width, 100%);
  padding: var(--search-field-padding, 0.45rem 0.9rem);
  border: 1px solid var(--search-field-border-color, var(--rule-faint));
  border-radius: var(--search-field-radius, var(--radius-pill));
  background: var(--search-field-bg, var(--input-bg));
  box-sizing: border-box;
}

.search-field__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--search-field-icon-color, var(--text-placeholder));
}

/* `all: unset` strips the UA border/background so the wrapper's box is the only
   one drawn. font-size is restated because the reset drops the inherited value
   too; keeping it at --type-base (16px) also keeps this control above the iOS
   auto-zoom floor, which base.css enforces on the bare `input` selector at
   (0,0,1) — this (0,1,0) selector out-specifies it, so the floor is ours to
   honour here rather than inherit. */
.search-field__input {
  all: unset;
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--search-field-font-size, var(--type-base));
  color: var(--text);
}

.search-field__input::placeholder {
  color: var(--text-placeholder);
}

/* The type=search cancel button IS the clear affordance — #3856 retired the
   pantry's duplicate in-page one. Chrome paints its own X in a system blue that
   reads as foreign on warm paper, so it is re-skinned as a mask: the shape
   comes from a Propshaft-served asset (`:self`, so it clears style/img CSP,
   where a data: URI would not — img_src is :self + :blob only) and the COLOUR
   from background-color, which keeps it on the same token as the magnifier.
   Firefox renders no cancel button at all; nothing here changes that.
   The `../` is load-bearing: Propshaft resolves a CSS url() against the
   REFERENCING SHEET's own directory, so a bare name here would be looked up as
   components/search-cancel.svg, silently fail to rewrite, and ship an
   un-digested 404 that paints the button as a solid block. */
.search-field__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 0.8rem;
  height: 0.8rem;
  cursor: pointer;
  background-color: var(--search-field-icon-color, var(--text-placeholder));
  mask: url("/assets/search-cancel-6932d578.svg") center / contain no-repeat;
}

@media (any-hover: hover) {
  .search-field__input::-webkit-search-cancel-button:hover {
    background-color: var(--red);
  }
}

@media (any-hover: hover) {
  .search-field:hover {
    border-color: var(--rule);
  }
}

/* Focus rides the wrapper, not the input: the ring has to enclose the icon,
   which is outside the input's own box. */
.search-field:focus-within {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-color: var(--red);
}

.search-field:has(.search-field__input:disabled) {
  opacity: 0.55;
}

@media print {
  .search-field { display: none; }
}