/* Tag-input component — pills row + APG combobox input + autocomplete listbox.
   Shared smart-tag DISPLAY vocabulary (.tag-pill, .tag-pill--<color>,
   .smart-icon) stays in base.css: recipe-detail pills and index filter chips
   consume it too. This sheet owns only the editor-input chrome.
   Public API (variables only; set them on any ancestor, never re-declare
   properties or re-style .tag-input* from a page sheet — rake lint:hig):
     --tag-input-row-max-width (16rem)
     --tag-input-gap           (0.35rem)
   Collaborators: components/_tag_input.html.erb, tag_input_controller.js.
   State ladder: docs/wiki/style.md § The state ladder. */

.tag-input { position: relative; }

.tag-input__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}

/* position:relative so the absolute listbox anchors to the ROW in ANY host —
   the recipe editor has no positioned ancestor of its own, and a dialog host is
   a different tree entirely. Anchoring to the row rather than the component
   root is what keeps the listbox against the field once the pills above it wrap
   to a second line, and it makes the listbox inherit this max-width instead of
   restating it (#3321 portability, #3674). */
.tag-input__row {
  position: relative;
  display: flex;
  gap: var(--tag-input-gap, 0.35rem);
  align-items: center;
  max-width: var(--tag-input-row-max-width, 16rem);
}

.tag-input__field { flex: 1; }

/* z-index outranks --z-raised: the recipe editor's sticky action bar is opaque
   and parks in the bottom band of the window, exactly where a downward listbox
   lands. At a literal 10 the two TIED and document order handed the paint to the
   bar, so typing showed nothing (#3674). */
.tag-input__listbox {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  /* Two caps, both needed. The design cap keeps a long tag list from becoming a
     wall of text; --tag-input-listbox-room is the space the chosen side actually
     has, published by tag_input_controller#placeListbox — without it a window
     too short for either side just moves the overflow to the other edge instead
     of scrolling (#3674). The fallback keeps the design cap alone in force
     before the first render and if the controller never runs. */
  max-height: min(150px, var(--tag-input-listbox-room, 100dvh));
  overflow-y: auto;
  z-index: var(--z-popover);
  font-size: 0.75rem;
}

/* Set by tag_input_controller#placeListbox when the suggestions do not fit below
   the field AND there is more room above it — opening off the bottom of the
   window is the other way this popover showed the user nothing (#3674). When
   they fit neither side, the room cap above does the work instead. */
.tag-input__listbox--above {
  top: auto;
  bottom: 100%;
}

.tag-input__option {
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (any-hover: hover) {
  .tag-input__option:hover { background: rgba(179, 58, 58, 0.06); }
}
.tag-input__option--highlighted { background: rgba(179, 58, 58, 0.06); }

.tag-input__count {
  font-size: 0.65rem;
  color: var(--text-soft);
}

/* The pill + its × remove control are shared display vocabulary (.tag-pill,
   .tag-pill__remove in base.css) — the search overlay renders the same
   removable chip. This sheet owns only the input chrome around them. */

/* Interactive chrome — never useful on paper. */
@media print {
  .tag-input__listbox { display: none !important; }
}