/* Search screen (modules/search.js). One <dialog>: full screen on phones, a tall sheet
   in the middle on wide screens. Colors come from the app theme tokens (light, dark,
   parchment); verse text uses the reader's verse face so results read like Scripture,
   everything else is the UI sans.

   The one mark of this screen: each list is headed by what it matched on.
     “ ”  verses with your words (exact)
     ≈    verses that may be about the idea (close in meaning, not equal)          */

body {
    --srch-mark: var(--color-accent);
    --srch-ref: var(--color-primary);
    --srch-rule: var(--color-border);
}
.dark { --srch-ref: #93b4fd; --srch-mark: #34d399; }
.parchment { --srch-ref: #7a5600; --srch-mark: #55652f; }

dialog.srch {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    overflow: hidden;
}
dialog.srch::backdrop { background: rgba(0, 0, 0, 0.45); }
.srch-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ---------- the field ---------- */
.srch-bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: calc(8px + env(safe-area-inset-top)) 8px 8px 4px;
}
.srch-close, .srch-submit {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--color-text);
    cursor: pointer;
}
.srch-close:hover, .srch-submit:hover { background: var(--color-surface-hover); }
.srch-input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    border: 1.5px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-text);
    font: 400 16px/1 var(--font-sans);   /* 16px: iOS does not zoom the page */
}
.srch-input::placeholder { color: var(--color-text-secondary); opacity: 1; }
.srch-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-bg); }

/* ---------- where to search ---------- */
.srch-scopes {
    flex: none;
    display: flex;
    gap: 6px;
    padding: 0 16px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--srch-rule);
}
.srch-scopes::-webkit-scrollbar { display: none; }
.srch-scope {
    flex: none;
    min-height: 40px;
    padding: 0 14px;
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font: 600 0.88rem var(--font-sans);
    white-space: nowrap;
    cursor: pointer;
}
.srch-scope[aria-pressed="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-surface); }

/* ---------- results ---------- */
.srch-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 16px calc(32px + env(safe-area-inset-bottom));
}
.srch-body:focus { outline: none; }
.srch-body > *, .srch-slot > * { max-width: 42rem; }

.srch-start-lead { margin: 18px 0 12px; color: var(--color-text-secondary); line-height: 1.5; }
.srch-examples { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.srch-example {
    min-height: 40px;
    padding: 0 14px;
    border: 1px dashed var(--color-border);
    border-radius: 999px;
    background: none;
    color: var(--color-text);
    font: 500 0.92rem var(--font-sans);
    cursor: pointer;
}
.srch-example:hover { background: var(--color-surface-hover); }
.srch-start-tip { margin: 16px 0 0; font-size: 0.85rem; color: var(--color-text-secondary); }

/* The lead row: a reference, a word, a topic */
.srch-lead { margin: 14px 0 4px; }
.srch-goto, .srch-word, .srch-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.srch-goto:hover, .srch-word:hover, .srch-row:hover { border-color: var(--color-text-secondary); }
.srch-goto { flex-direction: row; align-items: baseline; gap: 10px; }
.srch-goto-label { font-size: 0.9rem; color: var(--color-text-secondary); }
.srch-goto-ref { font: 600 1.35rem/1.2 var(--font-verse); }
.srch-word-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.srch-word-orig { font-size: 1.6rem; line-height: 1.2; }
.srch-word-tr { font-style: italic; }
.srch-word-num { font-size: 0.85rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.srch-word-def {
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.srch-word-go, .srch-row-sub { margin-top: 4px; font-weight: 600; font-size: 0.9rem; color: var(--srch-ref); }
.srch-row + .srch-row { margin-top: 8px; }
.srch-row-main { font-weight: 600; }
.srch-row-sub { margin-top: 0; font-weight: 500; }
.srch-also-words { margin: 8px 0 0; font-size: 0.85rem; color: var(--color-text-secondary); }

.srch-textbtn {
    min-height: 40px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--srch-ref);
    font: 600 0.9rem var(--font-sans);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.srch-note {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--color-bg-secondary);
    color: var(--color-text);
    font-size: 0.88rem;
    line-height: 1.45;
}

/* A list and its heading */
.srch-section { margin-top: 22px; }
.srch-h {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 2px;
    font: 650 1rem/1.3 var(--font-sans);
    color: var(--color-text);
}
.srch-mark {
    flex: none;
    min-width: 1.4em;
    font: 700 1.3rem/1 var(--font-verse);
    color: var(--srch-mark);
}
.srch-count {
    margin-left: auto;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.srch-how { margin: 0 0 4px; font-size: 0.86rem; color: var(--color-text-secondary); }
.srch-how summary {
    padding: 6px 0;
    cursor: pointer;
    line-height: 1.45;
}
.srch-how summary::marker { color: var(--color-text-secondary); }
.srch-how p { margin: 4px 0 8px; line-height: 1.5; }
.srch-empty-line { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--color-text-secondary); }
.srch-tip { margin: 10px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--color-text-secondary); }

.srch-hits { list-style: none; margin: 0; padding: 0; }
.srch-hits li + li .srch-hit { border-top: 1px solid var(--srch-rule); }
.srch-hit {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 12px 6px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.srch-hit:hover { background: var(--color-surface-hover); }
.srch-ref { display: flex; align-items: baseline; gap: 8px; font: 650 0.9rem var(--font-sans); color: var(--srch-ref); }
.srch-orig { font-weight: 400; font-size: 1rem; color: var(--color-text-secondary); }
.srch-source { font-weight: 500; color: var(--color-text-secondary); }
.srch-text { font: 400 1.04rem/1.55 var(--font-verse); }
.srch-text-comm { font-size: 0.95rem; color: var(--color-text-secondary); }
.srch-text mark, .srch-alt mark {
    padding: 0 1px;
    border-radius: 2px;
    background: var(--color-highlight);
    color: inherit;
}
.srch-alt { font: 400 0.9rem/1.45 var(--font-verse); color: var(--color-text-secondary); }
.srch-alt-tr { font: 650 0.75rem var(--font-sans); letter-spacing: 0.02em; }
.srch-credit { font-size: 0.75rem; color: var(--color-text-secondary); }

.srch-more, .srch-find-idea {
    min-height: 44px;
    margin-top: 6px;
    padding: 0 14px;
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font: 600 0.9rem var(--font-sans);
    cursor: pointer;
}
.srch-find-idea { display: flex; align-items: center; gap: 6px; margin-top: 22px; }
.srch-more:hover, .srch-find-idea:hover { background: var(--color-surface-hover); }

.srch-nothing { margin-top: 28px; color: var(--color-text-secondary); line-height: 1.5; }
.srch-nothing p { margin: 0 0 4px; }
.srch-nothing-title { font-weight: 600; color: var(--color-text); }

.srch-loading { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; color: var(--color-text-secondary); font-size: 0.92rem; }
.srch-dots {
    width: 22px;
    height: 6px;
    background:
        radial-gradient(circle 3px, currentColor 95%, transparent) 0 50% / 8px 6px repeat-x;
    animation: srch-dots 1s steps(3) infinite;
    opacity: 0.7;
}
@keyframes srch-dots { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -10% 0 0); } }

/* Keyboard: a visible ring on whatever the arrows reach */
#search-view :focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: 8px; }
.srch-input:focus-visible { outline: none; }

/* ---------- wide screens: a tall sheet in the middle ---------- */
@media (min-width: 760px) {
    dialog.srch {
        inset: 0;
        width: min(720px, 92vw);
        height: min(86vh, 900px);
        margin: 6vh auto auto;
        border: 1px solid var(--color-border);
        border-radius: 16px;
        box-shadow: var(--shadow-lg);
    }
    .srch-bar { padding: 12px 12px 10px 8px; }
    .srch-scopes { padding-inline: 20px; }
    .srch-body { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .srch-dots { animation: none; clip-path: none; }
}