/*
 * Choosing one of the household's items (item_combobox_controller.js): a
 * search field with a list under it, for linking a receipt line and for a
 * meal's ingredients. Rows are thumb-sized; each item says where it sits
 * and where it was last bought, and the suggestion or list items say so in
 * a soft tag. Making a new item sits apart, under a rule, in leaf green.
 */
@layer components {
  .item-combobox { position: relative; display: grid; gap: var(--space-1); }
  .item-combobox__label { font-size: var(--text-sm); font-weight: 800; }
  .item-combobox__field { position: relative; display: flex; gap: var(--space-2); }
  .item-combobox__field .input { flex: 1; min-width: 0; }
  .item-combobox__field .button[hidden] { display: none; }
  .item-combobox__hint { color: var(--muted); font-size: var(--text-sm); }
  .item-combobox__options {
    position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
    max-height: min(320px, 50vh); overflow-y: auto; margin: 0; padding: var(--space-1); list-style: none;
    border: 1px solid var(--line); border-radius: var(--radius-md, 14px); background: var(--surface); box-shadow: 0 8px 24px rgb(43 42 39 / 0.12);
  }
  .item-combobox__option {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: 10px; cursor: pointer;
  }
  .item-combobox__option:hover { background: var(--cream, #fbf7ef); }
  .item-combobox__option[aria-selected="true"] { background: var(--mint-soft); }
  .item-combobox__text { display: grid; min-width: 0; }
  .item-combobox__detail { overflow: hidden; color: var(--muted); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
  .item-combobox__option small { flex: none; padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--cream, var(--line)); color: var(--muted); font-size: var(--text-xs, 0.75rem); font-weight: 800; }
  .item-combobox__option--create { color: var(--leaf); font-weight: 800; }
  .item-combobox__option--item + .item-combobox__option--create,
  .item-combobox__option--unlink { margin-top: var(--space-1); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
  .item-combobox__option--unlink { color: var(--muted); }

  /* In a form (a meal's ingredients, a week's swap), the field says what's chosen: a tick
     for one of the household's items, "New" for a name being added. The tag
     sits over the field's end, and the list opens under the whole line
     (the form's own row, positioned) so names fit on a phone. */
  .item-combobox--field, .item-combobox--field .item-combobox__field { position: static; }
  .item-combobox__choice { display: flex; align-self: center; justify-content: flex-end; width: 0; margin-left: calc(-1 * var(--space-2)); pointer-events: none; }
  .item-combobox__choice > span { display: none; flex: none; align-items: center; margin-right: var(--space-3); }
  [data-choice="linked"] .item-combobox__choice--linked,
  [data-choice="new"] .item-combobox__choice--new { display: inline-flex; }
  .item-combobox__choice--linked { color: var(--leaf); }
  .item-combobox__choice--linked svg { width: 18px; height: 18px; }
  .item-combobox__choice--new { padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--mint-soft); color: var(--leaf); font-size: var(--text-xs, 0.75rem); font-weight: 800; }
  [data-choice="linked"] .item-combobox__field .input { padding-right: 2.5rem; }
  [data-choice="new"] .item-combobox__field .input { padding-right: 4rem; }
}