/* ============================================
   xm-autocomplete — filtering select for XmField (Story 2.4).

   Same composition as xm-select: XmField (chrome) + xm-overlay (anchored
   listbox). This file styles ONLY the bespoke parts — the text-input control
   row + chevron, the option rows + match highlight, and the inline no-match
   empty-state. Positioning / elevation of the panel surface is owned by
   xm-overlay.

   Surface & ink (AD-13): control + panel ride the inverse-surface card tier →
   inverse-on-surface ink, on-surface-variant placeholder. The SELECTED option
   tints coral primary-container + on-primary-container ink. The match highlight
   carries coral ink AND an underline so the cue survives grayscale — color is
   never the sole carrier (NFR-15). Coral = selection / match, never severity
   (AD-11).

   BEM block: `autocomplete`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
   ============================================ */

/* ---------- Control row — text input + chevron in the field wrapper ---------- */
.autocomplete__control {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
}

/* The native <input> is already transparent / full-bleed via the base
   `.field__control input` rule; here only the trailing chevron needs room. */
.autocomplete__input {
  flex: 1;
  min-width: 0;
}

.autocomplete__chevron {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: var(--s-3);
  color: var(--md-sys-color-inverse-on-surface);
  transition: transform var(--md-sys-motion-duration-short3)
    var(--md-sys-motion-easing-standard);
}
.autocomplete__chevron--open {
  transform: rotate(180deg);
}

/* ---------- Listbox panel content (inside the overlay) ---------- */
.autocomplete__listbox {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-0-5);
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--xm-scrollbar-thumb-inverse) transparent;
}
.autocomplete__listbox::-webkit-scrollbar {
  width: var(--s-scrollbar-w);
}
.autocomplete__listbox::-webkit-scrollbar-track {
  background: transparent;
}
.autocomplete__listbox::-webkit-scrollbar-thumb {
  background: var(--xm-scrollbar-thumb-inverse);
  border-radius: var(--md-sys-shape-corner-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
.autocomplete__listbox::-webkit-scrollbar-thumb:hover {
  background: var(--xm-scrollbar-thumb-inverse-hover);
  background-clip: content-box;
}

.autocomplete__option {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--md-sys-color-inverse-on-surface);
  font:
    var(--md-sys-typescale-body-medium-weight)
    var(--md-sys-typescale-body-medium-size) /
    var(--md-sys-typescale-body-medium-line-height)
    var(--md-sys-typescale-body-medium-font);
  cursor: pointer;
  user-select: none;
}
.autocomplete__option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.autocomplete__option-check {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--md-sys-color-primary);
}

/* Match highlight — coral ink + underline (dual cue, NFR-15). Background stays
   transparent so it reads on both the panel ink and the selected coral tint. */
.autocomplete__mark {
  background: transparent;
  color: var(--md-sys-color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Active (keyboard / hover) — MD3 state layer over the panel ink. */
.autocomplete__option--active {
  background: color-mix(
    in oklab,
    var(--md-sys-color-inverse-on-surface)
      var(--md-sys-state-hover-state-layer-opacity),
    transparent
  );
}

/* Selected — coral primary-container tint + paired ink (AD-13). */
.autocomplete__option--selected {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.autocomplete__option--selected .autocomplete__option-check {
  color: var(--md-sys-color-on-primary-container);
}
.autocomplete__option--selected .autocomplete__mark {
  color: var(--md-sys-color-on-primary-container);
}
.autocomplete__option--selected.autocomplete__option--active {
  background: color-mix(
    in oklab,
    var(--md-sys-color-on-primary-container)
      var(--md-sys-state-hover-state-layer-opacity),
    var(--md-sys-color-primary-container)
  );
}

.autocomplete__option--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- No-match empty-state (inline; → xm-empty-state in Epic 4) ---------- */
.autocomplete__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-1);
  padding: var(--s-5) var(--s-4);
}
.autocomplete__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-1);
  color: var(--xm-color-inverse-on-surface-muted);
}
.autocomplete__empty-title {
  margin: 0;
  color: var(--md-sys-color-inverse-on-surface);
  font:
    var(--md-sys-typescale-title-small-weight)
    var(--md-sys-typescale-title-small-size) /
    var(--md-sys-typescale-title-small-line-height)
    var(--md-sys-typescale-title-small-font);
}
.autocomplete__empty-copy {
  margin: 0;
  color: var(--xm-color-inverse-on-surface-muted);
  font:
    var(--md-sys-typescale-body-small-weight)
    var(--md-sys-typescale-body-small-size) /
    var(--md-sys-typescale-body-small-line-height)
    var(--md-sys-typescale-body-small-font);
}