/* Search field, results, overlay and saved list. Loaded by /search/, /saved/, the 404 page and, on demand, by the header overlay. */
/* ---- search: field, overlay, results, chips, skeleton ---- */
.sf{display:flex;align-items:center;gap:12px;padding:0 14px;border:1.5px solid var(--rule-strong);border-radius:999px;background:var(--card);transition:box-shadow var(--dur-2),border-color var(--dur-2)}
.sf:focus-within{border-color:var(--ring);box-shadow:0 0 0 4px color-mix(in srgb,var(--ring) 20%,transparent)}
.sf>.ic{color:var(--mut);transition:color var(--dur-2),transform var(--dur-3) var(--ease-spring)}.sf:focus-within>.ic{color:var(--ring);transform:scale(1.1)}
.sf input{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;border-radius:0;padding:16px 0;font:500 1.05rem/1.2 var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none}
.sf input::-webkit-search-cancel-button{-webkit-appearance:none}
.sf input::placeholder{color:var(--mut);opacity:1}
.sf kbd,.so-x kbd{font:600 .68rem/1 var(--sans);color:var(--mut);border:1px solid var(--rule);border-radius:6px;padding:5px 8px;background:var(--bg2)}
.so-x{border:0;background:none;padding:0;cursor:pointer;flex:none}.so-x:hover kbd{color:var(--ink);border-color:var(--rule-strong)}
@media (max-width:640px){.sf kbd{display:none}.so-x kbd{font-size:.64rem}}
.nf-search{margin:22px 0 4px;padding-right:6px}.nf-search .btn{padding:11px 20px;font-size:.7rem}
dialog.so{margin:min(9vh,80px) auto auto;width:min(680px,calc(100vw - 20px));max-height:min(78dvh,720px);border-radius:20px}
.so-in{padding:12px 12px 8px;display:flex;flex-direction:column;max-height:inherit}
.so .sres{overflow:auto;flex:1;overscroll-behavior:contain;margin-top:6px}
.so-all{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;font:600 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--mut);border-top:1px solid var(--rule);margin-top:6px}
.so-all:hover{color:var(--accent)}.so-all .ic{transition:transform var(--dur-3) var(--ease-out)}.so-all:hover .ic{transform:translateX(4px)}
.sres{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:2px;align-content:start}
.sres a{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;padding:10px;border-radius:14px;text-decoration:none;color:inherit;transition:background var(--dur-2),transform var(--dur-2) var(--ease-out)}
.sres a:hover,.sres a.on{background:var(--bg2)}.sres a.on{box-shadow:inset 3px 0 0 var(--cat,var(--accent))}
.sres a:hover{transform:translateX(2px)}
.sres img,.sr-ph{width:56px;height:56px;border-radius:12px;object-fit:cover;background:var(--cat-soft,var(--bg2));display:block}
.sr-ph{display:grid;place-items:center;color:var(--accent)}
.sr-t{display:grid;gap:3px;min-width:0}.sr-t b{font:700 1.02rem/1.25 var(--serif);text-wrap:balance}
.sr-k{font:600 .62rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cat,var(--mut))}
.sr-d{font:400 .85rem/1.4 var(--sans);color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.sr-empty{padding:6px 10px 12px}
.sr-h{display:flex;align-items:center;justify-content:space-between;font:600 .64rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:10px 0 10px}
.sr-clear{font:600 .64rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);background:none;border:0;cursor:pointer;padding:6px 4px;text-decoration:underline;text-underline-offset:.2em}.sr-clear:hover{color:var(--accent)}
.sr-none{margin:8px 0 14px;color:var(--mut);text-wrap:pretty}.sr-none b{color:var(--ink)}
.sr-chips{display:flex;flex-wrap:wrap;gap:8px}
.sr-chip{display:inline-flex;align-items:center;font:600 .78rem/1 var(--sans);padding:10px 15px;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--ink);cursor:pointer;text-decoration:none;transition:background var(--dur-2),border-color var(--dur-2),transform var(--dur-2) var(--ease-out),color var(--dur-2)}
.sr-chip:hover{background:var(--bg2);border-color:var(--rule-strong);transform:translateY(-1px);color:var(--accent)}
.sp .sres{margin-top:22px;border-top:1px solid var(--rule-strong);padding-top:8px}
.sp .sres .sr-empty{padding-inline:0}
.sr-skel{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:10px}
.sr-skel i,.sr-skel b,.sv-skel i,.sv-skel b{display:block;border-radius:10px;background:linear-gradient(90deg,var(--bg2) 30%,color-mix(in srgb,var(--bg2) 55%,var(--card)) 50%,var(--bg2) 70%) 0 0/220% 100%}
.sr-skel i{width:56px;height:56px}.sr-skel span{display:grid;gap:9px;align-content:center}.sr-skel b{height:12px;width:80%}.sr-skel b+b{width:55%}
@media (prefers-reduced-motion:no-preference){.sr-skel i,.sr-skel b,.sv-skel i,.sv-skel b{animation:shimmer 1.3s linear infinite}}
@keyframes shimmer{to{background-position:-120% 0}}
@media (prefers-reduced-motion:no-preference){.sres li:not(.sr-empty):not(.sr-skel){animation:srin var(--dur-3) var(--ease-out) both;animation-delay:calc(var(--n,0)*0ms)}}
@keyframes srin{from{opacity:0;transform:translateY(6px)}}

/* ---- saved list ---- */
.svgrid{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.sv{position:relative;border-radius:var(--r);border:1px solid var(--rule);background:var(--card);overflow:hidden;box-shadow:var(--shadow);transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-3),box-shadow var(--dur-3)}
.sv:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.sv.out{opacity:0;transform:scale(.96)}
.sv-a{display:block;text-decoration:none;color:inherit}
.sv-a img,.sv-ph{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--cat-soft,var(--bg2))}
.sv-b{display:grid;gap:7px;padding:16px 18px 56px}.sv-b b{font:700 1.2rem/1.2 var(--serif);text-wrap:balance}
.sv-k{font:600 .64rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cat,var(--mut))}
.sv-d{color:var(--mut);font-size:.9rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.sv-x{position:absolute;left:18px;bottom:14px;font:600 .66rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);background:none;border:0;padding:10px 0;cursor:pointer;text-decoration:underline;text-underline-offset:.22em}.sv-x:hover{color:var(--accent)}
.sv-skel{border-radius:var(--r);border:1px solid var(--rule);padding:0 0 16px;display:grid;gap:10px}.sv-skel i{aspect-ratio:16/10;border-radius:0}.sv-skel b{height:14px;margin:0 18px;width:70%}.sv-skel b+b{width:45%}
.sv-empty{text-align:center;max-width:460px;margin:46px auto 20px;display:grid;gap:10px;justify-items:center;color:var(--mut)}
.sv-empty[hidden]{display:none}.sv-empty .ic{color:var(--accent)}.sv-empty .sv-t{font:700 1.5rem/1.2 var(--serif);color:var(--ink);margin:0}.sv-empty p{margin:0;text-wrap:pretty}.sv-empty .sr-chips{justify-content:center;margin-top:8px}

@media (prefers-reduced-motion:reduce){.sv:hover{transform:none}}