/* ==========================================================================
   CHOICES — the token / tag field
   --------------------------------------------------------------------------
   Load order on a page that has a tag field, after the other three:
     bootstrap.css → theme.css → style.css → choices.css

   WHY THIS FILE EXISTS
     The build uses Choices.js (https://github.com/Choices-js/Choices) for
     multi-value fields. It ships no jQuery, and it renders its own markup. This
     file is our skin for that markup, so the build drops the library in, loads
     this file instead of choices.min.css, and the field already looks right.

     That is why the selectors here are Choices' own names — .choices__inner,
     .choices__list--multiple, .choices__item, .choices__button, .choices__input.
     They are the library's names, not ours: the __ and -- shapes are exactly
     what the library emits, and a near-miss name would have to be rewritten at
     build time. Keeping them out of style.css is what keeps that one exception
     from reading as a naming rule.

     The design's markup mirrors the library's structure, so nothing changes
     when the real library takes over.

   Every value here is a var(--ap-*) from theme.css, same as style.css.
   ========================================================================== */

.choices { position: relative; }

.choices__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: .375rem;
  background: var(--ap-color-surface);
  border: 1px solid var(--ap-color-line-emphasis);
  border-radius: var(--ap-radius);
  padding: .4375rem .5rem;
}
/* The library wraps the items in a list inside the inner box. display:contents
   lets the chips take part in the inner box's own wrapping row. */
.choices__list--multiple { display: contents; }

.choices__list--multiple .choices__item {
  flex: 0 0 auto; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--ap-color-lime-tint);
  border: 1px solid var(--ap-color-lime-line);
  border-radius: 50rem;
  padding: .3125rem .625rem;
  font-size: var(--ap-fs-6); font-weight: 500; color: var(--ap-color-lime-ink);
}
/* The remove mark is the glyph itself, with no button surface behind it. */
.choices__button {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; padding: 0;
  color: var(--ap-color-lime-deep);
  font-size: var(--ap-fs-xs); line-height: 1; cursor: pointer;
}
.choices__button:hover { color: var(--ap-color-lime-ink); }

.choices__input {
  flex: 1 1 9.375rem; min-width: 9.375rem;
  border: none; outline: none; background: transparent;
  font-family: var(--ap-font-body); font-size: var(--ap-fs-6); color: var(--ap-color-ink);
  padding: .4375rem .375rem;
}
.choices__input::placeholder { color: var(--ap-color-ghost); }

/* Focus matches .form-control:focus in style.css §9 — the field is a form
   control, whatever draws it. */
.choices.is-focused .choices__inner { border-color: var(--ap-color-blue); box-shadow: 0 0 0 3px rgba(10,109,194,.16); }