/* Dropdown de autocomplete ancorado ao campo (sem CSS anchor experimental). */
section[role="field"]:has(> [role="autocomplete"]),
section[role="field"]:has(> .autocomplete_list) {
  position: relative;
}

.autocomplete_list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  max-height: min(16rem, 50vh);
  margin: 0.15rem 0 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  box-sizing: border-box;
  z-index: 1000;
  background-color: var(--pico-dropdown-background-color, var(--pico-background-color));
  border: 1px solid var(--pico-dropdown-border-color, var(--pico-muted-border-color));
  border-radius: var(--pico-border-radius);
  box-shadow: var(--pico-card-box-shadow, 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12));
}

.autocomplete_list_item {
  cursor: pointer;
  list-style: none;
  margin: 0;
  padding: calc(var(--pico-spacing) * 0.5) var(--pico-spacing);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autocomplete_list_item:hover,
.autocomplete_list_item:focus {
  background-color: var(--pico-dropdown-hover-background-color, var(--pico-primary-focus));
}