/*
 * The search suggestions dropdown, in dark mode.
 *
 * THE BUG. Reported by the owner 2026-09-24: hovering a suggestion turned the row black behind text
 * that was already black. The panel is built with Tailwind's `bg-white`, which compiles to a LITERAL
 * `#fff` and therefore stays light in both themes. The rows hover with `hover:bg-neutral-100`, which
 * compiles to a TOKEN — `var(--color-neutral-100)` → `var(--color-grey-100)` — and this theme's dark
 * mode redefines the whole grey scale:
 *
 *     :root.tf-dark { --color-white:#000; --color-black:#fff; --color-grey-100:#171717; ... }
 *
 * So the panel stayed white, the hover went to #171717, and the inherited text stayed dark. One of
 * the two colours followed the theme and the other did not, which is the whole fault.
 *
 * THE DECISION. The panel is deliberately light in both themes — the search input above it is
 * `bg-white text-black` for the same reason. So the fix pins the dropdown to a light surface rather
 * than teaching it dark mode: the contrast is then correct by construction instead of by two
 * independent colour scales agreeing.
 *
 * WHY THIS IS CSS AND NOT A TEMPLATE CHANGE. There is no compiled Tailwind class for a hover colour
 * that does not follow the theme, and the Tailwind build CANNOT be run in this estate — vendor/ is
 * not in the clone and box5 has no node. This is the fourth file that exists for that reason.
 *
 * DELETE THIS FILE and its <css src> line the first time styles.css is genuinely rebuilt on a
 * machine with both vendor/ and node, and fix it at source in the template instead.
 */
html .tf-suggest-panel {
    background-color: #ffffff;
    color: #171717;
}

/* every interactive row in the panel, hovered or keyboard-selected */
html .tf-suggest-panel a:hover,
html .tf-suggest-panel button:hover,
html .tf-suggest-panel a:focus,
html .tf-suggest-panel button:focus,
html .tf-suggest-panel [aria-selected="true"] {
    background-color: #f1f1f1;
    color: #171717;
}

/* the price and any muted text keep their own weight but not their own colour scale */
html .tf-suggest-panel a:hover *,
html .tf-suggest-panel button:hover *,
html .tf-suggest-panel [aria-selected="true"] * {
    color: inherit;
}

/* the "See all N results" footer is the brand gold and must stay legible on it */
html .tf-suggest-panel .tf-suggest-all,
html .tf-suggest-panel .tf-suggest-all:hover {
    color: #ffffff;
}