/* Typeahead — minimal styles. Every color is a custom property, so you can
   restyle it entirely by redefining these on :root or on .ta-wrapper. */

.ta-wrapper {
  --ta-bg: #ffffff;
  --ta-fg: #16181d;
  --ta-muted: #6b7280;
  --ta-border: #d3d7de;
  --ta-active-bg: #eef2ff;
  --ta-active-fg: #1e2a5a;
  --ta-mark-fg: #0b3fa8;
  --ta-shadow: 0 6px 20px rgb(0 0 0 / 12%);
  --ta-radius: 8px;

  position: relative;
  display: block;
}

.ta-list {
  position: absolute;
  z-index: 50;
  inset-inline: 0;
  top: calc(100% + 4px);
  max-height: 16rem;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--ta-bg);
  color: var(--ta-fg);
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-radius);
  box-shadow: var(--ta-shadow);
}

.ta-list[hidden] { display: none; }

.ta-item {
  padding: 8px 10px;
  border-radius: calc(var(--ta-radius) - 4px);
  cursor: default;
  line-height: 1.35;
  /* Suggestions can be long; keep them on one readable line. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ta-item--active {
  background: var(--ta-active-bg);
  color: var(--ta-active-fg);
}

.ta-item mark {
  background: none;
  color: var(--ta-mark-fg);
  font-weight: 600;
}

.ta-item--active mark { color: inherit; }

.ta-empty {
  padding: 8px 10px;
  color: var(--ta-muted);
  font-style: italic;
}

/* Screen-reader-only live region announcing the result count. */
.ta-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .ta-wrapper {
    --ta-bg: #1b1e25;
    --ta-fg: #e7e9ee;
    --ta-muted: #9aa1ad;
    --ta-border: #363b45;
    --ta-active-bg: #2b3556;
    --ta-active-fg: #eaf0ff;
    --ta-mark-fg: #9fc0ff;
    --ta-shadow: 0 6px 20px rgb(0 0 0 / 45%);
  }
}