.combobox {
  position: relative;
}

.combobox__options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: var(--space-xs) 0 0;
  padding: var(--space-xs);
  list-style: none;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: var(--shadow-lg);
}

.combobox__option {
  padding: var(--space-sm) var(--space-smd);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-base);
  transition: background var(--dur) var(--ease-out);
}

.combobox__option:hover {
  background: var(--surface-hover);
}

.combobox__option[hidden] {
  display: none;
}

.combobox__option-name {
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Already marked present. Still listed — the person most likely to search for
   their own name is the one who tapped the link twice and is not sure the
   first tap worked — but not selectable, and saying so. */
.combobox__option--here {
  cursor: default;
  opacity: 0.6;
}

.combobox__option--here:hover {
  background: transparent;
}

.combobox__option-here {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-win);
  white-space: nowrap;
}