/* Combobox de catálogo — só busca. Criar registro é o chip "novo" no rótulo
   (inputs.css), nunca uma opção dentro da lista. A lista flutua como o picker
   do select, com a mesma sombra. */

.combo {
  position: relative;

  &.is-open .combo-list { display: block; }
}

/* position: fixed, não absolute: o combobox vive dentro de um <dialog> que
   rola, e um ancestral que recorta leva junto qualquer filho posicionado por
   absolute — z-index não escapa de recorte. Quem calcula a posição é o
   controller, que também reposiciona ao rolar e ao redimensionar. */
.combo-list {
  position: fixed; z-index: 100;
  margin: 0; padding: 4px; list-style: none;
  max-height: 40vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r); box-shadow: 0 8px 24px rgb(0 0 0 / .18);
  display: none;

  & li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 6px 8px 6px 12px; border-radius: var(--r); cursor: pointer; font-size: 14.5px;

    /* :hover para mouse, .is-active para as setas do teclado — a mesma pista */
    &:hover, &.is-active { background: var(--accent-soft); }
  }

  & .li-main { flex: 1; min-width: 0; }

  /* a linha resumida da entidade: telefone, nascimento, categoria */
  & .cmeta { font-size: 12px; color: var(--ink-muted); display: block; }

  & .combo-empty {
    color: var(--ink-faint); font-size: 13px; cursor: default; padding: 8px 12px;

    &:hover { background: none; }
  }
}