/* ============================================================
   search.css — the SPLADE search box, its results dropdown,
   and the breakdown panels on /search/.

   Loaded by /search/ and by the front page (which uses only the
   box and the dropdown). Kept out of site/site.css so the shared
   stylesheet and its cache-busting hash stay untouched. Every
   colour is a token, so light, dark and print follow for free.
   ============================================================ */

/* ---------- hero: short, because the box is the point ---------- */
.sp-hero{padding:clamp(40px,7vw,72px) 0 clamp(20px,3vw,28px)}
.sp-hero h1{font:700 clamp(34px,5.6vw,56px)/1.08 var(--serif);letter-spacing:-.02em;max-width:18ch}
.sp-hero .lede{font-size:clamp(17px,2.2vw,20px);color:var(--muted);margin-top:20px;max-width:62ch}

/* ---------- the field ---------- */
.sp-box{margin-bottom:clamp(30px,6vw,54px)}
.sp-field-wrap{position:relative;z-index:20}
.sp-field{display:flex;align-items:center;gap:12px;
          background:var(--card);border:1px solid var(--hair);border-radius:12px;
          padding:0 14px 0 16px;box-shadow:var(--shadow)}
.sp-field:focus-within{border-color:var(--accent);
                       box-shadow:0 0 0 3px var(--accent-faint),var(--shadow)}
.sp-field > svg{flex:none;width:18px;height:18px;stroke:var(--faint);fill:none;stroke-width:2;
                stroke-linecap:round}
#q,#hq{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
       font:400 17px/1 var(--sans);padding:17px 0;outline:none;
       -webkit-appearance:none;appearance:none}
#q::placeholder,#hq::placeholder{color:var(--faint)}
/* the browser's own clear affordance duplicates ours */
#q::-webkit-search-cancel-button,#hq::-webkit-search-cancel-button{display:none}
.sp-clear{flex:none;display:grid;place-items:center;width:30px;height:30px;border:0;
          background:transparent;color:var(--faint);cursor:pointer;border-radius:7px;padding:0}
.sp-clear svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
              stroke-linecap:round}
.sp-clear:hover{color:var(--accent);background:var(--accent-faint)}
.sp-clear[hidden]{display:none}

/* ---------- the dropdown ---------- */
.sp-ac{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;
       background:var(--card);border:1px solid var(--hair);border-radius:12px;
       box-shadow:0 24px 60px -28px rgba(21,24,29,.45),var(--shadow);
       overflow:hidden}
.sp-ac[hidden]{display:none}
.sp-ac-list{list-style:none;margin:0;padding:6px;max-height:min(62vh,460px);overflow-y:auto;
            -webkit-overflow-scrolling:touch}
.sp-ac-foot{border-top:1px solid var(--hair-soft);padding:9px 16px;
            font:400 12.5px/1.4 var(--sans);color:var(--faint);background:var(--canvas-2)}
.sp-ac-foot:empty{display:none}
.sp-opt-empty{padding:18px 16px;color:var(--muted);font-size:15px}

/* one result row */
.sp-opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 12px;
        align-items:center;padding:11px 12px;border-radius:9px;cursor:pointer}
.sp-opt.on,.sp-opt:hover{background:var(--accent-faint)}
.sp-rank{flex:none;width:26px;height:26px;border-radius:7px;
         display:grid;place-items:center;background:var(--canvas-2);color:var(--muted);
         font:600 12.5px/1 var(--mono);border:1px solid var(--hair-soft)}
.sp-opt.on .sp-rank{background:var(--accent);color:#fff;border-color:var(--accent)}
.sp-opt-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.sp-opt-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sp-opt-title{font:600 15.5px/1.35 var(--sans);color:var(--ink);letter-spacing:-.01em;
              overflow-wrap:anywhere}
.sp-opt-meta{font-size:12.5px;color:var(--faint);
             display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sp-score{margin-left:auto;font:500 12.5px/1 var(--mono);color:var(--accent)}
.sp-kind{font:500 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.09em;
         color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:4px 7px}

/* the source link: the one thing in a row that is a real link */
.sp-src{flex:none;display:grid;place-items:center;
        width:32px;height:32px;border-radius:8px;color:var(--faint);
        border:1px solid var(--hair-soft);text-decoration:none}
.sp-src svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
            stroke-linecap:round;stroke-linejoin:round}
.sp-src:hover{color:var(--accent);border-color:var(--accent);background:var(--card)}

/* the stacked score bar, in a row and under a hit */
.sp-stack{display:flex;height:5px;border-radius:3px;overflow:hidden;margin-top:5px;
          background:var(--hair-soft)}
.sp-stack i{display:block;height:100%;background:var(--accent)}
.sp-stack i.exp{background:var(--accent-2)}

/* ---------- examples, status, skeleton ---------- */
.sp-examples{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.sp-examples > span{font:500 12px/1 var(--sans);color:var(--faint);
                    text-transform:uppercase;letter-spacing:.09em}
.sp-ex{border:1px solid var(--hair);background:transparent;color:var(--muted);cursor:pointer;
       font:400 13.5px/1 var(--sans);padding:7px 12px;border-radius:999px}
.sp-ex:hover{border-color:var(--accent);color:var(--accent)}

.sp-status{margin-top:16px;font:500 13.5px/1.5 var(--sans);color:var(--muted)}
.sp-status.err{color:var(--accent-2)}
.sp-status:empty{display:none}
.sp-skel{margin-top:16px;display:grid;gap:10px}
/* an author `display` beats the UA rule for [hidden], so say it explicitly */
.sp-skel[hidden]{display:none}
.sp-skel i{display:block;height:52px;border-radius:10px;border:1px solid var(--hair-soft);
           background:linear-gradient(90deg,var(--canvas-2) 0%,var(--card) 50%,var(--canvas-2) 100%);
           background-size:220% 100%;animation:sp-shimmer 1.4s linear infinite}
.sp-skel i:nth-child(2){animation-delay:.12s}
.sp-skel i:nth-child(3){animation-delay:.24s}
@keyframes sp-shimmer{to{background-position:-220% 0}}

/* ---------- facets: the deliberately non-neural path ---------- */
.sp-facets{margin-top:20px;border-top:1px solid var(--hair-soft);padding-top:16px}
.sp-facets[hidden]{display:none}
.sp-facet{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-top:9px}
.sp-facet > span{flex:none;width:52px;font:500 12.5px/1.6 var(--sans);color:var(--faint)}
.sp-facet-chips{display:flex;flex-wrap:wrap;gap:7px}
.sp-chip{border:1px solid var(--hair);background:transparent;color:var(--muted);cursor:pointer;
         font:500 12.5px/1 var(--sans);padding:6px 10px;border-radius:999px}
.sp-chip:hover{border-color:var(--accent);color:var(--accent)}
.sp-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- which result is being dissected ---------- */
.sp-picker-label{font:500 12px/1 var(--sans);color:var(--faint);
                 text-transform:uppercase;letter-spacing:.09em;margin:24px 0 10px}
.sp-picker-label[hidden]{display:none}
.sp-picker{display:flex;gap:8px;padding-bottom:4px}
.sp-picker[hidden]{display:none}
.sp-pick{flex:none;max-width:min(260px,68vw);display:flex;align-items:center;gap:8px;
         border:1px solid var(--hair);background:var(--card);color:var(--muted);cursor:pointer;
         font:500 13px/1.3 var(--sans);padding:9px 13px;border-radius:9px;text-align:left;
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-pick .n{flex:none;font:600 11px/1 var(--mono);color:var(--faint)}
.sp-pick:hover{border-color:var(--accent);color:var(--accent)}
.sp-pick.on{border-color:var(--accent);background:var(--accent-faint);color:var(--accent)}
.sp-pick.on .n{color:var(--accent)}

/* ---------- panels ---------- */
.sp-breakdown{padding-top:0}
.sp-panel{margin-top:20px;border:1px solid var(--hair);border-radius:14px;
          background:var(--card);overflow:hidden}
.sp-panel > header{display:flex;flex-wrap:wrap;gap:5px 16px;align-items:baseline;
                   padding:15px 20px;border-bottom:1px solid var(--hair-soft);
                   background:var(--canvas-2)}
.sp-panel > header h2{font:600 15.5px/1.3 var(--sans);letter-spacing:-.01em}
.sp-panel > header p{font-size:13.5px;color:var(--muted);margin-left:auto;max-width:44ch}
.sp-body{padding:18px 20px}
.sp-empty{color:var(--faint);font-size:15px}
.sp-note{margin-top:12px;font-size:13.5px;color:var(--muted);max-width:64ch}
.sp-note:empty{display:none}

/* wide content scrolls inside itself; the page never scrolls sideways */
.sp-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}

/* ---------- query decomposition ---------- */
.sp-qterms{display:flex;flex-wrap:wrap;gap:9px}
.sp-qterm{border:1px solid var(--hair);border-radius:9px;padding:8px 11px 7px;
          min-width:88px;background:var(--canvas-2)}
.sp-qterm .tk{font:500 13.5px/1.3 var(--mono);color:var(--ink);word-break:break-all}
.sp-qterm .tk .cont,.sp-term .cont,.sp-contrib-list .cont{color:var(--faint)}
.sp-qterm .wt{font:400 11.5px/1.4 var(--mono);color:var(--muted);margin-top:3px}
.sp-qterm .rail{margin-top:6px;height:4px;border-radius:2px;background:var(--hair-soft)}
.sp-qterm .rail i{display:block;height:100%;border-radius:2px;background:var(--accent)}
.sp-qterm.dead{border-style:dashed}
.sp-qterm.dead .tk{color:var(--muted)}
.sp-qterm.dead .rail i{background:var(--faint)}
.sp-qterm.miss .rail i{background:var(--accent-2)}
.sp-qsplit{margin-top:14px;font-size:13.5px;color:var(--muted)}
.sp-qsplit:empty{display:none}
.sp-qsplit code{font:500 12.5px var(--mono);color:var(--ink-2)}

/* ---------- score decomposition ---------- */
.sp-doc-head{display:flex;flex-wrap:wrap;gap:5px 14px;align-items:baseline}
.sp-doc-head h3{font:600 16.5px/1.35 var(--sans);letter-spacing:-.01em}
.sp-doc-head a{font:500 13.5px/1 var(--sans);color:var(--accent);margin-left:auto;flex:none}
.sp-doc-meta{font-size:13px;color:var(--faint);margin-top:4px}
.sp-doc-meta:empty{display:none}
.sp-contrib-sum{margin-top:16px;font-size:14px;color:var(--muted)}
.sp-contrib-sum b{font:600 15px/1 var(--mono);color:var(--accent)}
.sp-contrib-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:5px}
.sp-contrib-list li{display:grid;grid-template-columns:minmax(72px,132px) 1fr auto auto;
                    gap:10px;align-items:center;font-size:13px}
.sp-contrib-list .tk{font:500 13px/1.3 var(--mono);overflow-wrap:anywhere}
.sp-contrib-list .tk.lit{color:var(--accent)}
.sp-contrib-list .tk.exp{color:var(--accent-2)}
.sp-contrib-list .bar{height:7px;border-radius:4px;background:var(--hair-soft);overflow:hidden}
.sp-contrib-list .bar i{display:block;height:100%;background:var(--accent)}
.sp-contrib-list .bar i.exp{background:var(--accent-2)}
.sp-contrib-list .mul{font:400 11.5px/1 var(--mono);color:var(--faint);white-space:nowrap}
.sp-contrib-list .val{font:500 12.5px/1 var(--mono);color:var(--ink-2);
                      min-width:34px;text-align:right}

/* ---------- sparsity strip ---------- */
.sp-strip{width:100%;height:100px;display:block;border-radius:8px;background:var(--canvas-2)}
.sp-axis{display:flex;justify-content:space-between;margin-top:6px;
         font:400 11px/1 var(--mono);color:var(--faint)}
.sp-facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:16px}
.sp-facts div{min-width:82px}
.sp-facts b{display:block;font:600 20px/1.2 var(--serif);color:var(--ink)}
.sp-facts span{font:400 12px/1.4 var(--sans);color:var(--faint)}

/* ---------- expansion reveal ---------- */
.sp-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:14px;
           font-size:13px;color:var(--muted)}
.sp-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;
             margin-right:7px;vertical-align:-1px;background:var(--accent)}
.sp-legend i.exp{background:var(--accent-2)}
.sp-legend-hit{outline:2px solid var(--ink);outline-offset:1px;border-radius:4px;padding:0 5px}
.sp-terms{display:flex;flex-wrap:wrap;gap:6px}
.sp-term{display:inline-flex;align-items:baseline;gap:6px;border-radius:7px;padding:5px 8px;
         font:500 13px/1.35 var(--mono);border:1px solid transparent}
.sp-term .w{font-size:11px;opacity:.7;font-weight:400}
.sp-term.lit{background:var(--accent-faint);color:var(--accent);border-color:var(--accent)}
.sp-term.exp{color:var(--accent-2);border-color:var(--accent-2)}
.sp-term.hit{outline:2px solid var(--ink);outline-offset:1px}
.sp-more{font-size:13px;color:var(--faint);align-self:center;padding-left:4px}

.sp-noscript{margin-top:20px;border:1px solid var(--accent-2);border-radius:12px;
             padding:16px 20px;background:var(--card);color:var(--ink-2);font-size:15px}

/* ============================================================
   the front page widget: same box on the dark spotlight panel
   ============================================================ */
.spot-search{gap:12px}
.spot-search .sp-field{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);
                       box-shadow:none;padding:0 10px 0 13px}
.spot-search .sp-field:focus-within{border-color:#3fbeb2;
                                    box-shadow:0 0 0 3px rgba(63,190,178,.18)}
.spot-search .sp-field > svg{stroke:#8b96a2}
.spot-search #hq{color:#eef2f6;font-size:15px;padding:13px 0}
.spot-search #hq::placeholder{color:#8b96a2}
.spot-search .sp-clear{color:#8b96a2}
.spot-search .sp-clear:hover{color:#3fbeb2;background:rgba(63,190,178,.14)}
.spot-search .sp-examples{margin-top:2px;gap:6px}
.spot-search .sp-ex{border-color:rgba(255,255,255,.15);color:#98a4b0;
                    font-size:12.5px;padding:6px 10px}
.spot-search .sp-ex:hover{border-color:#3fbeb2;color:#3fbeb2;background:rgba(63,190,178,.10)}
.spot-search .art-cap{margin-top:auto}
.spot-search .art-cap a{color:#3fbeb2;text-decoration-color:rgba(63,190,178,.5)}
/* The dropdown belongs to the page, not the dark panel, so it keeps the
   light-or-dark card treatment and stays readable over either. */
.spot-search .sp-ac{box-shadow:0 26px 70px -30px rgba(0,0,0,.7)}
.spot-search .sp-ac-list{max-height:min(56vh,380px)}
/* The spotlight's right-hand column is narrow; above the breakpoint where the
   card is still two columns, let the results grow leftward over the card. */
@media (min-width:981px){
  .spot-search .sp-ac{left:auto;right:0;width:400px}
}

/* ============================================================
   narrow screens
   ============================================================ */
@media (max-width:640px){
  .sp-panel > header p{margin-left:0}
  .sp-facet > span{width:100%}

  /* Three columns is too many at this width: drop the arithmetic, keep the
     token, the bar and the total. */
  .sp-contrib-list li{grid-template-columns:minmax(64px,104px) 1fr auto}
  .sp-contrib-list .mul{display:none}
}

@media (max-width:480px){
  .sp-opt{gap:0 10px;padding:10px}
  .sp-rank{width:23px;height:23px;font-size:11.5px}
  .sp-opt-title{font-size:14.5px}
  .sp-src{width:29px;height:29px}
  .sp-ac-list{max-height:min(58vh,340px)}
  .sp-hero h1{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .sp-skel i{animation:none}
}

@media print{
  .sp-box,.sp-picker,.sp-picker-label,.sp-ac{display:none}
  .sp-panel{break-inside:avoid;box-shadow:none}
}