/*
 * Token picker (A-07 Sites, A-13 Sites/Directors): a pill field (min-height 52px, radius 26px) of
 * sage tokens with × buttons and an "Add a Site…" input that filters a listbox of options.
 * Driven by the token-picker Stimulus controller; selections post as hidden inputs (name[]).
 * A token is as wide as its label + 6px + the × glyph (A-07 13px, A-29 / D-24 14px): the 20px
 * hover disc of the × overhangs the glyph, and on phones an invisible 44px target surrounds it.
 */
@layer components {
  .token-picker { position: relative; }

  .token-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 52px;
    padding: 8px 10px;
    border: 1.5px solid var(--color-input-border);
    border-radius: 26px;
    background: var(--color-bg);
    cursor: text;
  }
  .token-field:focus-within { border-color: var(--color-blue); }
  .token-picker.is-invalid .token-field { border: 2px solid var(--color-err); }

  .token {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px 0 12px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-2-200);
    color: var(--color-accent-2-900);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
  }

  .token__remove {
    position: relative;
    width: 20px;
    height: 20px;
    /* Takes the room of the glyph alone (1em), not of the disc. */
    margin-inline: calc((1em - 20px) / 2);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    font-size: 13px;
  }
  .token__remove:hover { background: color-mix(in srgb, var(--color-accent-2-900) 12%, transparent); }

  .token-input {
    flex: 1;
    min-width: 120px;
    height: 32px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 14px;
  }
  .token-input::placeholder { color: var(--color-neutral-700); opacity: 1; }
  .token-input:focus { outline: none; }

  .token-options {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 30;
    max-height: 264px;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    list-style: none;
    border-radius: var(--radius-row);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
  }

  .token-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .token-option:hover,
  .token-option.is-active,
  .token-option[aria-selected="true"] { background: var(--color-surface); }
  .token-option__hint { margin-left: auto; color: var(--color-neutral-700); font-size: 12.5px; font-weight: 400; }

  .token-options__empty {
    padding: 10px 12px;
    color: var(--color-neutral-700);
    font-size: 13.5px;
  }

  /* Phones: a 44px target around each × (the disc stays 20px). */
  @media (max-width: 767px) {
    .token__remove::before {
      content: "";
      position: absolute;
      inset: -12px;
      border-radius: 50%;
    }
  }
}