.hc-ci-search {
    min-width: 0;
    color: var(--hc-ci-color-text);
    background: var(--hc-ci-color-canvas);
}

.hc-ci-search *,
.hc-ci-search *::before,
.hc-ci-search *::after {
    box-sizing: border-box;
}

.hc-ci-search :where(a, strong, p, span, h1, h2) {
    overflow-wrap: anywhere;
}

.hc-ci-search__bar {
    border-block: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    background: var(--hc-ci-color-surface);
}

.hc-ci-search__hero {
    border-bottom: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    background:
        radial-gradient(circle at 78% 24%, rgb(21 87 228 / 12%), transparent 29%),
        radial-gradient(circle at 91% 68%, rgb(25 118 154 / 9%), transparent 24%),
        linear-gradient(135deg, var(--hc-ci-color-surface) 0%, var(--hc-ci-color-surface-subtle) 100%);
}

.hc-ci-search__hero-inner,
.hc-ci-search__workspace {
    max-width: 64rem;
}

.hc-ci-search__hero-inner {
    padding-block: var(--hc-ci-space-7);
}

.hc-ci-search__hero h1 {
    max-width: 48rem;
    margin: 0;
    font-size: clamp(2.25rem, 5vw, 4.2rem);
    font-weight: var(--hc-ci-font-weight-medium);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.hc-ci-search__lead {
    max-width: 48rem;
    margin: var(--hc-ci-space-4) 0 0;
    color: var(--hc-ci-color-text-muted);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: var(--hc-ci-line-height-body);
}

.hc-ci-search__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--hc-ci-space-2);
    max-width: 52rem;
    margin-top: var(--hc-ci-space-6);
}

.hc-ci-search__form input,
.hc-ci-search__form button {
    min-width: 0;
    min-height: 3.25rem;
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border-strong);
    border-radius: var(--hc-ci-radius-medium);
    font: inherit;
}

.hc-ci-search__form input {
    width: 100%;
    padding: 0 var(--hc-ci-space-4);
    color: var(--hc-ci-color-text);
    background: var(--hc-ci-color-surface);
}

.hc-ci-search__form input::placeholder {
    color: var(--hc-ci-color-text-muted);
}

.hc-ci-search__form button {
    min-width: 7rem;
    padding: 0 var(--hc-ci-space-5);
    border-color: var(--hc-ci-color-surface-selected);
    color: var(--hc-ci-color-text-on-selected);
    background: var(--hc-ci-color-surface-selected);
    font-weight: var(--hc-ci-font-weight-medium);
    cursor: pointer;
    transition:
        border-color var(--hc-ci-motion-fast) var(--hc-ci-motion-easing),
        background var(--hc-ci-motion-fast) var(--hc-ci-motion-easing),
        transform var(--hc-ci-motion-fast) var(--hc-ci-motion-easing);
}

.hc-ci-search__form button:hover {
    border-color: var(--hc-ci-color-action);
    background: var(--hc-ci-color-action);
    transform: translateY(-1px);
}

.hc-ci-search__clear {
    display: inline-flex;
    margin-top: var(--hc-ci-space-3);
    color: var(--hc-ci-color-text-muted);
    font-size: var(--hc-ci-font-size-small);
    text-underline-offset: 0.2em;
}

.hc-ci-search__workspace {
    display: grid;
    gap: var(--hc-ci-space-6);
    padding-block: var(--hc-ci-space-6) var(--hc-ci-space-7);
}

.hc-ci-search__summary {
    display: grid;
    gap: var(--hc-ci-space-2);
    padding-bottom: var(--hc-ci-space-4);
    border-bottom: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
}

.hc-ci-search__summary p {
    margin: 0;
    color: var(--hc-ci-color-text-muted);
}

.hc-ci-search__summary strong {
    color: var(--hc-ci-color-text);
    font-weight: var(--hc-ci-font-weight-medium);
}

.hc-ci-search__summary a,
.hc-ci-search__group-header > a,
.hc-ci-search__show-all {
    color: var(--hc-ci-color-action);
    font-size: var(--hc-ci-font-size-small);
    font-weight: var(--hc-ci-font-weight-medium);
    text-decoration: none;
}

.hc-ci-search__groups {
    display: grid;
    gap: var(--hc-ci-space-7);
}

.hc-ci-search__group {
    min-width: 0;
}

.hc-ci-search__group-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--hc-ci-space-4);
    padding-bottom: var(--hc-ci-space-3);
    border-bottom: var(--hc-ci-border-width) solid var(--hc-ci-color-border-strong);
}

.hc-ci-search__group-header h2,
.hc-ci-search__catalogs h2,
.hc-ci-search__empty h2,
.hc-ci-search__explorer h2 {
    margin: 0;
    font-size: var(--hc-ci-font-size-title);
    font-weight: var(--hc-ci-font-weight-medium);
    line-height: var(--hc-ci-line-height-title);
}

.hc-ci-search__group-header h2 span {
    color: var(--hc-ci-color-text-muted);
    font-weight: var(--hc-ci-font-weight-regular);
}

.hc-ci-search__results {
    display: grid;
}

.hc-ci-search__result {
    min-width: 0;
    padding: var(--hc-ci-space-4) var(--hc-ci-space-3);
    border-bottom: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hc-ci-space-4);
    color: inherit;
    background: transparent;
    text-decoration: none;
    transition:
        background var(--hc-ci-motion-fast) var(--hc-ci-motion-easing),
        border-color var(--hc-ci-motion-fast) var(--hc-ci-motion-easing);
}

.hc-ci-search__result:hover {
    border-color: var(--hc-ci-color-border-strong);
    background: var(--hc-ci-gradient-selected);
}

.hc-ci-search__result-body {
    min-width: 0;
    display: grid;
    gap: var(--hc-ci-space-1);
}

.hc-ci-search__result-body > strong {
    font-size: var(--hc-ci-font-size-title-small);
    font-weight: var(--hc-ci-font-weight-medium);
    line-height: var(--hc-ci-line-height-title);
}

.hc-ci-search__alias,
.hc-ci-search__metadata,
.hc-ci-search__description {
    font-size: var(--hc-ci-font-size-small);
    line-height: var(--hc-ci-line-height-body);
}

.hc-ci-search__alias {
    color: var(--hc-ci-color-context);
}

.hc-ci-search__metadata,
.hc-ci-search__description {
    color: var(--hc-ci-color-text-muted);
}

.hc-ci-search__result-arrow {
    color: var(--hc-ci-color-action);
    font-size: 1.15rem;
}

.hc-ci-search__show-all {
    display: inline-flex;
    margin-top: var(--hc-ci-space-3);
}

.hc-ci-search__catalogs,
.hc-ci-search__empty,
.hc-ci-search__explorer {
    padding: var(--hc-ci-space-5);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-large);
    background: var(--hc-ci-color-surface);
}

.hc-ci-search__catalogs > div > p:last-child,
.hc-ci-search__empty > p,
.hc-ci-search__explorer > div > p:last-child {
    max-width: 46rem;
    margin: var(--hc-ci-space-2) 0 0;
    color: var(--hc-ci-color-text-muted);
}

.hc-ci-search__catalogs nav,
.hc-ci-search__empty nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hc-ci-space-2);
    margin-top: var(--hc-ci-space-5);
}

.hc-ci-search__catalogs nav a,
.hc-ci-search__empty nav a {
    min-width: 0;
    min-height: var(--hc-ci-size-control);
    padding: var(--hc-ci-space-2) var(--hc-ci-space-3);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-medium);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hc-ci-space-3);
    color: var(--hc-ci-color-text);
    background: var(--hc-ci-color-surface-subtle);
    text-decoration: none;
}

.hc-ci-search__explorer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hc-ci-space-5);
    border-color: rgb(21 87 228 / 24%);
    background:
        radial-gradient(circle at 84% 32%, rgb(25 118 154 / 10%), transparent 34%),
        var(--hc-ci-gradient-section);
}

.hc-ci-search__explorer > a {
    min-height: var(--hc-ci-size-control);
    padding: 0 var(--hc-ci-space-4);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-action);
    border-radius: var(--hc-ci-radius-medium);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hc-ci-color-action);
    background: var(--hc-ci-color-surface);
    font-size: var(--hc-ci-font-size-small);
    font-weight: var(--hc-ci-font-weight-medium);
    text-decoration: none;
}

.hc-ci-search__pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hc-ci-space-2);
}

.hc-ci-search__pagination a {
    min-width: var(--hc-ci-size-control);
    min-height: var(--hc-ci-size-control);
    padding: 0 var(--hc-ci-space-3);
    border: var(--hc-ci-border-width) solid var(--hc-ci-color-border);
    border-radius: var(--hc-ci-radius-medium);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hc-ci-color-text-muted);
    background: var(--hc-ci-color-surface);
    text-decoration: none;
}

.hc-ci-search__pagination a[aria-current='page'] {
    border-color: var(--hc-ci-color-surface-selected);
    color: var(--hc-ci-color-text-on-selected);
    background: var(--hc-ci-color-surface-selected);
}

@media (max-width: 48rem) {
    .hc-ci-search__hero-inner {
        padding-block: var(--hc-ci-space-6);
    }

    .hc-ci-search__catalogs nav,
    .hc-ci-search__empty nav {
        grid-template-columns: 1fr;
    }

    .hc-ci-search__explorer {
        grid-template-columns: 1fr;
    }

    .hc-ci-search__explorer > a {
        justify-self: start;
    }
}

@media (max-width: 40rem) {
    .hc-ci-search__form {
        grid-template-columns: 1fr;
    }

    .hc-ci-search__form button {
        width: 100%;
    }

    .hc-ci-search__group-header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--hc-ci-space-2);
    }

    .hc-ci-search__result {
        padding-inline: 0;
        gap: var(--hc-ci-space-2);
    }

    .hc-ci-search__catalogs,
    .hc-ci-search__empty,
    .hc-ci-search__explorer {
        padding: var(--hc-ci-space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hc-ci-search *,
    .hc-ci-search *::before,
    .hc-ci-search *::after {
        transition-duration: 0ms !important;
    }
}
