/* Shared nav-search styles. Include alongside nav-search.js. Uses the existing
   CSS variables (--bg, --bg-elevated, --rose, etc.) — depends on the page
   having those defined. */
.nav-mid{display:flex;align-items:center;gap:14px;flex:1;justify-content:center;min-width:0}
.nav-search{position:relative;width:100%;max-width:280px}
.nav-search input{width:100%;background:var(--bg-elevated);border:1px solid var(--border);border-radius:9px;padding:8px 12px 8px 32px;font-family:var(--font-ui);font-size:13px;color:var(--text);outline:none;transition:border-color .15s,background .15s}
.nav-search input:focus{border-color:var(--rose);background:var(--bg-card)}
.nav-search input::placeholder{color:var(--dim)}
.nav-search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--dim);pointer-events:none}
.nav-search-results{position:absolute;top:100%;left:0;right:0;margin-top:6px;background:var(--bg-card);border:1px solid var(--border-bright);border-radius:11px;max-height:340px;overflow-y:auto;display:none;z-index:60;box-shadow:0 12px 32px rgba(0,0,0,0.4)}
.nav-search-results.open{display:block}
.nav-search-row{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;transition:background .12s;text-decoration:none;color:inherit}
.nav-search-row:hover,.nav-search-row.active{background:var(--bg-hover)}
.nav-search-row img{width:32px;height:32px;border-radius:7px}
.nav-search-row span{font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--text)}
.nav-search-row em{color:var(--dim);font-style:normal;font-size:11px;margin-left:auto;text-transform:uppercase;letter-spacing:0.06em;font-weight:700}
.nav-search-empty{padding:14px;text-align:center;font-family:var(--font-ui);font-size:12.5px;color:var(--dim)}
@media(max-width:860px){.nav-mid{display:none}}