/* ═══════════════════════════════════════════════════════════════════════
   SEARCH — the header panel's rows, and the site-wide results page.

   Its own file, loaded by both layouts after their own sheets, for the reason
   ask-panel.css gives: site.css is regenerated from the comp and anything added
   there is lost on the next pass. Every value here is a token both worlds
   already define, so the Archive and the Manuscript need no rules of their own.

   The panel's rows are drawn by js/search.js in the vocabulary of whichever
   panel they are in: `.grp` + `a.it` on every page (site.css), `.search__group`
   + `a.search__item` in the entrance hall (home.css). Those sheets lay the rows
   out; this one only makes them links — colour, focus, the last «all» row.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the words the reader asked for, wherever a result prints them ── */
.sres mark,.search mark{background:color-mix(in srgb,var(--acc) 24%,transparent);color:inherit;
  border-radius:3px;padding:0 .12em}

/* ── the panel ── */
.search form.is-busy svg{opacity:.4}
.search form svg{transition:opacity var(--base)}

.search .res .hint,.search__hint{margin:0;padding:18px 14px 12px;text-align:center;
  font-family:var(--font-ui);font-size:12.5px;line-height:1.8;color:var(--mut)}
.search [hidden]{display:none!important}

.search a.it,a.search__item{color:var(--txt);text-decoration:none;outline:none}
.search a.it:hover,.search a.it:focus-visible,
a.search__item:hover,a.search__item:focus-visible{background:rgba(200,167,91,.09)}
/* The arrows move real focus down the rows, so the focused row has to be unmistakable
   without a mouse anywhere near it. */
.search a.it:focus-visible,a.search__item:focus-visible{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 62%,transparent)}
.search a.it>span:last-child,a.search__item>span:last-child{min-width:0}
/* A fatwa's question is a title here, and some are three lines long. Two is a row. */
.search a.it b,a.search__item b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  line-clamp:2;overflow:hidden}
.search a.it small,a.search__item small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;
  line-clamp:1;overflow:hidden}
.search .is-all{margin-top:6px;border-top:1px solid var(--edge)}
.search .is-all b{font-family:var(--font-ui);font-size:13px;color:var(--acc-text)}

/* The entrance hall's wing chips are buttons now — they choose what is searched —
   and a button brings the browser's own face, which home.css's span rules never met. */
.search__cats button{font:inherit;font-family:var(--font-ui);font-size:12.5px;line-height:1.4;
  color:var(--txt2);background:none;border:1px solid var(--edge);border-radius:999px;padding:6px 14px;
  cursor:pointer;transition:border-color var(--base),color var(--base),background var(--base)}
.search__cats button:hover,.search__cats button.on{border-color:var(--acc);color:var(--acc-text);
  background:rgba(200,167,91,.08)}
.search__cats button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* A hall's search box above its chips, as on الدروس — there the gap is inline. The
   library's chips are books.css's `.chip-row`, not `.filters`, and sat on the box's rule. */
.wsearch+.filters,.wsearch+.chip-row{margin-top:26px}

/* ── the results page ── */
.sres{padding-bottom:var(--sp9)}
.sres__form .wsearch__f input{font-size:1.08rem}
.sres__tabs{margin:0;border-top:0;padding-block:16px 0;border-bottom:0}
.sres__tabs .chip b{font-weight:600;opacity:.72;margin-inline-start:2px}
.sres__tabs .chip.on b{opacity:1}

.sres__list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.sres__card{display:block;padding:20px 24px 22px;border:1px solid var(--edge);border-radius:var(--r-md);
  background:linear-gradient(135deg,color-mix(in srgb,var(--paper) 96%,var(--acc) 4%),var(--paper));
  color:var(--txt);text-decoration:none;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.sres__card:hover{border-color:color-mix(in srgb,var(--acc) 68%,var(--edge));box-shadow:0 18px 48px rgba(27,19,8,.08)}
/* The whole card is one link, so the focus ring is the card's own. */
.sres__card:focus-visible{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 55%,transparent)}
.sres__wing{display:inline-block;font-family:var(--font-ui);font-size:11.5px;line-height:1.6;
  color:var(--acc-text);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);
  border-radius:999px;padding:1px 11px}
.sres__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
  margin-top:10px;font-family:var(--font-head);font-weight:400;
  font-size:clamp(1.12rem,1.02rem + .4vw,1.32rem);line-height:1.7;color:var(--txt)}
.sres__hint{display:block;margin-top:2px;font-family:var(--font-ui);font-size:12.5px;color:var(--mut)}
.sres__snip{display:block;margin-top:10px;font-family:var(--font-body);font-size:15px;line-height:1.95;
  color:var(--txt2)}
.sres .pager{margin-top:30px}

.sres__state{margin-top:26px}
.sres__wings{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}

@media (max-width:600px){
  .sres__card{padding:16px 16px 18px}
  .sres__snip{font-size:14.5px;line-height:1.9}
  /* One row of tabs that scrolls, as the wings' chips do, rather than three that wrap. */
  .sres__tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .sres__tabs::-webkit-scrollbar{display:none}
  .sres__tabs .chip{flex:none}
}