/* The suggestion picker, shared by the train finder's station boxes and the
   flight tracker's aircraft type box. Loaded by both pages; picker.js knows
   nothing about either of them and neither does this.

   The .sp-wrap anchor is created by the script around the input, so with the
   script blocked none of this exists and the box is just a text field -- which
   still works, because the server resolves what is typed either way. */

.sp-wrap {
    position: relative;
}

.sp-list {
    position: absolute;
    /* Above a Leaflet map, which the aircraft type box hangs over. Leaflet's own
       panes run to 700 and its controls to 1000, and neither .ft-map-wrap nor
       .leaflet-container sets a z-index -- so they share this stacking context
       and anything lower than that gets painted under the tiles. It was 20,
       which was fine on the train finder, where there is no map. */
    z-index: 1100;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    min-width: 210px;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.sp-option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
}

/* One highlight for both the keyboard and the pointer, so arrowing down and
   hovering cannot end up looking like two different selections. */
.sp-option:hover,
.sp-option.sp-active {
    background: #e7f1ff;
}

.sp-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-code {
    flex: none;
    font: 600 12px/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace;
    color: var(--tf-muted, #6c757d);
}