@layer components {
  .combobox { position: relative; min-width: 0; width: 100%; }
  .combobox::after { content: ""; position: absolute; right: 1rem; top: 50%; width: .45rem; height: .45rem; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-75%) rotate(45deg); pointer-events: none; }
  .combobox > input { padding-right: 2.5rem; }
  .combobox-options { position: absolute; z-index: 30; top: calc(100% + .4rem); left: 0; right: 0; max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; padding: .35rem; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); font-size: var(--font-selector); font-weight: 400; }
  .combobox-options.opens-above { top: auto; bottom: calc(100% + .4rem); }
  .combobox-options[hidden] { display: none; }
  .combobox-options [role="option"], .combobox-empty { min-height: 44px; padding: .65rem .75rem; border-radius: 8px; overflow-wrap: anywhere; }
  .combobox-options [role="option"] { cursor: pointer; }
  .combobox-options [aria-selected="true"] { font-weight: 700; }
  .combobox-options .is-active { background: var(--lilac-soft); color: var(--navy); }
  @media (hover: hover) and (pointer: fine) {
    .combobox-options [role="option"]:hover { background: var(--lilac-soft); color: var(--navy); }
  }
  .combobox-empty { color: var(--muted); }
}

/* One type size for native, enhanced, and remote suggestion controls. */
:root body :is(select, [role="combobox"], .combobox-options) {
  font-size: var(--font-selector);
  line-height: 1.5;
}
:root body :is(select, input[role="combobox"]) { min-height: 44px; padding-block: .625rem; }
@media (max-width: 650px) and (pointer: coarse) {
  :root { --font-selector: 1rem; }
}