/**
 * Copyright (c) 2026 Lean FRO LLC. All rights reserved.
 * Released under Apache 2.0 license as described in the file LICENSE.
 * Author: David Thrane Christiansen
 */

.search-page-host {
    margin: 1rem 0 1rem 0;
}

.search-page-input {
    width: 32rem;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.8rem;
    font-size: 1.1rem;
    font-family: inherit;
    color: var(--verso-text-color, black);
    background-color: var(--verso-background-color, white);
    border: 1px solid gray;
    border-radius: 0.2rem;
    outline: none;
}

.search-page-input:focus {
    border-color: currentColor;
    box-shadow: 0 0 0 2px var(--selected-color, #def);
}

.search-page-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.9rem;
    margin: 0 0 0.75rem 0;
    font-family: var(--verso-structure-font-family);
    font-size: 0.9rem;
    color: var(--verso-muted-color, #444);
}

.search-page-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    user-select: none;
}

.search-page-filter input[type="checkbox"] {
    cursor: pointer;
}

/* Dim buckets with no matches in the current query — the box stays visible so users
   see which domains exist, but is greyed and not clickable. */
.search-page-filter--disabled {
    color: var(--verso-muted-color, #777);
    opacity: 0.5;
    cursor: not-allowed;
}

.search-page-filter--disabled input[type="checkbox"] {
    cursor: not-allowed;
}

.search-page-count {
    color: inherit;
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 1rem 0;
}

.search-page-count.muted {
    color: var(--verso-muted-color, #777);
    font-weight: normal;
    font-style: italic;
}

.search-page-empty {
    color: var(--verso-muted-color, #777);
    font-style: italic;
}

.search-page-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    /* Use the site's body-text font so results read like prose rather than UI chrome.
       Individual result subclasses (e.g. `.domain` uses the structural font) still
       override as needed. */
    font-family: var(--verso-text-font-family);
}

/* Most of what styles a result row (item typography, `.full-text`, `.domain`, and
   `.context-elem`) is defined once by the shared `.verso-search-results .search-result…`
   rules in `search-box.css`, so that the combobox dropdown and the full-page view look
   consistent by default. The rules below only add the things the full-page view does
   differently: wider padding around each row, a horizontal separator between rows, a
   slightly larger domain label, and its own style of matched-text highlight. */
.search-page-list li.search-result {
    gap: 0.25rem;
    padding: 0.6rem 0.8rem;
    border-top: 1px solid var(--verso-border-color, #ddd);
    /* No font-weight/font-family here on purpose — per-domain rules from
       `domain-display.css` (e.g. bold for `.section-domain`, code-font for `.const`)
       need to win. A rule here with specificity 0-2-1 would override the domain
       rules' 0-2-0 and silently drop domain styling. */

    /* Skip style/layout/paint for off-screen rows. On broad queries the list can hold
       hundreds of items; `content-visibility: auto` lets the browser defer rendering
       work for rows outside the viewport while keeping them in the DOM — so Ctrl-F /
       find-in-page and accessibility tree traversal still see every result. The
       intrinsic size reserves a placeholder box so the scrollbar doesn't jump as
       rows resolve into full layout. */
    content-visibility: auto;
    contain-intrinsic-size: auto 4rem;
}

.search-page-list li.search-result:hover,
.search-page-list li.search-result:focus-within {
    background-color: var(--selected-color, #def);
}

/* Match the in-page term highlight used on destination pages (`.text-search-results`)
   so "highlighted match" looks the same everywhere on the site. Row hover uses the
   same color as its background; the thin outline keeps em boundaries legible on hover. */
.search-page-list li.search-result em {
    font-style: normal;
    text-decoration: none;
    background-color: var(--verso-selected-color, #def);
    border-radius: 0.15em;
    padding: 0 0.1em;
}

.search-page-list li.search-result:hover em,
.search-page-list li.search-result:focus-within em {
    outline: 1px solid var(--verso-border-color, #bbb);
}

/* Slightly larger domain label than in the combobox, since there's room for it on this page. */
.search-page-list li.search-result .domain {
    font-size: 0.75rem;
}