/* Search autocomplete — replaces jQuery UI's bundled theme stylesheet.
 *
 * The site loaded a jQuery UI theme from code.jquery.com to style one widget:
 * ui-lightness (36.9 KB) on the modern layout, base on the legacy one. Only 14
 * of those rules touched the autocomplete; the rest themed a datepicker, dialog,
 * slider, tabs, accordion and progressbar this product does not use. The theme
 * also referenced nine PNG sprites under its own images/ directory, every one of
 * which our CSP blocks (img-src allows 'self' data: blob: and the map hosts, not
 * code.jquery.com), so each page load fired a console error for an image that
 * could never arrive. And ui-lightness is orange (#f6a828, #ffe45c) sitting
 * under a navy-and-warm-paper design system.
 *
 * On the modern layout it was redundant as well: modern-ui.css already styles
 * this widget completely. So the appearance rules below are deliberately kept at
 * single-class specificity and this file is loaded *before* modern-ui.css —
 * where that stylesheet is present it wins, and where it is absent (layout.html,
 * which loads only style.css/pages.css) these rules are what the dropdown gets.
 *
 * The structural block is not optional. It is taken from the jQuery UI
 * stylesheet rather than guessed, and `.ui-helper-hidden-accessible` in
 * particular is load-bearing: jQuery UI announces result counts through that
 * live region, and without the rule the announcement renders visibly on screen.
 *
 * Nothing here loads an image.
 */

/* ── Structure jQuery UI depends on ────────────────────────────────────────── */

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.ui-front { z-index: 100; }

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: 0;
}

.ui-menu-item { margin: 0; cursor: pointer; list-style: none; }

/* ── Appearance, for layouts without modern-ui.css ─────────────────────────── */
/* Literal fallbacks mirror tokens.css exactly (--surface-raised is #ffffff);
   layout.html does not load tokens.css, and it cannot simply be added there
   because style.css defines four of the same variable names with different
   values. */

.ui-autocomplete {
    background: var(--surface-raised, #ffffff);
    border: 1px solid var(--border-hairline, #e9e2d9);
    border-radius: 10px;
    box-shadow: var(--shadow-lg, 0 12px 24px -6px rgba(26, 23, 20, 0.10));
    margin-top: 8px;
    padding: 0.3rem;
    /* Ten results plus padding; a longer list scrolls rather than running off
       the bottom of a phone screen. */
    max-height: 22rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* The default renderer emits <li><div>, and app.js's custom one emits
   <li><div class="ac-row">. jQuery UI's Menu widget adds .ui-menu-item-wrapper
   to whichever it finds, so both shapes are covered. */
.ui-menu-item-wrapper {
    position: relative;
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: 6px;
    font-size: 0.92rem;
    line-height: 1.35;
    color: var(--text-body, #45403a);
    /* Addresses are long; wrap rather than clip mid-street. */
    overflow-wrap: anywhere;
}

/* jQuery UI moves .ui-state-active as the user arrows through the list and also
   applies it on hover, so pointer and keyboard land on the same state — the
   keyboard path is never the dimmer one. */
.ui-state-active,
.ui-menu-item:hover > .ui-menu-item-wrapper {
    background: var(--brand-subtle, #f4f7fa);
    color: var(--text-strong, #1a1714);
}

/* The "no matches" row reports a state; it is not selectable. It is also the
   one message a user reads when their search fails, so it is held to the same
   contrast bar as everything else -- it was previously an inline slate at
   2.56:1 on white. --text-muted is 4.81:1 and still reads as secondary. */
.ui-autocomplete-no-match { cursor: default; }
.ac-no-match {
    color: var(--text-muted, #797166);
    font-style: italic;
    font-size: 0.85rem;
}
.ui-autocomplete-no-match:hover > .ui-menu-item-wrapper,
.ui-autocomplete-no-match > .ui-state-active {
    background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
    .ui-menu-item-wrapper { transition: background-color 0.12s ease; }
}