/* ============================================================================
 * Theme: Material Dark (Pro)
 *
 * Dark variant of Material Design 3. Same 60px pill field, 2px border,
 * 40px circular result icons, and Material elevation system — but on a
 * dark primary-tinted surface with inverted token shades.
 *
 * Token mapping vs material-light:
 *   light bg  primary-50  → dark bg  primary-900
 *   light fg  primary-900 → dark fg  primary-50
 *   light border primary-200 → dark border primary-800
 *   light hover/selected primary-100 → dark hover/selected primary-800
 */

.fast-fuzzy-search--material-dark {
    --ffs-border-color:           var(--ffs-color-primary-800);
    --ffs-scrollbar-thumb:        var(--ffs-color-primary-700);
    --ffs-scrollbar-thumb-hover:  var(--ffs-color-primary-500);
    --ffs-kbd-bg:                 var(--ffs-color-primary-800);
    --ffs-kbd-border:             var(--ffs-color-primary-700);

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

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

/* ---- Field ---- */
.fast-fuzzy-search--material-dark .fast-fuzzy-search__field {
    height: 60px;
    background: var(--ffs-color-primary-900);
    border: 2px solid var(--ffs-border-color);
    border-radius: var(--ffs-radius-pill);
    box-shadow: var(--ffs-shadow-sm);
    color: var(--ffs-color-primary-50);
    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-dark[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-dark .fast-fuzzy-search__input,
.fast-fuzzy-search--material-dark .fast-fuzzy-search__input::placeholder {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--ffs-color-primary-50);
    transition: color var(--ffs-duration-fast) var(--ffs-easing);
}

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

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

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

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

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

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

.fast-fuzzy-search--material-dark .fast-fuzzy-search__chip-button {
    border: none;
    color: var(--ffs-color-primary-50);
    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-dark .fast-fuzzy-search__chip-button:hover {
    background: var(--ffs-color-primary-800);
}

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

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

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

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

/* ---- Panel ---- */
.fast-fuzzy-search--material-dark .fast-fuzzy-search__panel {
    overflow: hidden;
    background: var(--ffs-color-primary-900);
    border: 2px solid var(--ffs-color-primary-800);
    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-50);
    box-shadow: 0 2px 4px rgba(var(--ffs-color-primary-rgb), 0.15);
    transition: box-shadow var(--ffs-duration) var(--ffs-easing);
}

/* ---- Result item divider ---- */
.fast-fuzzy-search--material-dark .fast-fuzzy-search__result-item:not(:last-child) {
    border-bottom: 1px solid var(--ffs-color-primary-800);
}

/* ---- Result link ---- */
.fast-fuzzy-search--material-dark .fast-fuzzy-search__result-link {
    color: var(--ffs-color-primary-50);
    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-dark-row-in var(--ffs-duration) var(--ffs-easing) both;
    animation-delay: calc(var(--ffs-i, 0) * 18ms);
}

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

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

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

.fast-fuzzy-search--material-dark .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.25);
}

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

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

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

/* ---- Result icon ---- */
.fast-fuzzy-search--material-dark .fast-fuzzy-search__result-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ffs-radius-pill);
    background: var(--ffs-color-primary-800);
    color: var(--ffs-color-primary-50);
    border: 2px solid var(--ffs-color-primary-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),
                box-shadow       var(--ffs-duration-fast) var(--ffs-easing),
                transform        var(--ffs-duration-fast) var(--ffs-easing);
}

.fast-fuzzy-search--material-dark .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__result-icon,
.fast-fuzzy-search--material-dark .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.3);
}

.fast-fuzzy-search--material-dark .fast-fuzzy-search__result-image {
    width: 40px;
    height: 40px;
    border: 2px solid var(--ffs-color-primary-800);
    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-dark .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-image,
.fast-fuzzy-search--material-dark .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-dark .fast-fuzzy-search__chip {
    background: var(--ffs-color-primary-800);
    color: var(--ffs-color-primary-50);
    border: 1px solid var(--ffs-color-primary-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);
}

.fast-fuzzy-search--material-dark .fast-fuzzy-search__result-link:hover .fast-fuzzy-search__chip,
.fast-fuzzy-search--material-dark .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-dark .fast-fuzzy-search__empty {
    background: transparent;
    color: var(--ffs-color-primary-200);
}

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

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

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

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

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

/* ---- View all button ---- */
.fast-fuzzy-search--material-dark .fast-fuzzy-search__view-all {
    background: var(--ffs-color-primary-800);
    color: var(--ffs-color-primary-200);
    border-top: 1px solid var(--ffs-color-primary-700);
    position: relative;
    overflow: hidden;
    transition: color var(--ffs-duration-fast) var(--ffs-easing);
}

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

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

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

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

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

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

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

/* ---- Trigger buttons ---- */
.fast-fuzzy-search__icon-button.fast-fuzzy-search--material-dark,
.fast-fuzzy-search__button.fast-fuzzy-search--material-dark {
    background: var(--ffs-color-primary-900);
    color: var(--ffs-color-primary-50);
    border: 2px solid var(--ffs-color-primary-800);
    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-dark {
    border-radius: var(--ffs-radius-pill);
}

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

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

.fast-fuzzy-search__icon-button.fast-fuzzy-search--material-dark:focus-visible,
.fast-fuzzy-search__button.fast-fuzzy-search--material-dark: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.25);
}

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

/* ---- CTA button (filled) ---- */
.fast-fuzzy-search__cta--material-dark {
    background: var(--ffs-color-primary-500);
    color: var(--ffs-color-primary-50);
    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.25),
        0 2px 4px rgba(var(--ffs-color-primary-rgb), 0.2);
    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-dark: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.3),
        0 6px 14px rgba(var(--ffs-color-primary-rgb), 0.25),
        0 0 20px rgba(var(--ffs-color-primary-rgb), 0.2);
    transform: translateY(-1px);
}

.fast-fuzzy-search__cta--material-dark:focus-visible {
    outline: 0;
    border-color: var(--ffs-color-primary-400);
    box-shadow:
        0 1px 2px rgba(var(--ffs-color-primary-rgb), 0.25),
        0 2px 4px rgba(var(--ffs-color-primary-rgb), 0.2),
        0 0 0 4px rgba(var(--ffs-color-primary-rgb), 0.35);
}

.fast-fuzzy-search__cta--material-dark: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.25);
}

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

/* ---- Highlight (fuzzy match) ---- */
.fast-fuzzy-search--material-dark mark,
.fast-fuzzy-search--material-dark .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-dark .fast-fuzzy-search__result-link[aria-selected="true"] mark,
.fast-fuzzy-search--material-dark .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__highlight {
    background: var(--ffs-color-primary-600);
    color: var(--ffs-color-primary-50);
}

/* ---- Loading skeleton ---- */
.fast-fuzzy-search--material-dark .fast-fuzzy-search__skeleton {
    background: linear-gradient(
        90deg,
        var(--ffs-color-primary-800) 0%,
        var(--ffs-color-primary-700) 50%,
        var(--ffs-color-primary-800) 100%
    );
    background-size: 200% 100%;
    border-radius: 4px;
    color: transparent;
    animation: ffs-material-dark-shimmer 1.4s ease-in-out infinite;
    user-select: none;
    pointer-events: none;
}

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

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