/* r63 site search (draft only). Loaded only by SEARCH=1 builds; styles.css is unchanged. No inline styles (CSP). */
.hsearch{display:inline-flex;align-items:center;gap:.4rem;margin:0;padding:.35rem var(--sp-3);border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--paper);color:var(--ink);font:500 var(--fs-sm)/1.4 var(--sans);text-decoration:none;cursor:pointer}
.hsearch:hover{border-color:var(--navy);text-decoration:underline}
.hsearch-ico{width:1rem;height:1rem;flex:none}
.ssearch{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5) var(--sp-4);margin:var(--sp-5) 0 var(--sp-7)}
.ssearch-label{display:block;font-weight:600;margin:0 0 .4rem}
.ssearch-row{display:flex;gap:var(--sp-2)}
.ssearch-input{flex:1 1 auto;min-width:0;padding:var(--sp-2) var(--sp-3);border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--paper);color:var(--ink)}
.ssearch-go{flex:none;padding:var(--sp-2) var(--sp-4);border:1px solid var(--navy);border-radius:var(--r-md);background:var(--navy);color:var(--on-color);font-weight:600;cursor:pointer}
.ssearch-go:hover{background:var(--navy-hover)}
.ssearch-status{margin:var(--sp-3) 0 0;color:var(--muted);font-size:var(--fs-sm)}
.sfilter{border:0;margin:var(--sp-3) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem var(--sp-2);min-width:0}
.sfilter legend{float:left;padding:0;margin:0 .35rem 0 0;font-weight:600;font-size:var(--fs-sm)}
.sfilter label{display:inline-flex;align-items:center;gap:.35rem;padding:var(--sp-1) var(--sp-3);border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--paper);font-size:var(--fs-sm);line-height:1.4;cursor:pointer}
.sfilter label:has(input:checked){border-color:var(--navy);background:var(--cyber-soft);font-weight:600}
.sfilter input{margin:0;accent-color:var(--navy)}
.sresults{list-style:none;margin:var(--sp-2) 0 0;padding:0}
/* /search/ runs the URL query on load; reserve room so the footer does not jump (CLS) */
.ssearch-page{min-height:100vh}
.sresult{padding:var(--sp-3) 0 var(--sp-3);border-top:1px solid var(--line)}
.sresult-link{display:block;color:var(--ink);text-decoration:none}
.sresult-title{display:block;color:var(--link);font-weight:650;line-height:1.35;text-decoration:underline;text-underline-offset:.18em}
.sresult-link:hover .sresult-title{text-decoration-thickness:2px}
.sresult-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.35rem}
.sresult-type{color:var(--muted);font:600 var(--fs-xs)/1.2 var(--sans);margin-right:.15rem}
.sresult .tag{font-size:var(--fs-xs);padding:.28rem var(--sp-2)}
.tag-tt{background:var(--cyber-soft);color:var(--navy)}
.tag-vid{background:var(--neutral-soft);color:var(--neutral)}
.sresult-ex{margin:.4rem 0 0;font-size:var(--fs-sm);line-height:1.55}
.sresult-ex mark{background:var(--warn-soft);box-shadow:inset 0 -2px var(--warn);color:inherit;padding:0 .08em;border-radius:var(--r-sm)}
.sresults-more{margin:var(--sp-2) 0 0;font-weight:600}
.sresults-more[hidden]{display:none}
.sdialog{width:min(44rem,calc(100% - 2rem));max-width:none;max-height:calc(100dvh - 4rem);margin:var(--sp-7) auto auto;padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-3);overscroll-behavior:contain}
.sdialog::backdrop{background:var(--overlay)}
.sdialog-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) var(--sp-5);background:var(--navy);color:var(--on-color)}
.sdialog-title{margin:0;font-size:var(--fs-lg);color:var(--on-color)}
.sdialog-close{padding:.4rem var(--sp-4);border:1px solid var(--paper);border-radius:var(--r-pill);background:transparent;color:var(--on-color);font-weight:600;cursor:pointer}
.sdialog-close:hover{background:var(--paper);color:var(--navy)}
.sdialog-close:focus-visible{outline:3px solid var(--paper);outline-offset:2px}
.sdialog .ssearch{margin:0;border:0;border-radius:0;padding:var(--sp-4) var(--sp-5) var(--sp-5)}
body:has(.sdialog[open]){overflow:hidden}
@media (max-width:47.99rem){
.sdialog{width:100%;height:100%;max-height:none;margin:0;border:0;border-radius:0}
.ssearch{padding:var(--sp-4) var(--sp-4) var(--sp-4)}
}
@media (scripting:none){.ssearch{display:none}}
@media (forced-colors:active){.sresult-ex mark{forced-color-adjust:none;background:Mark;color:MarkText}.hsearch,.ssearch-go{border:1px solid ButtonText}}
/* header placement: wide screens get a round icon button at the end of the menu row (the menu already fills it);
   narrow screens put the labelled pill on the logo row, where there is room, so the header gains no extra row */
@media (min-width:48rem){
.hsearch{padding:.45rem;border-radius:50%}
.hsearch-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:47.99rem){
.bar>.hsearch{order:1;margin-left:auto}
.bar>nav{order:2;flex-basis:100%}
}