.ui-search-field {
    min-width: 0;
    margin-bottom: 0;
}
.ui-search {
    --search-height: var(--toolbar-control-height, 2.625rem);
    --search-clear-space: 2.5rem;
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    color: var(--bs-secondary-color);
}
.ui-search--sm,
.ui-toolbar .ui-search {
    --search-height: var(--toolbar-control-height, 2.25rem);
}
.ui-search .ui-search-input {
    width: 100%;
    min-width: 0;
    min-height: var(--search-height);
    padding-inline: 2.35rem 0.75rem !important;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--sp-control-radius, 0.5rem);
    background: var(--sp-search-surface, var(--sp-color-surface)) !important;
    color: var(--bs-body-color);
    font-size: 0.875rem;
    line-height: 1.5;
    transition: var(--sp-motion-transition-control);
}
/* Empty fields use the full text area; only a visible clear action needs room. */
.ui-search:has(.ui-search-clear:not([hidden])) .ui-search-input {
    padding-inline-end: var(--search-clear-space) !important;
}
.ui-search--sm .ui-search-input {
    font-size: 0.8125rem;
}
.ui-search-input::-webkit-search-cancel-button {
    appearance: none;
}
.ui-search-input:hover:not(:disabled):not(:focus) {
    border-color: var(--bs-secondary-color);
}
.ui-search .ui-search-input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18);
}
.ui-search .ui-search-input:disabled {
    background: var(--bs-tertiary-bg) !important;
    cursor: not-allowed;
    opacity: 0.7;
}
.ui-search .ui-search-input[readonly] {
    background: var(--bs-tertiary-bg) !important;
}
.ui-search .ui-search-input.is-invalid {
    border-color: var(--bs-danger);
}
.ui-search-field .invalid-feedback {
    color: var(--sp-color-danger-text);
}
.ui-search-icon {
    position: absolute;
    inset-inline-start: 0.75rem;
    display: flex;
    pointer-events: none;
    z-index: 1;
}
.ui-search-icon svg {
    width: 1rem;
    height: 1rem;
}
.ui-search:focus-within .ui-search-field .invalid-feedback {
    color: var(--sp-color-danger-text);
}
.ui-search-icon {
    color: var(--bs-primary);
}
.ui-search-clear {
    position: absolute;
    inset-inline-end: 0.2rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0.4rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--bs-secondary-color);
    cursor: pointer;
    animation: var(--sp-motion-swap-in);
    transition: var(--sp-motion-transition-control);
}
.ui-search-clear[hidden] {
    display: none;
}
.ui-search-clear svg {
    width: 1rem;
    height: 1rem;
}
.ui-search-clear:hover {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}
.ui-search-clear:focus-visible,
.ui-search-retry:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}
.ui-search-progress {
    position: absolute;
    inset-inline-start: 0.75rem;
    display: flex;
    opacity: 0;
    pointer-events: none;
}
.ui-search[data-loading="true"] .ui-search-icon {
    opacity: 0;
}
.ui-search[data-loading="true"] .ui-search-progress {
    opacity: 1;
    /* Quick searches finish before the spinner appears. */
    transition: opacity var(--sp-motion-duration-fast) var(--sp-motion-ease-standard) var(--sp-motion-duration-base);
}
.ui-search-feedback {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}
.ui-search-retry {
    border: 0;
    background: transparent;
    color: var(--bs-link-color);
    text-decoration: underline;
}
.ui-search-match {
    padding: 0;
    border-radius: 0.125rem;
    color: var(--sp-color-warning-text);
    background: var(--sp-color-warning-soft);
    box-shadow: inset 0 -1px var(--sp-color-warning-border);
}
.ui-search-empty {
    padding: 1rem;
    color: var(--bs-secondary-color);
}
@media (pointer: coarse) {
    .ui-search,
    .ui-search--sm,
    .ui-toolbar .ui-search {
        --search-height: 2.75rem;
        --search-clear-space: 3rem;
    }
    .ui-search-clear {
        width: 2.75rem;
        height: 2.75rem;
        inset-inline-end: 0;
    }
    .ui-search .ui-search-input {
        font-size: 1rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ui-search-progress .spinner-border {
        border-style: dotted;
        border-right-color: currentColor;
    }
}
@media (forced-colors: active) {
    .ui-search .ui-search-input:focus,
    .ui-search-match {
        outline: 2px solid Highlight;
    }
    .ui-search-clear {
        color: ButtonText;
    }
}
.global-search-heading {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    padding: 1.25rem 1.25rem 0.75rem;
}
.global-search-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.35fr);
    align-items: end;
    gap: 0.75rem;
    padding: 0.5rem 1.25rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.global-search-controls > .ui-field {
    margin: 0;
}
.global-search-status {
    grid-column: 1 / -1;
    margin: 0;
    min-height: 1.3em;
}
.global-search-results {
    min-height: 15rem;
    padding: 0.5rem;
}
.global-search-group {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--bs-secondary-color);
}
.global-search-group span {
    font-variant-numeric: tabular-nums;
}
.global-search-result {
    text-decoration: none;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    padding: 0.7rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--sp-control-radius);
    text-align: start;
    background: transparent;
    color: var(--bs-body-color);
    transition: var(--sp-motion-transition-control);
}
.global-search-result:hover,
.global-search-result:focus-visible {
    background: var(--bs-tertiary-bg);
}
.global-search-result:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}
.global-search-result strong,
.global-search-result small {
    display: block;
    overflow-wrap: anywhere;
}
.global-search-result small {
    color: var(--bs-secondary-color);
}
.global-search-symbol {
    display: grid;
    place-items: center;
    flex: 0 0 2rem;
    height: 2rem;
    border-radius: 0.4rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.7rem;
    font-weight: 600;
}
.global-search-symbol svg {
    width: 1rem;
    height: 1rem;
}
.global-search-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}
/* Touch devices have no arrow/Enter/Esc keys to describe. */
@media (hover: none) and (pointer: coarse) {
    .global-search-footer {
        display: none;
    }
}
/* The phone sheet keeps its chrome short so results stay visible above the
   on-screen keyboard; the description remains the dialog's accessible
   description. */
@media (max-width: 575.98px) {
    .global-search-heading {
        align-items: center;
        padding: 0.75rem 1rem 0.25rem;
    }
    #global-search-description {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .global-search-controls {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
        padding: 0.5rem 1rem 0.75rem;
    }
}
[data-ui-search-options] [role="option"][aria-selected="true"] {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
    background: var(--bs-tertiary-bg);
}
.ui-search-native {
    min-width: 0;
}
.ui-search.is-filled:not(:focus-within) .ui-search-icon {
    color: var(--bs-body-color);
}
.ui-autocomplete-option[aria-selected="true"] {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
    background: var(--bs-tertiary-bg);
}
/* Hosts style the popup frame (position, max-height, border); the listbox
   inside it owns scrolling so the scroll region is the combobox popup that
   aria-activedescendant keyboard navigation drives. */
.ui-autocomplete-popup {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ui-autocomplete-popup > .ui-search-retry {
    align-self: flex-start;
}
.ui-autocomplete-listbox {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Default suggestion presentation for hosts that keep UiAutocomplete's own list and
   option classes: a bounded, scrolling list in the flow below the input, so the
   controls after it stay reachable while it is open instead of being covered or
   pushed off screen by an unbounded list of native buttons. */
.ui-autocomplete-popup.autocomplete-list {
    max-height: min(18rem, 50dvh);
    margin-top: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--sp-color-border);
    border-radius: var(--sp-radius-md);
    background: var(--sp-color-surface-raised);
    color: var(--sp-color-ink);
    box-shadow: var(--sp-shadow-md);
}
.ui-autocomplete-option.autocomplete-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.375rem 0.625rem;
    border: 0;
    border-radius: var(--sp-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
}
.ui-autocomplete-option.autocomplete-option:hover {
    background: var(--sp-color-surface-muted);
}
.autocomplete-list > .autocomplete-empty,
.autocomplete-list > .autocomplete-more-results {
    padding: 0.5rem 0.625rem;
    color: var(--sp-color-ink-muted);
}
@media (max-width: 767.98px), (pointer: coarse) {
    .ui-autocomplete-option.autocomplete-option {
        min-height: 2.75rem;
    }
}