/* Airport autocomplete — shared by the board and the alerts page.
 *
 * This lived inline in feed.html only, which is why /alerts still asked people
 * to type a three-letter code: the component existed but the page it was most
 * needed on couldn't render it. One copy now, loaded wherever data-airport is.
 */
/* Airport autocomplete */
.acfield { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-1); }
.acchip { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--mono);
  font-size: var(--text-xs); background: color-mix(in oklch, var(--amber) 14%, transparent);
  border: 1px solid color-mix(in oklch, var(--amber) 40%, transparent);
  color: var(--ink); border-radius: 999px; padding: .2rem .5rem; }
.acchip b { color: var(--amber); }
.acchip button { background: 0; border: 0; color: var(--ink-muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 0 0 .1rem; min-width: 20px; }
.acbox { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 280px;
  max-height: 300px; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.acitem { display: flex; align-items: baseline; gap: var(--space-2); padding: .55rem .7rem;
  cursor: pointer; }
.acitem.on, .acitem:hover { background: color-mix(in oklch, var(--amber) 12%, transparent); }
.accode { font-family: var(--mono); font-size: var(--text-xs); color: var(--amber);
  font-weight: 700; min-width: 2.6em; }
.acname { color: var(--ink); }
.accountry { color: var(--ink-muted); font-size: var(--text-sm); margin-left: auto; }
@media (max-width: 640px) { .acitem { min-height: 44px; align-items: center; } }