:host {
    display: block;
    font-family: var(--dx-g-font-sans);
}

.dx-search-hybrid {
    background-color: #fafaf9;
}

/* Header --------------------------------------------------------------- */
.dx-search-header {
    padding: var(--dx-g-spacing-xl);
    background: linear-gradient(
        77deg,
        var(--dx-g-indigo-vibrant-30) 40.1%,
        var(--dx-g-indigo-vibrant-40) 99.07%
    );
    color: white;
}

.dx-search-header-container {
    margin: 0 auto;
    max-width: 1200px;
}

.dx-search-header-title {
    font-size: var(--dx-g-text-lg);
    line-height: var(--dx-g-text-lg);
    font-weight: var(--dx-g-font-normal);
    margin-bottom: var(--dx-g-spacing-md);
}

.dx-search-header-title-results {
    font-weight: var(--dx-g-font-bold);
}

.dx-search-header-query {
    font-family: var(--dx-g-font-display);
    font-size: var(--dx-g-text-2xl);
    line-height: var(--dx-g-text-2xl);
    font-weight: var(--dx-g-font-demi);
    margin-top: var(--dx-g-spacing-md);
}

/* Body + toolbar ------------------------------------------------------- */
.dx-search-body {
    margin: 0 auto;
    max-width: 1200px;
    padding: var(--dx-g-spacing-xl);
}

.dx-search-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--dx-g-spacing-md);
    margin-bottom: var(--dx-g-spacing-lg);
}

.dx-facet-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dx-g-spacing-sm);
}

.dx-facet-chip {
    background-color: white;
    color: var(--dx-g-blue-vibrant-20);
    border: 1px solid var(--dx-g-blue-vibrant-50);
    border-radius: 500px;
    padding: 6px 14px;
    font-size: var(--dx-g-text-sm);
    cursor: pointer;
}

.dx-facet-chip:hover {
    background-color: var(--dx-g-blue-vibrant-95);
}

.dx-facet-chip_active {
    background-color: var(--dx-g-blue-vibrant-50);
    color: white;
    font-weight: var(--dx-g-font-demi);
}

.dx-facet-chip-count {
    margin-left: 6px;
    opacity: 0.75;
}

.dx-search-controls {
    display: flex;
    gap: var(--dx-g-spacing-md);
}

/* Status states -------------------------------------------------------- */
.dx-search-status {
    display: flex;
    justify-content: center;
    padding: var(--dx-g-spacing-2xl) 0;
}

.dx-search-error {
    color: var(--dx-g-red-vibrant-40, #ba0517);
}

/* Result cards (ported from dx/searchResults visual style) ------------- */
.dx-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dx-result {
    background: white;
    border-radius: 16px;
    border: 1px solid rgb(24 24 24 / 4%);
    box-shadow: 0 0 2px 0 rgb(24 24 24 / 8%), 0 2px 4px 1px rgb(24 24 24 / 16%);
    padding: 20px;
    margin-bottom: var(--dx-g-spacing-lg);
}

.dx-result-info {
    display: flex;
    gap: 12px;
    margin-bottom: var(--dx-g-spacing-smd);
}

.dx-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: var(--dx-g-text-xs);
    background-color: var(--dx-g-blue-vibrant-95);
    color: var(--dx-g-blue-vibrant-20);
}

.dx-result-title {
    color: var(--dx-g-blue-vibrant-20);
    display: block;
    font-family: var(--dx-g-font-display);
    font-size: var(--dx-g-text-lg);
    margin: 0 0 var(--dx-g-spacing-sm);
}

.dx-result-date {
    color: #555;
    font-size: var(--dx-g-text-xs);
    margin: 0 0 var(--dx-g-spacing-xs);
}

.dx-result-excerpt {
    color: var(--dx-g-gray-10);
    font-size: 14px;
    line-height: 20px;
    margin: 0;
}

/* Pagination ----------------------------------------------------------- */
.dx-pagination-container {
    margin: 0 auto;
    width: fit-content;
}