/* Multi-select chip picker. Visual tokens kept in sync with typeahead.css.
   Selectors are prefixed with `.chip-picker` so `.field input { ... }`
   from forms.css cannot override the inline `.chip-search` styling. */
.chip-picker { position: relative; }
.chip-picker .chip-area {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  padding: .35rem .45rem; min-height: 42px;
  border: 1px solid var(--c-border); border-radius: 8px;
  background: var(--c-surface);
  transition: border-color .12s, box-shadow .12s;
}
.chip-picker .chip-area:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(30,64,175,.15);
}
.chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .2rem .2rem .6rem;
  background: rgba(30,64,175,.1); color: var(--c-accent);
  border-radius: 999px; font-size: .82rem; font-weight: 500;
  animation: chip-in .15s ease-out;
}
@keyframes chip-in { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.chip-label { line-height: 1.2; }
.chip-remove {
  border: 0; background: transparent; color: inherit;
  width: 20px; height: 20px; border-radius: 50%;
  cursor: pointer; line-height: 1; font-size: .95rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.chip-remove:hover { background: var(--c-error); color: white; }
.chip-picker .chip-search,
.field .chip-picker .chip-search {
  flex: 1; min-width: 140px; width: auto;
  border: 0; outline: 0; padding: .25rem .35rem;
  background: transparent; font-size: .9rem; font-family: inherit; color: var(--c-text);
  border-radius: 0; box-shadow: none;
}
.chip-picker .chip-search:focus { box-shadow: none; outline: 0; }
.chip-picker .chip-search::placeholder { color: var(--c-muted); }

/* ── shared dropdown styling (must mirror typeahead-dropdown) ────── */
.chip-dropdown[hidden] { display: none; }
.chip-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 100;
  max-height: 300px; overflow-y: auto;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 8px; box-shadow: 0 12px 28px rgba(15,23,42,.15);
  padding: .3rem;
}
.chip-dropdown .chip-item {
  padding: .5rem .7rem; border-radius: 5px; cursor: pointer; font-size: .88rem;
}
.chip-dropdown .chip-item:hover,
.chip-dropdown .chip-item.active { background: #f1f5f9; color: var(--c-accent); }
.chip-dropdown .chip-empty { padding: .55rem .7rem; color: var(--c-muted); font-size: .85rem; }