/* EXJW Search Engine — /search/
   Uses the site's CSS custom properties throughout, so the light/dark toggle
   in main.css governs this page too; no colours are hard-coded. */

.sx-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

/* ── Header ─────────────────────────────────────────────── */
.sx-head { text-align: center; margin-bottom: 1.75rem; }
.sx-head h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--color-heading);
    margin: 0 0 .5rem;
}
.sx-sub {
    color: var(--color-text-muted);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Search box ─────────────────────────────────────────── */
.sx-form {
    display: flex;
    gap: .5rem;
    max-width: 680px;
    margin: 0 auto 2.5rem;
}
.sx-form input[type="search"] {
    flex: 1;
    padding: .85rem 1.1rem;
    font: inherit;
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.sx-form input[type="search"]:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.sx-form button {
    padding: .85rem 1.5rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition);
}
.sx-form button:hover { background: var(--color-accent-hover); }

/* ── Sections ───────────────────────────────────────────── */
.sx-section { margin-bottom: 3rem; }
.sx-section > h2 {
    font-size: 1.25rem;
    color: var(--color-heading);
    margin: 0 0 .35rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--color-border);
}
.sx-note, .sx-meta {
    color: var(--color-text-muted);
    font-size: .875rem;
    margin: .5rem 0 1.25rem;
}
.sx-meta { margin: .5rem 0 0; }

/* ── Highlighted match ──────────────────────────────────── */
mark {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    font-weight: 600;
    padding: 0 .1em;
    border-radius: 3px;
}

/* ── Publication results ────────────────────────────────── */
.sx-results { list-style: none; margin: 0; padding: 0; counter-reset: sxr; }
.sx-result {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}
.sx-result-head { margin-bottom: .85rem; }
.sx-result-head h3 {
    font-size: 1.05rem;
    color: var(--color-heading);
    margin: 0 0 .4rem;
    line-height: 1.35;
}
.sx-source {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: .8rem;
}
.sx-source span {
    padding: .18rem .55rem;
    border-radius: 999px;
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
}
.sx-source .sx-year { font-variant-numeric: tabular-nums; font-weight: 600; }
.sx-source .sx-coll { color: var(--color-accent); background: var(--color-accent-subtle); }

blockquote.sx-quote {
    margin: 0 0 .6rem;
    padding: .7rem 0 .7rem 1rem;
    border-left: 3px solid var(--color-border);
    color: var(--color-text);
    line-height: 1.65;
    font-size: .94rem;
}
blockquote.sx-quote cite {
    display: block;
    margin-top: .4rem;
    font-size: .78rem;
    font-style: normal;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Video results ──────────────────────────────────────── */
.sx-videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
.sx-video {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.sx-video:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.sx-thumb { position: relative; line-height: 0; background: var(--color-surface-raised); }
.sx-thumb img { width: 100%; height: auto; display: block; }
.sx-stamp {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    padding: .15rem .45rem;
    font-size: .78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: rgba(0, 0, 0, .82);
    border-radius: 4px;
}
.sx-video-body { padding: .85rem 1rem 1rem; }
.sx-video-body h3 {
    font-size: .95rem;
    line-height: 1.35;
    margin: 0 0 .5rem;
    color: var(--color-heading);
}
.sx-video .sx-quote {
    margin: 0;
    padding: 0;
    border: none;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* ── Empty / examples / debug ───────────────────────────── */
.sx-empty {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    line-height: 1.65;
}
.sx-empty p, .sx-empty ul { color: var(--color-text-muted); margin: .75rem 0; }
.sx-empty li { margin-bottom: .35rem; }

.sx-examples ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.sx-examples a {
    display: block;
    padding: .7rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-accent);
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition);
}
.sx-examples a:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
}

.sx-debug {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--color-text-muted);
    overflow-x: auto;
    margin-bottom: 1.5rem;
    white-space: pre-wrap;
}

@media (max-width: 560px) {
    .sx-form { flex-direction: column; }
    .sx-videos { grid-template-columns: 1fr; }
}

/* ── AI relevance note ──────────────────────────────────── */
.sx-why {
    margin: .55rem 0 0;
    padding: .4rem .65rem;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    background: var(--color-surface-raised);
    border-left: 2px solid var(--color-accent);
    border-radius: 0 4px 4px 0;
}
.sx-why::before {
    content: "Relevance: ";
    font-weight: 600;
    color: var(--color-accent);
}

/* ── Live progress ──────────────────────────────────────── */
.sx-live {
    max-width: 680px;
    margin: 0 auto 2rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.sx-steps { list-style: none; margin: 0; padding: 0; }
.sx-step {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .3rem 0;
    font-size: .875rem;
    color: var(--color-text);
    animation: sx-fade .25s ease;
}
@keyframes sx-fade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; } }
.sx-step-dot {
    flex: none;
    width: 8px; height: 8px;
    margin-top: .42rem;
    border-radius: 50%;
    background: var(--color-accent);
}
.sx-live.is-running .sx-step:last-child .sx-step-dot { animation: sx-pulse 1s ease-in-out infinite; }
@keyframes sx-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }
.sx-step.is-done { color: var(--color-text-muted); }
.sx-step.is-done .sx-step-dot { background: var(--color-success); }
.sx-step-query .sx-step-text { font-family: var(--font-mono); font-size: .78rem; }
.sx-step-notfound .sx-step-dot, .sx-step-empty .sx-step-dot { background: var(--color-warning); }

/* ── jw.org lookup ──────────────────────────────────────── */
.sx-jw {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .3rem;
    padding: .4rem .8rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-accent);
    background: var(--color-accent-subtle);
    border: 1px solid transparent;
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition);
}
.sx-jw::after { content: "↗"; font-weight: 400; opacity: .7; }
.sx-jw:hover { border-color: var(--color-accent); }
.sx-jw-none {
    margin: .3rem 0 0;
    font-size: .8rem;
    font-style: italic;
    color: var(--color-text-muted);
}
.sx-jw-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .35rem; }

/* Nothing in a result may break out of its card. Excerpts are OCR'd text and
   can contain long unbroken runs (scanned rules, dot-leaders, URLs) that have
   no wrap opportunity; without this they overflow the box and draw a line
   across the page. The excerpt cleaner removes the known cases — this is the
   guard for the ones it hasn't met yet. */
.sx-result, .sx-empty { overflow: hidden; }   /* .sx-video already clips, above */
.sx-quote, .sx-why, .sx-result-head h3, .sx-video-body h3, .sx-source span {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ── "Show more videos" ──────────────────────────────────────
   A checkbox toggle rather than a JS one: the ?nojs=1 render path has no
   JavaScript at all, and this way both paths use identical markup and the
   overflow videos are already in the DOM — no second request to expand. */
/* Fixed, not absolute. The checkbox has to sit before .sx-videos for the
   sibling selectors below, but clicking the label focuses it — and the browser
   scrolls a newly focused element into view, which yanked the page back to the
   top of the video list. Pinned to the viewport it is always already in view,
   so focusing it scrolls nowhere and the reader keeps their place. */
.sx-more-toggle {
    position: fixed;
    top: 0; left: 0;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.sx-more-toggle ~ .sx-videos .sx-extra,
.sx-more-toggle ~ .sx-results .sx-extra { display: none; }
/* Restore each container's own display type, not a generic block: video cards
   are flex columns, publication results are list items. */
.sx-more-toggle:checked ~ .sx-videos .sx-extra { display: flex; }
.sx-more-toggle:checked ~ .sx-results .sx-extra { display: list-item; }
.sx-more-toggle:checked ~ .sx-more-label { display: none; }
.sx-more-label {
    display: inline-block;
    margin-top: 1rem;
    padding: .5rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.sx-more-label:hover { border-color: var(--color-accent); }
.sx-more-toggle:focus-visible ~ .sx-more-label {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-subtle);
    border-color: var(--color-accent);
}

/* ── Other ExJW creators (courtesy section) ──────────────────
   Visually set apart from the channel's own results so there is no chance of
   a reader mistaking these for Jon's videos or for Watchtower sources. */
.sx-disclaimer {
    margin: 0 0 .75rem;
    padding: .7rem .9rem;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius);
}
.sx-channel {
    margin: .15rem 0 .3rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* ── Source filters ──────────────────────────────────────────
   Real checkboxes in a fieldset: they submit with the form on the no-JS path,
   they are keyboard-navigable for free, and they read correctly to a screen
   reader without any ARIA. */
.sx-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.sx-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    max-width: 680px;
    margin: -1.75rem auto 2.5rem;   /* tuck up under the search box */
    padding: 0;
    border: 0;
}
.sx-filter {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .75rem;
    font-size: .875rem;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.sx-filter:hover { border-color: var(--color-accent); }
.sx-filter input { accent-color: var(--color-accent); cursor: pointer; margin: 0; }
/* An unticked source is excluded — make that obvious at a glance rather than
   relying on the checkbox alone. */
.sx-filter:has(input:not(:checked)) {
    opacity: .55;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.sx-filter:has(input:checked) {
    color: var(--color-text);
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
}
.sx-filter:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-subtle);
    border-color: var(--color-accent);
}