/* ============================================================================
 * Theme: Material Light (Pro)
 *
 * Material Design 3 surface on a soft primary-tinted background. Signature
 * elements: 56-64px tall pill field with 2px primary-tinted border,
 * 40-48px circular result icons, generous padding, item dividers (not
 * card-per-row), and the full Material elevation system (shadow-1/2/3).
 *
 */

.fast-fuzzy-search--material-light {
    --ffs-border-color:           var(--ffs-color-primary-200);
    --ffs-scrollbar-thumb:        var(--ffs-color-primary-300);
    --ffs-scrollbar-thumb-hover:  var(--ffs-color-primary-500);
    --ffs-kbd-bg:                 var(--ffs-color-primary-100);
    --ffs-kbd-border:             var(--ffs-color-primary-300);

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

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

/* ---- Field ----
 *
 * M3 outlined text field: 2px primary-tinted border, primary-50 fill,
 * 9999px pill radius, taller than the other themes (56-64px) to match
 * the larger Material touch targets. The "open" state (data-has-query)
 * pulls the bottom corners back to radius-lg so the panel can attach
 * flush underneath.
 */
.fast-fuzzy-search--material-light .fast-fuzzy-search__field {
    height: 60px;
    background: var(--ffs-color-primary-50);
    border: 2px solid var(--ffs-border-color);
    border-radius: var(--ffs-radius-pill);
    box-shadow: var(--ffs-shadow-sm);
    color: var(--ffs-color-primary-900);
    padding-right: var(--ffs-space-2);
    transition: border-color var(--ffs-duration-fast) var(--ffs-easing),
                box-shadow   var(--ffs-duration-fast) var(--ffs-easing),
                background-color var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--material-light[data-has-query="true"] .fast-fuzzy-search__field {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--ffs-radius-lg);
    border-top-right-radius: var(--ffs-radius-lg);
}


/* ---- Input ---- */
.fast-fuzzy-search--material-light .fast-fuzzy-search__input,
.fast-fuzzy-search--material-light .fast-fuzzy-search__input::placeholder {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--ffs-color-primary-900);
    transition: color var(--ffs-duration-fast) var(--ffs-easing);
}

/* ---- Icon ---- */
.fast-fuzzy-search--material-light .fast-fuzzy-search__icon,
.fast-fuzzy-search--material-light .fast-fuzzy-search__icon-frame {
    color: var(--ffs-color-primary-500);
    transition: color var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--material-light .fast-fuzzy-search__field:focus-within .fast-fuzzy-search__icon,
.fast-fuzzy-search--material-light .fast-fuzzy-search__field:focus-within .fast-fuzzy-search__icon-frame {
    color: var(--ffs-color-primary-600);
}

/* ---- Clear button ---- */
.fast-fuzzy-search--material-light .fast-fuzzy-search__clear button {
    background: transparent;
    color: var(--ffs-color-primary-500);
    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--material-light .fast-fuzzy-search__clear button:hover {
    background: var(--ffs-color-primary-200);
    color: var(--ffs-color-primary-700);
}

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

/* ---- Post-type bar ---- */
.fast-fuzzy-search--material-light .fast-fuzzy-search__post-types {
    border-bottom: 1px solid var(--ffs-color-primary-200);
    color: var(--ffs-color-primary-900);
    padding: var(--ffs-space-3) var(--ffs-space-4);
}

.fast-fuzzy-search--material-light .fast-fuzzy-search__chip-list {
    gap: var(--ffs-space-2);
}

.fast-fuzzy-search--material-light .fast-fuzzy-search__chip-button {
    border: none;
    color: var(--ffs-color-primary-900);
    border-radius: 9999px;
    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--material-light .fast-fuzzy-search__chip-button:hover {
    background: var(--ffs-color-primary-100);
}

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

.fast-fuzzy-search--material-light .fast-fuzzy-search__chip-button[aria-selected="true"] {
    background: var(--ffs-color-primary-100);
    color: var(--ffs-color-primary-700);
}

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

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

/* ---- Panel ---- */
.fast-fuzzy-search--material-light .fast-fuzzy-search__panel {
    overflow: hidden;
    background: var(--ffs-color-primary-50);
    border: 2px solid var(--ffs-color-primary-200);
    border-top: 0;
    border-bottom-left-radius: var(--ffs-radius-lg);
    border-bottom-right-radius: var(--ffs-radius-lg);
    font-size: 14px;
    line-height: 20px;
    color: var(--ffs-color-primary-900);
    box-shadow: 0 2px 4px rgba(var(--ffs-color-primary-rgb), 0.08);
    transition: box-shadow var(--ffs-duration) var(--ffs-easing);
}

/* ---- Result item divider ----
 *
 * Material uses 1px dividers between list items instead of per-row
 * card surfaces. The divider uses a primary-tinted color that reads
 * cleanly on the primary-50 panel bg.
 */
.fast-fuzzy-search--material-light .fast-fuzzy-search__result-item:not(:last-child) {
    border-bottom: 1px solid var(--ffs-color-primary-200);
}

/* ---- Result link ----
 *
 * No border-radius (M3 list pattern uses dividers, not cards). The
 * selected row gets a primary-200 fill + 4px primary-500 left bar +
 * 2px inset ring (M3 "list-item selected" pattern).
 */
.fast-fuzzy-search--material-light .fast-fuzzy-search__result-link {
    color: var(--ffs-color-primary-900);
    border-radius: 0;
    padding: var(--ffs-space-3) var(--ffs-space-4);
    transition: background-color var(--ffs-duration-fast) var(--ffs-easing),
                border-color     var(--ffs-duration-fast) var(--ffs-easing),
                color            var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
    animation: ffs-material-light-row-in var(--ffs-duration) var(--ffs-easing) both;
    animation-delay: calc(var(--ffs-i, 0) * 18ms);
}

@keyframes ffs-material-light-row-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fast-fuzzy-search--material-light .fast-fuzzy-search__result-link:hover {
    background: var(--ffs-color-primary-100);
}

.fast-fuzzy-search--material-light .fast-fuzzy-search__result-link:active {
    transform: scale(var(--ffs-press-scale));
}

.fast-fuzzy-search--material-light .fast-fuzzy-search__result-link:focus-visible {
    outline: 0;
    box-shadow:
        inset 0 0 0 2px var(--ffs-color-primary-500),
        0 0 0 4px rgba(var(--ffs-color-primary-rgb), 0.2);
}

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

.fast-fuzzy-search--material-light .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-icon-frame,
.fast-fuzzy-search--material-light .fast-fuzzy-search__result-link:hover    .fast-fuzzy-search__result-icon-frame {
    transform: translateX(2px);
}

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

/* ---- Result icon (larger circular chip) ----
 *
 * M3 leading icon: 40x40 circular chip with primary-100 fill. The
 * 2px primary-200 ring is added to give it more presence on the
 * primary-50 panel bg.
 */
.fast-fuzzy-search--material-light .fast-fuzzy-search__result-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ffs-radius-pill);
    background: var(--ffs-color-primary-100);
    color: var(--ffs-color-primary-900);
    border: 2px solid var(--ffs-color-primary-200);
    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--material-light .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__result-icon,
.fast-fuzzy-search--material-light .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-icon {
    background: var(--ffs-color-primary-500);
    color: var(--ffs-color-primary-50);
    border-color: var(--ffs-color-primary-500);
    box-shadow: 0 0 12px rgba(var(--ffs-color-primary-rgb), 0.25);
}

.fast-fuzzy-search--material-light .fast-fuzzy-search__result-image {
    width: 40px;
    height: 40px;
    border: 2px solid var(--ffs-color-primary-200);
    border-radius: var(--ffs-radius-pill);
    transition: transform var(--ffs-duration-fast) var(--ffs-easing),
                border-color  var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--material-light .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-image,
.fast-fuzzy-search--material-light .fast-fuzzy-search__result-link:hover    .fast-fuzzy-search__result-image {
    transform: scale(1.05);
    border-color: var(--ffs-color-primary-500);
}

/* ---- Result chip ---- */
.fast-fuzzy-search--material-light .fast-fuzzy-search__chip {
    background: var(--ffs-color-primary-100);
    color: var(--ffs-color-primary-900);
    border: 1px solid var(--ffs-color-primary-200);
    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);
}

.fast-fuzzy-search--material-light .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__chip,
.fast-fuzzy-search--material-light .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__chip {
    background: var(--ffs-color-primary-500);
    color: var(--ffs-color-primary-50);
    border-color: var(--ffs-color-primary-500);
}

/* ---- Empty state ---- */
.fast-fuzzy-search--material-light .fast-fuzzy-search__empty {
    background: transparent;
    color: var(--ffs-color-primary-800);
}

.fast-fuzzy-search--material-light .fast-fuzzy-search__empty-title {
    color: var(--ffs-color-primary-900);
}

.fast-fuzzy-search--material-light .fast-fuzzy-search__empty-description {
    color: var(--ffs-color-primary-700);
}

/* ---- Keyboard footer ---- */
.fast-fuzzy-search--material-light .fast-fuzzy-search__keyboard-shortcuts {
    background: transparent;
    border-top-color: var(--ffs-color-primary-200);
    color: var(--ffs-color-primary-800);
}

.fast-fuzzy-search--material-light .fast-fuzzy-search__kbd {
    background: var(--ffs-color-white);
    border-color: var(--ffs-color-primary-300);
    color: var(--ffs-color-primary-900);
    box-shadow: 0 1px 0 var(--ffs-color-primary-300);
    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--material-light .fast-fuzzy-search__keyboard-shortcuts:hover .fast-fuzzy-search__kbd {
    border-color: var(--ffs-color-primary-500);
}

.fast-fuzzy-search--material-light .fast-fuzzy-search__kbd:hover {
    background: var(--ffs-color-primary-50);
    transform: translateY(-0.5px);
}

/* ---- View all button ----
 *
 * M3 "text button" pattern on a primary-100 fill with a primary-200
 * top border. Hover washes the surface with a slightly darker
 * primary-200 tint; chevron slides on hover.
 */
.fast-fuzzy-search--material-light .fast-fuzzy-search__view-all {
    background: var(--ffs-color-primary-100);
    color: var(--ffs-color-primary-700);
    border-top: 1px solid var(--ffs-color-primary-200);
    position: relative;
    overflow: hidden;
    transition: color var(--ffs-duration-fast) var(--ffs-easing);
}


.fast-fuzzy-search--material-light .fast-fuzzy-search__view-all:hover {
    color: var(--ffs-color-primary-800);
}

.fast-fuzzy-search--material-light .fast-fuzzy-search__view-all:active::before {
    background: var(--ffs-color-primary-300);
}

.fast-fuzzy-search--material-light .fast-fuzzy-search__view-all > * {
    position: relative;
    z-index: 1;
}

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

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

/* ---- Panel close button ---- */
.fast-fuzzy-search__panel-close--material-light {
    background: var(--ffs-color-primary-50);
    border: 2px solid var(--ffs-color-primary-200);
    color: var(--ffs-color-primary-900);
    border-radius: var(--ffs-radius-pill);
    box-shadow: var(--ffs-shadow-md);
    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--material-light:hover,
.fast-fuzzy-search__panel-close--material-light:focus {
    background: var(--ffs-color-primary-100);
    border-color: var(--ffs-color-primary-500);
    color: var(--ffs-color-primary-900);
    box-shadow:
        var(--ffs-shadow-md),
        0 0 0 4px rgba(var(--ffs-color-primary-rgb), 0.15);
}

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

/* ---- Trigger buttons (icon + full) ----
 *
 * M3 outlined button: 2px primary-tinted border, primary-50 fill,
 * primary-500 focus ring (4px halo). The icon button is pill, the
 * full button is pill with extra horizontal padding.
 */
.fast-fuzzy-search__icon-button.fast-fuzzy-search--material-light,
.fast-fuzzy-search__button.fast-fuzzy-search--material-light {
    background: var(--ffs-color-primary-50);
    color: var(--ffs-color-primary-900);
    border: 2px solid var(--ffs-color-primary-200);
    box-shadow: var(--ffs-shadow-md);
    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--material-light {
    border-radius: var(--ffs-radius-pill);
}

.fast-fuzzy-search__button.fast-fuzzy-search--material-light {
    border-radius: var(--ffs-radius-pill);
    padding: 0 var(--ffs-space-5);
}

.fast-fuzzy-search__icon-button.fast-fuzzy-search--material-light:hover,
.fast-fuzzy-search__button.fast-fuzzy-search--material-light:hover {
    background: var(--ffs-color-primary-100);
    border-color: var(--ffs-color-primary-500);
    box-shadow:
        var(--ffs-shadow-md),
        0 0 0 1px rgba(var(--ffs-color-primary-rgb), 0.06);
}

.fast-fuzzy-search__icon-button.fast-fuzzy-search--material-light:focus-visible,
.fast-fuzzy-search__button.fast-fuzzy-search--material-light:focus-visible {
    border-color: var(--ffs-color-primary-500);
    box-shadow:
        var(--ffs-shadow-md),
        0 0 0 4px rgba(var(--ffs-color-primary-rgb), 0.2);
}

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

/* ---- CTA button (filled) ----
 *
 * M3 "filled button" pattern: solid primary-500 surface with on-primary
 * (white) text, soft drop shadow, primary glow on hover, deeper
 * elevation when active. The most visually prominent button in the
 * Material design system.
 */
.fast-fuzzy-search__cta--material-light {
    background: var(--ffs-color-primary-500);
    color: var(--ffs-color-white);
    border: 2px solid var(--ffs-color-primary-500);
    border-radius: var(--ffs-radius-pill);
    padding: 0 var(--ffs-space-5);
    box-shadow:
        0 1px 2px rgba(var(--ffs-color-primary-rgb), 0.2),
        0 2px 4px rgba(var(--ffs-color-primary-rgb), 0.15);
    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--material-light:hover {
    background: var(--ffs-color-primary-600);
    border-color: var(--ffs-color-primary-600);
    box-shadow:
        0 2px 4px rgba(var(--ffs-color-primary-rgb), 0.25),
        0 6px 14px rgba(var(--ffs-color-primary-rgb), 0.2),
        0 0 20px rgba(var(--ffs-color-primary-rgb), 0.15);
    transform: translateY(-1px);
}

.fast-fuzzy-search__cta--material-light:focus-visible {
    outline: 0;
    border-color: var(--ffs-color-primary-700);
    box-shadow:
        0 1px 2px rgba(var(--ffs-color-primary-rgb), 0.2),
        0 2px 4px rgba(var(--ffs-color-primary-rgb), 0.15),
        0 0 0 4px rgba(var(--ffs-color-primary-rgb), 0.3);
}

.fast-fuzzy-search__cta--material-light:active {
    background: var(--ffs-color-primary-700);
    border-color: var(--ffs-color-primary-700);
    transform: translateY(0) scale(var(--ffs-press-scale));
    box-shadow:
        0 1px 2px rgba(var(--ffs-color-primary-rgb), 0.2);
}

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

/* ---- Highlight (fuzzy match) ----
 *
 * The fuzzy search wraps matched substrings in <mark> or
 * .fast-fuzzy-search__highlight. The M3 highlight uses a primary-200
 * background with primary-900 text — readable but not overwhelming.
 */
.fast-fuzzy-search--material-light mark,
.fast-fuzzy-search--material-light .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--material-light .fast-fuzzy-search__result-link[aria-selected="true"] mark,
.fast-fuzzy-search--material-light .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__highlight {
    background: var(--ffs-color-primary-200);
    color: var(--ffs-color-primary-900);
}

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

@keyframes ffs-material-light-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

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