/* ══════════════════════════════════════════════════════════════════════════════
   PPEA — In-Text Search Panel + Toolbar Field Stylesheet
   ══════════════════════════════════════════════════════════════════════════════
   Loaded on text pages via textnav:search-panel(). Provides:
     1. Search results side panel (follows edition_images.css pattern)
     2. Toolbar search field (desktop inline, mobile expand-in-place)
     3. Result item rendering (reuses search.css class names)
     4. Destination highlight animation
   ══════════════════════════════════════════════════════════════════════════════ */


/* ── §1  Panel: hidden by default ────────────────────────────────────────── */

#search-results-panel {
    display: none;
    background: var(--color-bg);
    font-family: var(--font-ui);
    font-size: 0.85rem;
}

#search-results-panel.open {
    display: flex;
    flex-direction: column;
}

.search-panel-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.search-panel-content:has(> .panel-loading) {
    display: flex;
    flex-direction: column;
}
.search-panel-content > .panel-loading {
    flex: 1;
}


/* ── §2a  Desktop (≥ --bp-desktop): side panel via body grid ─────────────── */

@media (min-width: 900px) /* --bp-desktop */ {
    body:has(#search-results-panel.open) {
        display: grid;
        grid-template-columns: 1fr clamp(280px, 28vw, 420px);
    }

    body:has(#search-results-panel.open) > :not(#search-results-panel) {
        grid-column: 1;
        min-width: 0;
    }

    body:has(#search-results-panel.open) > #search-results-panel {
        grid-column: 2;
        grid-row: 1 / -1;
        position: sticky;
        top: calc(var(--header-height, 50px) + var(--toolbar-ribbon-h, 28px));
        height: calc(100dvh - var(--header-height, 50px) - var(--toolbar-ribbon-h, 28px));
        border-left: 1px solid var(--color-border);
        overflow-y: auto;
    }
}


/* ── §2b  Tablet (--bp-phone to --bp-desktop): overlay sidebar ──────────── */

@media (min-width: 500px) and (max-width: 899px) /* --bp-phone to --bp-desktop */ {
    #search-results-panel.open {
        position: fixed;
        right: 0;
        bottom: 0;
        width: clamp(280px, 55vw, 420px);
        z-index: 500;
        border-left: 1px solid var(--color-border);
        box-shadow: -4px 0 12px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
        overflow: hidden; /* content container scrolls instead */
    }
}

/* Phone band (500–649): header scrolls away, toolbar is the bottom
   strip — no top chrome post-scroll.  Panel should butt against the
   top of the viewport once the header is gone.  Default top:0 is the
   long-lived post-scroll state; scroll-driven animation pushes it
   down to clear the header pre-scroll in supporting browsers. */
@media (min-width: 500px) and (max-width: 649px) /* --bp-phone to --bp-tablet */ {
    #search-results-panel.open {
        top: 0;
    }
    @supports (animation-timeline: scroll()) {
        @keyframes search-panel-settle-phone {
            from { top: var(--header-height, 50px); }
            to   { top: 0; }
        }
        #search-results-panel.open {
            animation: search-panel-settle-phone linear both;
            animation-timeline: scroll(root);
            animation-range: 0 var(--header-height, 50px);
        }
    }
}

/* Tablet band (650–899): header scrolls away, toolbar becomes a
   sticky 40px top strip (see edition_text.css §30b).  Panel should
   butt against the bottom of that sticky strip once the header is
   gone.  Default top = toolbar height (post-scroll state); scroll-
   driven animation slides it down by header-height pre-scroll so the
   panel clears the header in supporting browsers. */
@media (min-width: 650px) and (max-width: 899px) /* --bp-tablet to --bp-desktop */ {
    #search-results-panel.open {
        top: var(--toolbar-ribbon-h, 40px);
    }
    @supports (animation-timeline: scroll()) {
        @keyframes search-panel-settle-tablet {
            from { top: calc(var(--header-height, 50px) + var(--toolbar-ribbon-h, 40px)); }
            to   { top: var(--toolbar-ribbon-h, 40px); }
        }
        #search-results-panel.open {
            animation: search-panel-settle-tablet linear both;
            animation-timeline: scroll(root);
            animation-range: 0 var(--header-height, 50px);
        }
    }
}


/* ── §2c  Phone (< --bp-phone): full viewport ──────────────────────────── */

@media (max-width: 499px) /* < --bp-phone */ {
    #search-results-panel.open {
        position: fixed;
        inset: 0;
        z-index: 600;
        overflow: hidden; /* content container scrolls instead */
    }
}


/* ── §2d  Panel search field (< --bp-desktop only) ──────────────────────── */

/* Hidden by default; shown only on mobile/tablet when panel is open. */
.search-panel-field {
    display: none;
}

@media (max-width: 899px) /* < --bp-desktop */ {
    #search-results-panel.open .search-panel-field {
        display: flex;
        align-items: center;
        gap: 0.4em;
        padding: 0.5em;
        border-bottom: 1px solid var(--color-border);
        background: var(--color-bg-subtle);
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 6; /* above panel toolbar (5) */
    }

    .search-panel-form {
        display: flex;
        flex: 1;
        align-items: center;
        gap: 0.3em;
    }

    .search-panel-input {
        flex: 1;
        padding: 0.35em 0.5em;
        font-size: 1rem; /* 1em would inherit panel's 0.85rem (13.6px), triggering iOS auto-zoom */
        font-family: var(--font-ui);
        border: 1px solid var(--color-border);
        border-radius: 4px;
        background: var(--color-bg);
        color: var(--color-text);
        min-width: 0;
    }

    .search-panel-input:focus {
        border-color: var(--color-accent);
        outline: none;
        box-shadow: 0 0 0 2px var(--color-accent-ring, rgba(0, 102, 204, 0.3));
    }

    .search-panel-submit {
        display: flex;
        align-items: center;
        background: none;
        border: none;
        color: var(--color-text);
        cursor: pointer;
        padding: 0.2em;
        line-height: 1;
    }

    .search-panel-cancel {
        background: none;
        border: none;
        color: var(--color-accent);
        font-family: var(--font-ui);
        font-size: 0.9em;
        cursor: pointer;
        padding: 0.3em 0.4em;
        white-space: nowrap;
    }
}


/* ── §3  Panel toolbar ───────────────────────────────────────────────────── */

.search-panel-toolbar {
    display: flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.35em 0.5em;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    font-family: var(--font-ui);
    font-size: 0.85em;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 5;
}

.search-panel-summary {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-panel-close {
    background: none;
    border: none;
    font-size: 1.3em;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0.1em 0.3em;
    margin-left: 0.3em;
    border-radius: 3px;
}

.search-panel-close:hover {
    color: var(--color-text);
    background: var(--color-bg-glass-solid);
}

.search-panel-close:focus-visible {
    outline: 2px solid var(--color-accent, #0066cc);
    outline-offset: 1px;
}


/* ── §4  Result items ────────────────────────────────────────────────────── */

.search-panel-results {
    padding: 0.5em;
}

.search-panel-hit {
    display: flex;
    gap: 0.6em;
    padding: 0.35em 0.3em;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.search-panel-hit:hover {
    background: var(--color-bg-subtle);
}

.search-panel-hit:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
    border-radius: 2px;
}

.search-panel-hit .result-lineref {
    flex-shrink: 0;
    font-size: 0.85em;
    color: var(--color-accent);
    min-width: 3em;
    padding-top: 0.15em;
}

.search-panel-hit .result-lines {
    flex: 1;
    min-width: 0;
}

.search-panel-hit .context-line {
    opacity: 0.5;
}

.search-panel-hit .match-line {
    /* inherits font */
}

.search-panel-hit mark.search-hit {
    background: var(--color-search-hit);
    color: inherit;
    padding: 0.05em 0.1em;
    border-radius: 2px;
}


/* ── §5  Loading + empty states ──────────────────────────────────────────── */

.search-panel-empty {
    padding: 1.5em;
    text-align: center;
    color: var(--color-text-muted);
}

.search-panel-load-more {
    display: block;
    width: 100%;
    padding: 0.5em;
    margin: 0.5em 0;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    cursor: pointer;
    color: var(--color-accent);
    font-family: var(--font-ui);
    font-size: 0.85em;
}

.search-panel-load-more:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-strong);
}


/* ── §6  Toolbar search field ────────────────────────────────────────────── */

/* -- Base (all sizes) -- */
.toolbar-search {
    display: flex;
    align-items: center;
}

.toolbar-search-trigger {
    display: none; /* shown only on mobile */
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    padding: 0 0.3em;
    line-height: 1;
}

.toolbar-search-trigger:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    border-radius: 3px;
}

.icon-search {
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

.toolbar-search-submit {
    display: none;
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    padding: 0 0.2em;
    line-height: 1;
}

.toolbar-search-submit:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    border-radius: 3px;
}

.toolbar-search-cancel {
    display: none; /* shown only on mobile expand */
}

/* -- Desktop (≥ --bp-desktop): always visible inline field -- */
@media (min-width: 900px) /* --bp-desktop */ {
    .toolbar-search {
        /* margin-left: auto moved to .toolbar-links in edition_text.css
           so that </>, Download, and Search push right as a group. */
    }

    .toolbar-search-form {
        display: flex;
        align-items: center;
        gap: 0.3em;
    }

    .toolbar-search-input {
        width: 14em;
        padding: 0.15em 0.4em;
        font-size: 0.85em;
        font-family: var(--font-ui);
        border: 1px solid var(--color-border);
        border-radius: 3px;
        background: var(--color-bg);
        color: var(--color-text);
    }

    .toolbar-search-input:focus {
        border-color: var(--color-accent);
        outline: none;
        box-shadow: 0 0 0 2px var(--color-accent-ring);
    }

    .toolbar-search-submit {
        display: flex;
        align-items: center;
    }
}

/* -- Mobile/tablet (< --bp-desktop): magnifying glass trigger, expand-in-place -- */
@media (max-width: 899px) /* < --bp-desktop */ {
    .toolbar-search-trigger {
        display: flex;
        align-items: center;
        padding: 0 0.5em;
    }

    .toolbar-search-form {
        display: none;
    }

    /* Expanded state */
    .toolbar-ribbon.toolbar--search-open .toolbar-items > li:not(.toolbar-search) {
        display: none;
    }

    .toolbar-ribbon.toolbar--search-open .toolbar-search {
        flex: 1;
    }

    .toolbar-ribbon.toolbar--search-open .toolbar-search-trigger {
        display: none;
    }

    .toolbar-ribbon.toolbar--search-open .toolbar-search-form {
        display: flex;
        flex: 1;
        align-items: center;
        gap: 0.3em;
    }

    .toolbar-ribbon.toolbar--search-open .toolbar-search-input {
        flex: 1;
        padding: 0.2em 0.4em;
        font-size: 0.85em;
        font-family: var(--font-ui);
        border: 1px solid var(--color-border);
        border-radius: 3px;
        background: var(--color-bg);
        color: var(--color-text);
        min-width: 0;
    }

    .toolbar-ribbon.toolbar--search-open .toolbar-search-input:focus {
        border-color: var(--color-accent);
        outline: none;
    }

    .toolbar-ribbon.toolbar--search-open .toolbar-search-submit {
        display: flex;
        align-items: center;
    }

    .toolbar-ribbon.toolbar--search-open .toolbar-search-cancel {
        display: inline;
        background: none;
        border: none;
        color: var(--color-accent);
        font-family: var(--font-ui);
        font-size: 0.85em;
        cursor: pointer;
        padding: 0.2em 0.4em;
        white-space: nowrap;
    }
}


/* ── §7  Passus-level search highlights (server-rendered via exist:match) ── */

/* All matches start strong, then settle to a subtle but visible background. */
#page-content mark.search-hit {
    background: var(--color-search-hit);
    color: inherit;
    padding: 0.05em 0.1em;
    border-radius: 2px;
    animation: search-highlight-settle 5s ease-out 2s forwards;
}

/* The fragment-targeted line's highlights stay strong (no fade). */
#page-content .linetext:target mark.search-hit {
    animation: none;
}

@keyframes search-highlight-settle {
    0%, 40% { background: var(--color-search-hit); }
    100%    { background: var(--color-search-hit-settle); }
}

/* Pulse animation for navigated-to marks. */
#page-content mark.search-hit.search-hit-pulse {
    animation: search-hit-pulse 0.6s ease-out;
}

@keyframes search-hit-pulse {
    0%   { background: var(--color-search-hit-strong); }
    100% { background: var(--color-search-hit); }
}


/* ── §8  Panel nav buttons + current hit indicator ─────────────────────── */

.search-panel-nav {
    background: none;
    border: none;
    font-size: 0.85em;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0.15em 0.25em;
    border-radius: 3px;
}

.search-panel-nav:hover:not(:disabled) {
    color: var(--color-text);
    background: var(--color-bg-glass-solid);
}

.search-panel-nav:disabled {
    opacity: 0.3;
    cursor: default;
}

.search-panel-nav:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.search-panel-hit.current {
    border-left: 3px solid var(--color-accent);
    background: light-dark(rgba(0, 102, 204, 0.06), rgba(100, 180, 255, 0.08));
    padding-left: calc(0.3em - 3px);
}


/* ── §9  Floating match navigation tooltip ─────────────────────────────── */

.search-match-nav {
    position: absolute;
    z-index: 8;  /* below toolbar (20), header (25), and panels (500+) */
    display: none;
    align-items: center;
    gap: 0.3em;
    padding: 0.25em 0.5em;
    width: max-content;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 2px 8px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
    font-family: var(--font-ui);
    font-size: 0.8rem;
    white-space: nowrap;
}

.search-match-nav.visible {
    display: flex;
}

.match-nav-prev,
.match-nav-next {
    background: none;
    border: none;
    font-size: 0.9em;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0.2em 0.3em;
    border-radius: 3px;
}

.match-nav-prev:hover:not(:disabled),
.match-nav-next:hover:not(:disabled) {
    color: var(--color-text);
    background: var(--color-bg-subtle);
}

.match-nav-prev:disabled,
.match-nav-next:disabled {
    opacity: 0.3;
    cursor: default;
}

.match-nav-position {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 3em;
    text-align: center;
}