/* SEARCH (nav/search.js): the window, in the shared frame (nav/ui.css), what's typed and where to look at its top, and
   what's found: the best of it, the verses, and the things on the site, each a row that opens it. And its two ways in:
   a bar at the top of Home, and a button in the header */
.sr { position: fixed; inset: 0; z-index: 2147483000; background: var(--bg); color: var(--ink); overflow: hidden; }
.sr[hidden] { display: none; }
.sr-box { position: absolute; inset: 0; display: flex; flex-direction: column; max-width: 900px; margin: 0 auto; }
.sr .ui-head { padding: calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 8px calc(14px + env(safe-area-inset-left)); }
.sr-top { flex: none; display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); background: var(--bg); }
.sr-rows { display: flex; flex-direction: column; gap: 10px; padding: 12px calc(14px + env(safe-area-inset-right)) 12px calc(14px + env(safe-area-inset-left)); } /* (room above the box: flush under the top bar's line, it looked pressed into it) */
.sr-field { position: relative; display: block; }
.sr-field svg { position: absolute; left: 14px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.sr-field .sr-q { width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px 0 42px; -webkit-appearance: none; appearance: none; }
.sr-field .sr-q::-webkit-search-decoration { -webkit-appearance: none; }
.sr-scope { align-self: flex-start; }
.sr-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sr-col { max-width: 720px; margin: 0 auto; padding: 14px calc(16px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }

/* (the meaning search coming in, the first time; and what it is, at the foot) */
.sr-mean { margin: 0 0 12px; font: 600 13px/1.4 var(--sans); color: var(--muted); }
.sr-mean[hidden] { display: none; }
.sr-note { margin: 22px 0 0; font: 500 12.5px/1.5 var(--sans); color: var(--muted); }

/* (before anything's typed: a few to try) */
.sr-try .ui-label { margin: 4px 0 10px; }
.sr-exs { display: flex; flex-wrap: wrap; gap: 8px; }

/* (what's found) */
.sr-sec { margin: 0 0 20px; }
.sr-sec > .ui-label { margin: 0 0 8px; }
.sr-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sr-row { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sr-row:hover { border-color: color-mix(in srgb, var(--gold) 50%, var(--rule)); }
.sr-row b { font: 700 15px/1.35 var(--sans); }
.sr-row > span { font: 14.5px/1.5 var(--sans); color: color-mix(in srgb, var(--ink) 82%, var(--bg)); }
.sr-verse b { color: var(--gold); }
.sr-verse .sr-vt { font: 16px/1.55 var(--serif); color: var(--ink); }
.sr-k { font: 800 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--door, var(--muted)); }
.sr-said { font-style: italic; }
.sr-said::before { content: '“'; } .sr-said::after { content: '”'; }
.sr-row.is-best { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.sr-none { margin: 0; font: 14px/1.5 var(--sans); color: var(--muted); }
.sr-more { margin-top: 10px; }
/* (a reference typed: straight to it) */
.sr-ref { display: flex; align-items: baseline; gap: 8px; width: 100%; margin: 0 0 18px; padding: 12px 14px; border: none; border-radius: 14px; background: color-mix(in srgb, var(--gold) 14%, var(--bg)); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sr-ref span { font: 800 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.sr-ref b { font: italic 600 18px var(--serif); }

/* (Home's bar: looks like a box to type in, opens the window) */
.sr-home { display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); max-width: 640px; box-sizing: border-box; margin: 14px auto 4px; padding: 0 16px; height: 48px; border: 1.5px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--muted); font: 500 16px var(--sans); text-align: left; cursor: text; -webkit-tap-highlight-color: transparent; }
.sr-home svg { flex: none; width: 19px; height: 19px; }
.sr-home span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-home:hover { border-color: color-mix(in srgb, var(--gold) 50%, var(--rule)); }
body.home-kids .sr-home { display: none; }
/* (the header's: a round button before Share) */
.sr-hbtn { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sr-hbtn svg { width: 18px; height: 18px; }