/* ============================================================================
 * Theme: crisp (Pro) — Linear-inspired
 *
 * Linear's signature: very dense, compact, mostly monochrome UI with the
 * indigo/violet accent used sparingly (focus rings, selected borders,
 * small chip accents). The field is short (40px) and the result rows are
 * flat list items with no left bar accent — selection is communicated by
 * a subtle background change only.
 */

.fast-fuzzy-search--crisp {
    --ffs-border-color: var(--ffs-color-gray-200);
    --ffs-scrollbar-thumb: var(--ffs-color-gray-400);
    --ffs-scrollbar-thumb-hover: var(--ffs-color-gray-500);
    --ffs-kbd-bg: var(--ffs-color-white);
    --ffs-kbd-border: var(--ffs-color-gray-300);

    --ffs-press-scale: 0.985;
    --ffs-active-scale: 0.97;
    --ffs-highlight-bg: var(--ffs-color-primary-50);
    --ffs-highlight-fg: var(--ffs-color-primary-800);

    --ffs-jump-pill-bg: var(--ffs-color-gray-100);
    --ffs-jump-pill-fg: var(--ffs-color-gray-700);
    --ffs-badge-bg: var(--ffs-color-primary-100);
    --ffs-badge-fg: var(--ffs-color-primary-700);
    --ffs-empty-cta-bg: var(--ffs-color-white);
    --ffs-empty-cta-border: var(--ffs-color-gray-300);
    --ffs-empty-cta-fg: var(--ffs-color-gray-900);

    @media (prefers-reduced-motion: reduce) {
        --ffs-press-scale: 1;
        --ffs-active-scale: 1;
    }
}

/* ---- Field ----
 *
 * Linear's signature compact field: 40px tall, 6px radius, white
 * surface on a barely-visible gray border. No drop shadow on the
 * default state — the screenshot shows the field sitting flush with
 * the panel with just a 1px hairline to define the edge.
 */
.fast-fuzzy-search--crisp .fast-fuzzy-search__field {
    height: 40px;
    background: var(--ffs-color-white);
    border: 1px solid var(--ffs-border-color);
    border-radius: 6px;
    color: var(--ffs-color-gray-900);
    box-shadow: var(--ffs-shadow-sm);
    transition: border-color var(--ffs-duration-fast) var(--ffs-easing),
        box-shadow var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--crisp[data-has-query="true"] .fast-fuzzy-search__field {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__field:focus-within {}

/* ---- Input ---- */
.fast-fuzzy-search--crisp .fast-fuzzy-search__input,
.fast-fuzzy-search--crisp .fast-fuzzy-search__input::placeholder {
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: var(--ffs-color-gray-900);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__input::placeholder {
    color: var(--ffs-color-gray-500);
    transition: color var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__field:focus-within .fast-fuzzy-search__input::placeholder {
    color: var(--ffs-color-gray-400);
}

/* ---- Icon ----
 *
 * Dark gray default (NOT primary). Linear's magnifier icon is rendered
 * in a near-black color in the screenshots. The primary color stays
 * reserved for: focus ring, active filter chip, view-all link, and
 * notification badges.
 */
.fast-fuzzy-search--crisp .fast-fuzzy-search__icon-frame {
    background-color: transparent;
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__icon,
.fast-fuzzy-search--crisp .fast-fuzzy-search__icon-frame {
    color: var(--ffs-color-gray-700);
    transition: color var(--ffs-duration-fast) var(--ffs-easing);

}

.fast-fuzzy-search--crisp .fast-fuzzy-search__field:focus-within .fast-fuzzy-search__icon,
.fast-fuzzy-search--crisp .fast-fuzzy-search__field:focus-within .fast-fuzzy-search__icon-frame {
    color: var(--ffs-color-gray-900);
}

/* ---- Clear button ----
 *
 * Linear's "x" button is plain gray — not primary tinted. The screenshots
 * show a subtle gray surface that lifts slightly on hover.
 */
.fast-fuzzy-search--crisp .fast-fuzzy-search__clear button {
    background: var(--ffs-color-gray-100);
    color: var(--ffs-color-gray-700);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
        color var(--ffs-duration-fast) var(--ffs-easing),
        transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__clear button:hover {
    background: var(--ffs-color-gray-200);
    color: var(--ffs-color-gray-900);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__clear button:active {
    transform: scale(var(--ffs-active-scale));
}

/* ---- Post-type bar ---- */
.fast-fuzzy-search--crisp .fast-fuzzy-search__post-types {
    background: var(--ffs-color-gray-50);
    border-bottom-color: var(--ffs-border-color);
    color: var(--ffs-color-gray-900);
    padding: var(--ffs-space-2) var(--ffs-space-3);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__chip-list {
    gap: var(--ffs-space-1);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__chip-button {
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid var(--ffs-border-color);
    background: var(--ffs-color-white);
    color: var(--ffs-color-gray-700);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
        color var(--ffs-duration-fast) var(--ffs-easing),
        border-color var(--ffs-duration-fast) var(--ffs-easing),
        transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__chip-button:hover {
    background: var(--ffs-color-gray-100);
    color: var(--ffs-color-gray-900);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__chip-button:active {
    transform: scale(var(--ffs-press-scale));
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__chip-button[aria-selected="true"] {
    border-color: var(--ffs-color-gray-900);
    background: var(--ffs-color-gray-900);
    color: var(--ffs-color-white);
    box-shadow: none;
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__chip-button[aria-selected="true"]:hover {
    background: var(--ffs-color-black);
    border-color: var(--ffs-color-black);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__chip-button[disabled],
.fast-fuzzy-search--crisp .fast-fuzzy-search__chip-button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Context strip ---- */
.fast-fuzzy-search--crisp .fast-fuzzy-search__context {
    color: var(--ffs-color-gray-900);
    background: var(--ffs-color-gray-50);
    border-bottom: 1px solid var(--ffs-border-color);
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.02);
}

/* ---- Panel ---- */
.fast-fuzzy-search--crisp .fast-fuzzy-search__panel {
    background: var(--ffs-color-white);
    border: 1px solid var(--ffs-border-color);
    border-top: 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    font-size: 13px;
    line-height: 18px;
    color: var(--ffs-color-gray-900);
    box-shadow: var(--ffs-shadow-sm);
    transition: box-shadow var(--ffs-duration) var(--ffs-easing);
    overflow: hidden;
}

/* Slight lift when the panel is open and the user is interacting.
 * Linear uses a plain gray shadow — no primary tint.
 */
.fast-fuzzy-search--crisp .fast-fuzzy-search__field:focus-within+.fast-fuzzy-search__panel,
.fast-fuzzy-search--crisp .fast-fuzzy-search__panel:has(.fast-fuzzy-search__result-link:hover),
.fast-fuzzy-search--crisp .fast-fuzzy-search__panel:has(.fast-fuzzy-search__result-link[aria-selected="true"]) {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ---- Result link ----
 *
 * Linear's flat list pattern: no border-radius, no per-row card, no
 * left bar accent, NO inset ring. Selection is communicated by a
 * plain gray background change only — no primary color in the row.
 * Padding is tight (8/12px) to match Linear's dense information
 * density. No press scale, no icon nudge — those don't exist in
 * the Linear screenshots.
 */
.fast-fuzzy-search--crisp .fast-fuzzy-search__result-link {
    color: var(--ffs-color-gray-900);
    border: 0;
    border-radius: 0;
    padding: var(--ffs-space-2) var(--ffs-space-3);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing);
    animation: ffs-crisp-row-in var(--ffs-duration) var(--ffs-easing) both;
    animation-delay: calc(var(--ffs-i, 0) * 18ms);
}

@keyframes ffs-crisp-row-in {
    from {
        opacity: 0;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__result-link:hover {
    background: var(--ffs-color-gray-100);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__result-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--ffs-color-primary-500);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__result-link[aria-selected="true"] {
    background: var(--ffs-color-gray-100);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__result-link[aria-selected="true"]:hover {
    background: var(--ffs-color-gray-200);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__result-link[disabled],
.fast-fuzzy-search--crisp .fast-fuzzy-search__result-link[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Result icon + image ---- */
.fast-fuzzy-search--crisp .fast-fuzzy-search__result-icon {
    border: 1px solid var(--ffs-color-gray-200);
    color: var(--ffs-color-gray-600);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
        color var(--ffs-duration-fast) var(--ffs-easing),
        transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__result-icon,
.fast-fuzzy-search--crisp .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-icon {
    background: var(--ffs-color-gray-900);
    color: var(--ffs-color-white);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__result-image {
    border-radius: 4px;
}

/* ---- Result chip ---- */
.fast-fuzzy-search--crisp .fast-fuzzy-search__chip {
    color: var(--ffs-color-gray-700);
    border: 1px solid var(--ffs-color-gray-200);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
        color var(--ffs-duration-fast) var(--ffs-easing);
    padding: 4px 8px;
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__chip,
.fast-fuzzy-search--crisp .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__chip {
    background: var(--ffs-color-gray-900);
    color: var(--ffs-color-white);
}

/* ---- Empty state ---- */
.fast-fuzzy-search--crisp .fast-fuzzy-search__empty {
    background: transparent;
    color: var(--ffs-color-gray-700);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__empty-title {
    color: var(--ffs-color-gray-900);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__empty-description {
    color: var(--ffs-color-gray-600);
}

/* Empty state CTA — the "Clear search" outlined pill button that
 * Linear renders below the empty-state copy. White surface on a
 * gray-300 border, dark text, lifts slightly on hover.
 */
.fast-fuzzy-search--crisp .fast-fuzzy-search__empty button,
.fast-fuzzy-search--crisp .fast-fuzzy-search__empty a {
    background: var(--ffs-empty-cta-bg);
    color: var(--ffs-empty-cta-fg);
    border: 1px solid var(--ffs-empty-cta-border);
    border-radius: var(--ffs-radius-pill);
    padding: 6px 14px;
    box-shadow: var(--ffs-shadow-sm);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
        border-color var(--ffs-duration-fast) var(--ffs-easing),
        box-shadow var(--ffs-duration-fast) var(--ffs-easing),
        transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__empty button:hover,
.fast-fuzzy-search--crisp .fast-fuzzy-search__empty a:hover {
    background: var(--ffs-color-gray-50);
    border-color: var(--ffs-color-gray-400);
    box-shadow:
        var(--ffs-shadow-sm),
        0 0 0 1px rgba(0, 0, 0, 0.02);
    transform: translateY(-0.5px);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__empty button:focus-visible,
.fast-fuzzy-search--crisp .fast-fuzzy-search__empty a:focus-visible {
    outline: 0;
    border-color: var(--ffs-color-gray-900);
    box-shadow:
        var(--ffs-shadow-sm),
        0 0 0 3px rgba(0, 0, 0, 0.06);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__empty button:active,
.fast-fuzzy-search--crisp .fast-fuzzy-search__empty a:active {
    background: var(--ffs-color-gray-100);
    transform: translateY(0) scale(var(--ffs-press-scale));
}

/* ---- Keyboard footer ----
 *
 * Linear's kbd pattern: white background, thin gray border, very small
 * text. The footer sits on a gray-50 background. The 1px border + 2px
 * bottom border (defined in base style.css) gives the key a subtle
 * "physical" feel.
 */
.fast-fuzzy-search--crisp .fast-fuzzy-search__keyboard-shortcuts {
    background: var(--ffs-color-gray-50);
    border-top-color: var(--ffs-border-color);
    color: var(--ffs-color-gray-700);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__kbd {
    background: var(--ffs-color-white);
    border-color: var(--ffs-color-gray-300);
    color: var(--ffs-color-gray-900);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
        border-color var(--ffs-duration-fast) var(--ffs-easing),
        transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__keyboard-shortcuts:hover .fast-fuzzy-search__kbd {
    border-color: var(--ffs-color-gray-400);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__kbd:hover {
    background: var(--ffs-color-gray-100);
    transform: translateY(-0.5px);
}

/* ---- View all button ----
 *
 * Linear's view-all is a flat text link — no wash layer, no extra
 * pseudo-element. Just a gray-50 background with primary-colored
 * text that deepens on hover.
 */
.fast-fuzzy-search--crisp .fast-fuzzy-search__view-all {
    font-size: 13px;
    background: var(--ffs-color-gray-50);
    color: var(--ffs-color-gray-900);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
        color var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__view-all:hover {
    background: var(--ffs-color-gray-100);
    color: var(--ffs-color-primary-700);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__view-all-icon {
    transition: transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__view-all:hover .fast-fuzzy-search__view-all-icon {
    transform: translateX(3px);
}

/* ---- Panel close button ---- */
.fast-fuzzy-search__panel-close--crisp {
    background: var(--ffs-color-white);
    color: var(--ffs-color-gray-900);
    border: 1px solid var(--ffs-border-color);
    border-radius: var(--ffs-radius-pill);
    box-shadow: var(--ffs-shadow-sm);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
        color var(--ffs-duration-fast) var(--ffs-easing),
        border-color var(--ffs-duration-fast) var(--ffs-easing),
        box-shadow var(--ffs-duration-fast) var(--ffs-easing),
        transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__panel-close--crisp:hover,
.fast-fuzzy-search__panel-close--crisp:focus {
    background: var(--ffs-color-gray-100);
    border-color: var(--ffs-color-gray-300);
    box-shadow:
        var(--ffs-shadow-sm),
        0 0 0 1px rgba(0, 0, 0, 0.02);
}

.fast-fuzzy-search__panel-close--crisp:active {
    transform: scale(var(--ffs-active-scale));
}

/* ---- Trigger buttons (button.php + icon-button.php) ----
 *
 * Linear-style outlined button: 1px subtle gray border on a near-white
 * surface, primary-500 border on hover, primary halo on focus. The
 * icon button is pill, the full button is 6px (matching the field's
 * tight radius). Hover lifts the surface to white and tints the
 * border with the primary accent.
 */
.fast-fuzzy-search__icon-button.fast-fuzzy-search--crisp,
.fast-fuzzy-search__button.fast-fuzzy-search--crisp {
    background: var(--ffs-color-white);
    color: var(--ffs-color-gray-900);
    border: 1px solid var(--ffs-border-color) !important;
    box-shadow: var(--ffs-shadow-sm);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
        border-color var(--ffs-duration-fast) var(--ffs-easing),
        box-shadow var(--ffs-duration-fast) var(--ffs-easing),
        transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__icon-button.fast-fuzzy-search--crisp {
    border-radius: var(--ffs-radius-pill);
}

.fast-fuzzy-search__button.fast-fuzzy-search--crisp {
    border-radius: 6px;
    padding: 0 var(--ffs-space-3);
}

.fast-fuzzy-search__icon-button.fast-fuzzy-search--crisp:hover,
.fast-fuzzy-search__button.fast-fuzzy-search--crisp:hover {
    background: var(--ffs-color-white);
    border-color: var(--ffs-color-gray-400);
    box-shadow:
        var(--ffs-shadow-sm),
        0 0 0 1px rgba(0, 0, 0, 0.02);
}


.fast-fuzzy-search__icon-button.fast-fuzzy-search--crisp:focus-visible,
.fast-fuzzy-search__button.fast-fuzzy-search--crisp:focus-visible {
    border-color: var(--ffs-color-primary-500);
    box-shadow:
        var(--ffs-shadow-sm),
        0 0 0 3px rgba(var(--ffs-color-primary-rgb), 0.15);
}

.fast-fuzzy-search__icon-button.fast-fuzzy-search--crisp[disabled],
.fast-fuzzy-search__icon-button.fast-fuzzy-search--crisp[aria-disabled="true"],
.fast-fuzzy-search__button.fast-fuzzy-search--crisp[disabled],
.fast-fuzzy-search__button.fast-fuzzy-search--crisp[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- CTA button ----
 *
 * Linear's primary action pattern is OUTLINED, not filled. White
 * surface on a gray-300 border, dark text, soft drop shadow. The
 * pill radius matches Linear's button style. On hover the border
 * darkens to gray-900 and the surface lifts to gray-50. Focus ring
 * is a 3px neutral halo (Linear uses neutral focus, not primary).
 */
.fast-fuzzy-search__cta--crisp {
    background: var(--ffs-color-white);
    color: var(--ffs-color-gray-900);
    border: 1px solid var(--ffs-color-gray-300);
    border-radius: var(--ffs-radius-pill);
    padding: 0 var(--ffs-space-4);
    box-shadow: var(--ffs-shadow-sm);
    font-weight: 500;
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
        border-color var(--ffs-duration-fast) var(--ffs-easing),
        box-shadow var(--ffs-duration-fast) var(--ffs-easing),
        transform var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search__cta--crisp:hover {
    background: var(--ffs-color-gray-50);
    border-color: var(--ffs-color-gray-900);
    box-shadow:
        var(--ffs-shadow-sm),
        0 0 0 1px rgba(0, 0, 0, 0.02);
    transform: translateY(-0.5px);
}

.fast-fuzzy-search__cta--crisp:focus-visible {
    outline: 0;
    border-color: var(--ffs-color-gray-900);
    box-shadow:
        var(--ffs-shadow-sm),
        0 0 0 3px rgba(0, 0, 0, 0.08);
}

.fast-fuzzy-search__cta--crisp:active {
    background: var(--ffs-color-gray-100);
    transform: translateY(0) scale(var(--ffs-press-scale));
}

.fast-fuzzy-search__cta--crisp[disabled],
.fast-fuzzy-search__cta--crisp[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Notification badge ----
 *
 * Small inline pill used in result rows for unread counts (Linear
 * shows "8" and "4" badges next to "Notifications" and "Messages"
 * rows). Primary-100 surface, primary-700 text. The --inverse
 * modifier renders a dark-on-light variant (gray-900 bg, white
 * text) for "Live" / pinned / unread emphasis.
 */
.fast-fuzzy-search--crisp .fast-fuzzy-search__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: var(--ffs-radius-pill);
    background: var(--ffs-badge-bg);
    color: var(--ffs-badge-fg);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    flex-shrink: 0;
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__badge--inverse {
    background: var(--ffs-color-gray-900);
    color: var(--ffs-color-white);
}

/* ---- Jump-to pill ----
 *
 * Small inline pill used on the right side of result rows in Linear
 * ("Jump to..." with avatar stacks). Gray-100 surface, gray-700 text.
 * Mirrors the secondary-action pattern in the command palette.
 */
.fast-fuzzy-search--crisp .fast-fuzzy-search__jump-to {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: var(--ffs-radius-pill);
    background: var(--ffs-jump-pill-bg);
    color: var(--ffs-jump-pill-fg);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- Highlight (fuzzy match) ----
 *
 * The fuzzy search wraps matched substrings in <mark> or
 * .fast-fuzzy-search__highlight. Linear's highlight is the
 * lightest primary tint (primary-50) with primary-800 text —
 * readable but very restrained, in line with Linear's overall
 * primary-sparing aesthetic.
 */
.fast-fuzzy-search--crisp mark,
.fast-fuzzy-search--crisp .fast-fuzzy-search__highlight {
    background: var(--ffs-highlight-bg);
    color: var(--ffs-highlight-fg);
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 600;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.fast-fuzzy-search--crisp .fast-fuzzy-search__result-link[aria-selected="true"] mark,
.fast-fuzzy-search--crisp .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__highlight {
    background: var(--ffs-color-primary-100);
    color: var(--ffs-color-primary-900);
}

/* ---- Loading skeleton ----
 *
 * Optional class to apply to a result row while content is loading.
 * Uses a subtle gray shimmer that respects reduced motion.
 */
.fast-fuzzy-search--crisp .fast-fuzzy-search__skeleton {
    background: linear-gradient(90deg,
            var(--ffs-color-gray-100) 0%,
            var(--ffs-color-gray-200) 50%,
            var(--ffs-color-gray-100) 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    color: transparent;
    animation: ffs-crisp-shimmer 1.4s ease-in-out infinite;
    user-select: none;
    pointer-events: none;
}

@keyframes ffs-crisp-shimmer {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fast-fuzzy-search--crisp .fast-fuzzy-search__skeleton {
        animation: none;
        background: var(--ffs-color-gray-100);
    }
}