Search inside article bodies from the top-left box; ⌘K focuses it (#2)

- Search inside article bodies from the top-left box; ⌘K focuses it (f35e14bee7df1af6500a05966586292715923784)
- Search refinements: jump-to-section, ✕ clear badge, title + in-document highlighting (1feae6d14242388da3cd48e27540ed9ab9f80919)
- Search: list all in-document hits per topic, blue-rectangle highlights, body-only index (a15f9c48c14c1bbe851f39f2a5c044ce118ff123)

app.js

@@ -26,10 +26,8 @@ const state = {
   collapsed: new Set(JSON.parse(localStorage.getItem('viz-collapsed') || '[]')),
   treeCollapsed: new Set(JSON.parse(localStorage.getItem('viz-tree-collapsed') || '[]')),
   srcNs: null,        // selected source-namespace filter (null = all)
-  palItems: [],       // command-palette index
-  palFiltered: [],
-  palSel: 0,
   pageContent: new Map(),   // path -> article markdown (cached)
+  searchText: new Map(),    // topic path -> lowercased body, for nav content search
   citedBy: new Map(),       // sourceId -> Set(topic path) that cite it
   citeCount: new Map(),     // sourceId -> # distinct articles citing it
   wordCount: new Map(),     // topic path -> prose word count
@@ -297,12 +295,51 @@ function enhanceProse(root, currentPath) {
   acronymHovers(root);                       // known acronyms get a hover definition
   // remaining external links open in a new tab
   $$('a[href^="http"]', root).forEach(a => { a.target = '_blank'; a.rel = 'noopener'; });
+  highlightDocMatches(root, ($('#navSearch') || {}).value);   // mark active search terms in the article
   return toc;
 }
 
+// In-document search highlighting: <mark> occurrences of the active query in the
+// rendered article. Cleared when the search is cleared (see clearNavSearch).
+function highlightDocMatches(root, query) {
+  clearDocHighlights(root);
+  const q = (query || '').trim().toLowerCase();
+  if (!root || q.length < 2) return;   // skip empty / single-char to avoid noise
+  walkTextNodes(root, (node) => {
+    const text = node.nodeValue, lc = text.toLowerCase();
+    let idx = lc.indexOf(q);
+    if (idx < 0) return;
+    const frag = document.createDocumentFragment();
+    let last = 0;
+    while (idx >= 0) {
+      if (idx > last) frag.append(text.slice(last, idx));
+      const mark = document.createElement('mark');
+      mark.className = 'search-hl';
+      mark.textContent = text.slice(idx, idx + q.length);
+      frag.append(mark);
+      last = idx + q.length;
+      idx = lc.indexOf(q, last);
+    }
+    if (last < text.length) frag.append(text.slice(last));
+    node.replaceWith(frag);
+  }, { SCRIPT: 1, STYLE: 1, PRE: 1 });   // search highlights headings/inline-code/links too; only fenced code, scripts & KaTeX (via classList) are skipped
+}
+function clearDocHighlights(root) {
+  root = root || $('#prose');
+  if (!root) return;
+  const marks = root.querySelectorAll('mark.search-hl');
+  marks.forEach(m => m.replaceWith(document.createTextNode(m.textContent)));
+  if (marks.length) root.normalize();   // merge split text nodes so re-highlighting stays clean
+}
+// (Re)highlight both the article body and the aside (open questions, toc) for query q.
+function refreshDocHighlights(q) {
+  highlightDocMatches($('#prose'), q);
+  highlightDocMatches($('#aside'), q);
+}
+
 // Walk visible text nodes under root, skipping code/math/links/headings/abbr.
-function walkTextNodes(root, fn) {
-  const SKIP = { CODE: 1, PRE: 1, A: 1, ABBR: 1, SCRIPT: 1, STYLE: 1, H1: 1, H2: 1, H3: 1, H4: 1, H5: 1, H6: 1 };
+function walkTextNodes(root, fn, skip) {
+  const SKIP = skip || { CODE: 1, PRE: 1, A: 1, ABBR: 1, SCRIPT: 1, STYLE: 1, H1: 1, H2: 1, H3: 1, H4: 1, H5: 1, H6: 1 };
   const w = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
     acceptNode(n) {
       if (!n.nodeValue.trim()) return NodeFilter.FILTER_REJECT;
@@ -463,7 +500,7 @@ async function softRefresh() {
    ============================================================ */
 function layoutAside(on) { $('#layout').classList.toggle('has-aside', !!on); }
 function setView(html) { $('#view').innerHTML = html; }
-function setAside(html) { $('#aside').innerHTML = html || ''; }
+function setAside(html) { $('#aside').innerHTML = html || ''; highlightDocMatches($('#aside'), ($('#navSearch') || {}).value); }
 function showError(msg) {
   layoutAside(false);
   setView(`<div class="error-box">⚠ ${esc(msg)}<br><br><a class="btn" href="#/">← back to home</a></div>`);
@@ -957,8 +994,27 @@ function renderTopicsNav(list, q) {
     matches.forEach(n => {
       const it = el('div', 'nav-item');
       it.dataset.path = n.page.path;
-      it.innerHTML = `${esc(n.page.title || n.slug)}`;
-      it.addEventListener('click', () => go(`#/topic/${encodeURIComponent(n.page.path)}`));
+      const base = `#/topic/${encodeURIComponent(n.page.path)}`;
+      // All body occurrences of the query in this article (empty for a title-only match).
+      const { infos, total } = q && (state.searchText.get(n.page.path) || '').includes(q)
+        ? bodyMatchInfos(n.page.path, q) : { infos: [], total: 0 };
+      const titleTarget = base + (infos[0] && infos[0].section ? `~${infos[0].section}` : '');
+
+      const title = el('span', 'nav-item-title', highlightMatch(n.page.title || n.slug, q));
+      if (total > 1) title.append(el('span', 'nav-hit-count', String(total)));
+      it.append(title);
+      it.addEventListener('click', () => go(titleTarget));   // clicking the row → first hit / top
+
+      if (infos.length) {
+        const snips = el('div', 'nav-snippets');
+        infos.forEach(h => {
+          const s = el('div', 'nav-snippet', h.snippet);
+          s.addEventListener('click', (e) => { e.stopPropagation(); go(base + (h.section ? `~${h.section}` : '')); });
+          snips.append(s);
+        });
+        if (total > infos.length) snips.append(el('div', 'nav-snippet more', `+${total - infos.length} more match${total - infos.length === 1 ? '' : 'es'}`));
+        it.append(snips);
+      }
       body.append(it);
     });
     wrap.append(body);
@@ -1049,7 +1105,60 @@ function sortSources(items, mode) {
   else arr.sort((a, b) => (state.citeCount.get(b.id) || 0) - (state.citeCount.get(a.id) || 0) || (a.title || a.id).localeCompare(b.title || b.id));
   return arr;
 }
-const matchPage = (p, q) => (p.title || '').toLowerCase().includes(q) || p.path.toLowerCase().includes(q);
+// A page matches on its title, its path, or anywhere in its (background-indexed)
+// body. `q` is already lowercased by callers.
+const matchPage = (p, q) =>
+  (p.title || '').toLowerCase().includes(q) ||
+  p.path.toLowerCase().includes(q) ||
+  (state.searchText.get(p.path) || '').includes(q);
+// Every body occurrence of q in a page: a highlighted excerpt + its nearest heading,
+// so the sidebar can list all in-document hits and each can jump to its own section.
+// Returns { infos: [...], total } — total is the true count even when infos is capped.
+function bodyMatchInfos(path, q, cap = 20) {
+  const raw = state.pageContent.get(path), lc = state.searchText.get(path);
+  if (raw == null || lc == null) return { infos: [], total: 0 };
+  const text = parseFrontmatter(raw).body;   // same body the index was built from → indices align with lc and hits map to visible prose
+  const infos = []; let total = 0, i = lc.indexOf(q);
+  while (i >= 0) {
+    total++;
+    if (infos.length < cap) {
+      const start = Math.max(0, i - 30);
+      let clip = text.slice(start, i + q.length + 40)
+        .replace(/\[source:[^\]]*\]/g, ' ')
+        .replace(/[#>*_`~|]+/g, ' ')
+        .replace(/\s+/g, ' ').trim();
+      clip = (start > 0 ? '…' : '') + clip + '…';
+      infos.push({ snippet: highlightMatch(clip, q), section: headingSlugBefore(text, i) });
+    }
+    i = lc.indexOf(q, i + q.length);
+  }
+  return { infos, total };
+}
+// Slug of the last ##/###/#### heading before `pos`, replicating enhanceProse's
+// slugify + de-dup (and skipping fenced code) so the id matches the rendered anchor.
+function headingSlugBefore(md, pos) {
+  const seen = {};
+  let found = '', inFence = false, offset = 0;
+  for (const line of md.split('\n')) {
+    if (/^\s*(```|~~~)/.test(line)) inFence = !inFence;
+    else if (!inFence) {
+      const h = /^(#{2,4})\s+(.+?)\s*#*$/.exec(line);
+      if (h) {
+        let slug = h[2].trim().toLowerCase().replace(/[^\w\s-]/g, '').trim().replace(/\s+/g, '-').slice(0, 60) || 'sec';
+        if (seen[slug] != null) slug = `${slug}-${++seen[slug]}`; else seen[slug] = 0;
+        if (offset <= pos) found = slug;   // last heading at/before the match wins
+      }
+    }
+    offset += line.length + 1;   // +1 for the consumed '\n'
+  }
+  return found;
+}
+// Throttled nav re-render, used while background indexing fills in during a search.
+let _navRefreshT = null;
+function scheduleNavRefresh() {
+  if (_navRefreshT) return;
+  _navRefreshT = setTimeout(() => { _navRefreshT = null; if (($('#navSearch').value || '').trim()) renderNav(); }, 200);
+}
 const matchSource = (s, q) => (s.title || '').toLowerCase().includes(q) || s.id.toLowerCase().includes(q);
 function toggleCat(cat) {
   if (state.collapsed.has(cat)) state.collapsed.delete(cat); else state.collapsed.add(cat);
@@ -1071,30 +1180,6 @@ function highlightActive() {
    Filters an in-memory index, so it stays instant at thousands of items.
    ============================================================ */
 // `text` and `q` must already be lowercased (callers pre-lower for speed).
-function fuzzyScore(q, text) {
-  const idx = text.indexOf(q);
-  if (idx === 0) return 1000;            // prefix match — best
-  if (idx > 0) return 700 - Math.min(idx, 300);
-  // subsequence fallback — start at the first occurrence of q[0]; bail cheaply if absent.
-  let start = text.indexOf(q[0]);
-  if (start < 0) return -1;
-  let qi = 1, gaps = 0, last = start;
-  for (let ti = start + 1; ti < text.length && qi < q.length; ti++) {
-    if (text[ti] === q[qi]) { gaps += ti - last - 1; last = ti; qi++; }
-  }
-  return qi === q.length ? 300 - Math.min(gaps, 200) - Math.min(start, 50) : -1;
-}
-function paletteResults(raw) {
-  const q = raw.toLowerCase().trim();
-  if (!q) return state.palItems.slice(0, 40);
-  const scored = [];
-  for (const it of state.palItems) {
-    const s = Math.max(fuzzyScore(q, it._l), fuzzyScore(q, it._s) - 60);
-    if (s > -1) scored.push({ it, s });
-  }
-  scored.sort((a, b) => b.s - a.s || a.it.label.localeCompare(b.it.label));
-  return scored.slice(0, 40).map(x => x.it);
-}
 function highlightMatch(text, raw) {
   const q = raw.trim();
   if (!q) return esc(text);
@@ -1102,37 +1187,6 @@ function highlightMatch(text, raw) {
   if (i < 0) return esc(text);
   return esc(text.slice(0, i)) + '<b>' + esc(text.slice(i, i + q.length)) + '</b>' + esc(text.slice(i + q.length));
 }
-function renderPalette() {
-  const q = $('#palInput').value;
-  state.palFiltered = paletteResults(q);
-  if (state.palSel >= state.palFiltered.length) state.palSel = 0;
-  const box = $('#palResults');
-  if (!state.palFiltered.length) { box.innerHTML = `<div class="pal-empty">No matches for “${esc(q)}”.</div>`; return; }
-  box.innerHTML = state.palFiltered.map((it, i) => `
-    <div class="pal-item${i === state.palSel ? ' sel' : ''}" data-i="${i}">
-      <span class="pal-kind ${it.kind}">${it.kind}</span>
-      <span class="pal-text"><span class="pal-label">${highlightMatch(it.label, q)}</span><span class="pal-sub">${esc(it.sub)}</span></span>
-    </div>`).join('');
-  $$('#palResults .pal-item').forEach(n => {
-    n.addEventListener('mousemove', () => { if (state.palSel !== +n.dataset.i) { state.palSel = +n.dataset.i; markPalSel(); } });
-    n.addEventListener('click', () => choosePal(+n.dataset.i));
-  });
-}
-function markPalSel() { $$('#palResults .pal-item').forEach((n, i) => n.classList.toggle('sel', i === state.palSel)); }
-function scrollPalSel() { $$('#palResults .pal-item')[state.palSel]?.scrollIntoView({ block: 'nearest' }); }
-function choosePal(i) { const it = state.palFiltered[i]; if (it) { closePalette(); go(it.hash); } }
-function openPalette() {
-  const sc = $('#palScrim'); sc.hidden = false;
-  const inp = $('#palInput'); inp.value = ''; state.palSel = 0;
-  renderPalette(); inp.focus();
-}
-function closePalette() { $('#palScrim').hidden = true; }
-function palKeydown(e) {
-  if (e.key === 'ArrowDown') { e.preventDefault(); state.palSel = Math.min(state.palSel + 1, state.palFiltered.length - 1); markPalSel(); scrollPalSel(); }
-  else if (e.key === 'ArrowUp') { e.preventDefault(); state.palSel = Math.max(state.palSel - 1, 0); markPalSel(); scrollPalSel(); }
-  else if (e.key === 'Enter') { e.preventDefault(); choosePal(state.palSel); }
-  else if (e.key === 'Escape') { e.preventDefault(); closePalette(); }
-}
 
 /* ── mobile nav ────────────────────────────────────────── */
 function closeNav() { document.body.classList.remove('nav-open'); }
@@ -1181,7 +1235,6 @@ async function loadCore() {
   }
   try { state.taxonomy = taxT && window.jsyaml ? jsyaml.load(taxT) : null; } catch (e) { state.taxonomy = null; }
   buildTaxonomy();
-  buildPaletteIndex();
 }
 const SOURCES_CACHE_KEY = 'viz-sources-v1';
 function setSources(items) {
@@ -1192,7 +1245,7 @@ function setSources(items) {
   if (items.some(s => s.title)) state.sourceTitlesLoaded = true;   // tree stage has none yet
 }
 function refreshSourceViews() {
-  buildPaletteIndex(); updateCounts();
+  updateCounts();
   softRefresh();          // re-renders the current view (incl. the sources browser), upgrading titles/resolution
 }
 // Reverse the filename sanitization (`:`/`/` → `-`): `arxiv-1707.06347.md` → `arxiv:1707.06347`.
@@ -1273,13 +1326,6 @@ function buildTaxonomy() {
   state.tax = cats;
 }
 
-function buildPaletteIndex() {
-  const mk = (kind, label, sub, hash) => ({ kind, label, sub, hash, _l: label.toLowerCase(), _s: sub.toLowerCase() });
-  state.palItems = [
-    ...state.pages.map(p => mk('topic', p.title || p.path, catLabel(p._cat || p.parent || ''), `#/topic/${encodeURIComponent(p.path)}`)),
-    ...state.sources.map(s => mk('source', s.title || s.id, s.id, `#/source/${encodeURIComponent(s.id)}`)),
-  ];
-}
 const catLabel = (c) => prettyTitle((c || '').replace(/-/g, ' '));
 // Sentence-cased category for headings, e.g. "reward-modeling" → "Reward modeling".
 const catDisplay = (c) => { const s = catLabel(c); return s.charAt(0).toUpperCase() + s.slice(1); };
@@ -1327,6 +1373,8 @@ async function ensureCitemap() {
         ids.forEach(id => { if (!state.citedBy.has(id)) state.citedBy.set(id, new Set()); state.citedBy.get(id).add(path); });
         state.refCount.set(path, refs);
         state.wordCount.set(path, countWords(content));
+        state.searchText.set(path, parseFrontmatter(content).body.toLowerCase());   // body only (frontmatter/open-questions excluded) so every hit maps to visible prose
+        if (($('#navSearch').value || '').trim()) scheduleNavRefresh();  // live-fill an in-progress search
       } catch (e) { /* skip unreadable article */ }
     }
   };
@@ -1379,18 +1427,30 @@ async function boot() {
   $('#navScrim').addEventListener('click', closeNav);
   $('#brandHome').addEventListener('click', () => go('#/'));
   let st;
-  $('#navSearch').addEventListener('input', () => { clearTimeout(st); st = setTimeout(renderNav, 120); });
+  const searchBadge = $('#paletteOpen');
+  const focusNavSearch = () => { const s = $('#navSearch'); s.focus(); s.select(); };
+  const clearNavSearch = () => { const s = $('#navSearch'); s.value = ''; syncSearchBadge(); renderNav(); refreshDocHighlights(''); s.focus(); };
+  // The badge is a ⌘K focus hint while empty, and a ✕ clear button once you've typed.
+  const syncSearchBadge = () => {
+    const has = !!$('#navSearch').value;
+    searchBadge.textContent = has ? '✕' : '⌘K';
+    searchBadge.classList.toggle('is-clear', has);
+    searchBadge.title = has ? 'Clear search' : 'Focus search (⌘K)';
+  };
+  $('#navSearch').addEventListener('input', () => {
+    ensureCitemap();   // kick off body indexing on first keystroke so content matches fill in fast
+    syncSearchBadge();
+    clearTimeout(st); st = setTimeout(() => { renderNav(); refreshDocHighlights($('#navSearch').value); }, 120);
+  });
   window.addEventListener('hashchange', route);
 
-  // command palette
-  $('#paletteOpen').addEventListener('click', openPalette);
-  $('#palInput').addEventListener('input', renderPalette);
-  $('#palInput').addEventListener('keydown', palKeydown);
-  $('#palScrim').addEventListener('click', (e) => { if (e.target === $('#palScrim')) closePalette(); });
+  // ⌘K (and "/") focus the top-left search — one box that filters titles + bodies.
+  searchBadge.addEventListener('click', () => { $('#navSearch').value ? clearNavSearch() : focusNavSearch(); });
   window.addEventListener('keydown', (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); $('#palScrim').hidden ? openPalette() : closePalette(); return; }
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); focusNavSearch(); return; }
+    if (e.key === 'Escape' && document.activeElement === $('#navSearch') && $('#navSearch').value) { clearNavSearch(); return; }
     const typing = /^(input|textarea)$/i.test(document.activeElement?.tagName || '');
-    if (e.key === '/' && !typing && $('#palScrim').hidden) { e.preventDefault(); openPalette(); }
+    if (e.key === '/' && !typing) { e.preventDefault(); focusNavSearch(); }
   });
   initHovercards();
 

index.html

@@ -63,8 +63,8 @@
   <aside class="sidebar" id="sidebar">
     <div class="side-head">Topics</div>
     <div class="search-wrap">
-      <input class="search" id="navSearch" type="text" placeholder="Search topics…" autocomplete="off">
-      <kbd class="search-k" id="paletteOpen" title="Search everything — topics &amp; sources (⌘K)">⌘K</kbd>
+      <input class="search" id="navSearch" type="text" placeholder="Search topics &amp; text…" autocomplete="off">
+      <kbd class="search-k" id="paletteOpen" title="Focus search (⌘K)">⌘K</kbd>
     </div>
     <nav id="navList"></nav>
   </aside>
@@ -76,19 +76,6 @@
   <aside class="aside" id="aside"></aside>
 </div>
 
-<!-- Command palette: universal jump to any topic or source -->
-<div class="palette-scrim" id="palScrim" hidden>
-  <div class="palette" role="dialog" aria-label="Search">
-    <div class="palette-search">
-      <span class="pal-icon">⌕</span>
-      <input id="palInput" class="palette-input" type="text" placeholder="Jump to a topic or source…" autocomplete="off" spellcheck="false">
-      <kbd class="pal-esc">esc</kbd>
-    </div>
-    <div id="palResults" class="palette-results"></div>
-    <div class="palette-foot"><span><kbd>↑</kbd><kbd>↓</kbd> navigate</span><span><kbd>↵</kbd> open</span><span><span class="pal-dot pal-t"></span> topic <span class="pal-dot pal-s"></span> source</span></div>
-  </div>
-</div>
-
 <script defer src="app.js"></script>
 </body>
 </html>

styles.css

@@ -24,6 +24,8 @@
   --accent-deep: #0a275f;
   --accent-soft: #dde6f5;
   --accent-hover-row: #c8d6ee;
+  --hl-bg: #0f3787;         /* search-hit rectangle */
+  --hl-ink: #ffffff;
   --good: #1c7c3f;
   --warn: #9a6b00;
   --danger: #a12d2d;
@@ -53,6 +55,8 @@
   --accent-deep: #b6cdf7;
   --accent-soft: #20304d;
   --accent-hover-row: #28395a;
+  --hl-bg: #4f7fe0;
+  --hl-ink: #ffffff;
   --good: #6fcf8f;
   --warn: #e0b15a;
   --danger: #e08585;
@@ -159,7 +163,7 @@ a:hover { color: var(--accent-deep); }
   content: "⌕"; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
   color: var(--muted-3); font-size: 15px;
 }
-/* the one global-search affordance: click (or ⌘K) → command palette */
+/* the ⌘K badge on the search box: click (or ⌘K) → focus the search input */
 .search-k {
   position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
   font-family: var(--mono); font-size: 10px; padding: 2px 6px; border-radius: 4px;
@@ -167,6 +171,9 @@ a:hover { color: var(--accent-deep); }
   cursor: pointer; transition: all .12s;
 }
 .search-k:hover { border-color: var(--accent); color: var(--accent-deep); }
+/* once a query is entered, the badge becomes a ✕ clear button */
+.search-k.is-clear { font-family: var(--sans); font-size: 12px; line-height: 1; padding: 3px 6.5px; }
+.search-k.is-clear:hover { background: var(--accent-soft); }
 
 .nav-group { margin-bottom: 14px; }
 .nav-group-title {
@@ -191,6 +198,25 @@ a:hover { color: var(--accent-deep); }
   display: block; font-family: var(--mono); font-size: 9.5px;
   color: var(--muted-4); margin-top: 1px; letter-spacing: 0.2px;
 }
+/* content-search: a matched-body excerpt under the topic name, query bolded */
+.nav-item .nav-item-title { display: block; }
+.nav-item .nav-item-title b { color: var(--accent-deep); font-weight: 600; }
+.nav-item .nav-snippets { display: block; margin-top: 2px; }
+.nav-item .nav-snippet {
+  display: block; margin-top: 2px; padding: 2px 6px; font-size: 11px; line-height: 1.4;
+  color: var(--muted-3); font-weight: 400; cursor: pointer;
+  border-left: 2px solid var(--border); border-radius: 0 4px 4px 0;
+  transition: background .12s, border-color .12s, color .12s;
+}
+.nav-item .nav-snippet:hover { background: var(--accent-soft); border-left-color: var(--accent); color: var(--ink); }
+.nav-item .nav-snippet b { color: var(--accent-deep); font-weight: 600; }
+.nav-item .nav-snippet.more { font-style: italic; cursor: default; border-left-color: transparent; color: var(--muted-4); }
+.nav-item .nav-snippet.more:hover { background: none; }
+.nav-hit-count {
+  display: inline-block; margin-left: 5px; padding: 0 5px; font-family: var(--mono);
+  font-size: 9px; line-height: 15px; vertical-align: 1px; border-radius: 8px;
+  background: var(--accent-soft); color: var(--accent-deep); font-weight: 600;
+}
 .nav-empty { color: var(--muted-4); font-size: 11.5px; padding: 8px; font-style: italic; }
 .mini-spin { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; margin-right: 4px;
   border: 1.5px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@@ -315,11 +341,20 @@ a:hover { color: var(--accent-deep); }
 /* cross-reference: a `category/node` code span linked to its topic page */
 .prose a.xref { border-bottom: none; text-decoration: none; }
 .prose a.xref code {
-  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep);
+  background: var(--accent-soft); border-color: transparent; color: var(--accent-deep);
   cursor: pointer; transition: background .12s, color .12s;
 }
 .prose a.xref:hover code { background: var(--accent); color: #fff; }
 [data-theme="dark"] .prose a.xref:hover code { color: #0b1220; }
+/* active-search term highlighting inside the article (cleared with the search) —
+   bold, slightly larger blue text (no pill, so it doesn't read like a link chip) */
+mark.search-hl {
+  background: var(--hl-bg); color: var(--hl-ink);
+  font-weight: 600; border-radius: 3px;
+  padding: 0.5px 3.5px; margin: 0 0.5px;
+  box-shadow: 0 0 0 1px var(--hl-bg);
+  -webkit-box-decoration-break: clone; box-decoration-break: clone;
+}
 
 /* blockquote */
 .prose blockquote {
@@ -560,52 +595,6 @@ a:hover { color: var(--accent-deep); }
 }
 @media (min-width: 901px) { .nav-scrim { display: none !important; } }
 
-/* ── command palette ───────────────────────────────────── */
-.palette-foot kbd, .pal-esc {
-  font-family: var(--mono); font-size: 10px; padding: 1.5px 5px; border-radius: 4px;
-  border: 1px solid var(--border); background: var(--bg-soft); color: var(--muted-2); line-height: 1.4;
-}
-
-.palette-scrim {
-  position: fixed; inset: 0; z-index: 200; background: rgba(15,18,22,0.42);
-  backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center;
-  padding: 12vh 16px 16px;
-}
-.palette-scrim[hidden] { display: none; }
-.palette {
-  width: 100%; max-width: 580px; background: var(--bg-card); border: 1px solid var(--border);
-  border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,0.28); overflow: hidden;
-  display: flex; flex-direction: column; max-height: 70vh;
-}
-.palette-search { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--border); }
-.pal-icon { color: var(--muted-3); font-size: 17px; }
-.palette-input {
-  flex: 1; border: none; background: none; outline: none; color: var(--ink);
-  font-family: var(--sans); font-size: 15px; font-weight: 300;
-}
-.palette-results { overflow-y: auto; padding: 6px; }
-.pal-item {
-  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; cursor: pointer;
-}
-.pal-item.sel { background: var(--accent-soft); }
-.pal-kind {
-  flex: 0 0 auto; font-family: var(--mono); font-size: 9px; font-weight: 600; text-transform: uppercase;
-  letter-spacing: 0.5px; padding: 2px 6px; border-radius: 4px; width: 50px; text-align: center;
-}
-.pal-kind.topic { background: var(--accent-soft); color: var(--accent-deep); }
-.pal-kind.source { background: var(--bg-soft); color: var(--muted-2); border: 1px solid var(--border-soft); }
-.pal-text { flex: 1; min-width: 0; }
-.pal-label { font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.pal-label b { color: var(--accent-deep); font-weight: 600; }
-.pal-sub { font-family: var(--mono); font-size: 10px; color: var(--muted-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.pal-empty { padding: 24px; text-align: center; color: var(--muted-3); font-size: 13px; }
-.palette-foot {
-  display: flex; gap: 14px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border-soft);
-  font-size: 10.5px; color: var(--muted-3); font-family: var(--mono); flex-wrap: wrap;
-}
-.pal-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; margin: 0 2px 0 6px; }
-.pal-dot.pal-t { background: var(--accent); }
-.pal-dot.pal-s { background: var(--muted-4); }
 
 /* ── Collapsible taxonomy tree (topics sidebar) ────────── */
 .nav-cat { margin-bottom: 10px; }
@@ -779,7 +768,7 @@ body.book-mode .main { padding: 0; }
 
 /* ── Print (browser "Save as PDF") ─────────────────────── */
 @media print {
-  .topbar, .sidebar, .aside, .nav-scrim, .book-toolbar, .palette-scrim, #hovercard, #toast, .foot, .menu-toggle { display: none !important; }
+  .topbar, .sidebar, .aside, .nav-scrim, .book-toolbar, #hovercard, #toast, .foot, .menu-toggle { display: none !important; }
   html, body { background: #fff; color: #000; }
   .layout, .main, body.book-mode .main { display: block; padding: 0; margin: 0; }
   .book { max-width: none; margin: 0; padding: 0; color: #111; font-size: 10.5pt; }