feat(search): choose which topics the results come from

Chips in the Cmd-K dialog and on /search/ — Answers, Guides & articles, API
reference and the other edition — each an independent on/off switch, every one
on by default. The dialog showed all four groups and let a reader say nothing
about it; /search/ offered tabs, which let them pick exactly one group or
exactly everything. Neither answers "the guides and the answers, not the
generated API reference", which on a symbol-shaped query is the case that
matters: the API reference outnumbers the other two together.

The ranker half is the search-ranker submodule, bumped here. This commit is the
markup and the styles.

Being ON is the quiet state. Every chip starts on, and four solid accent blocks
above the results would read as a banner rather than a control, so the fill is
a 12% tint and switching one OFF is what stands out as a change the reader
made. A leading glyph carries the state as well as the colour — both are one
character wide in the mono face, so a toggle never reflows the row, and "+" is
the honest label for an off chip, which is a topic you can add back rather than
one that found nothing.

At 375px the four labels wrap to three lines. Tightened rather than put in a
horizontal scroller, which would hide chips off the edge of exactly the screen
where the API reference most needs switching off.

Author: Mikhus

src/_shared/css/search.css

@@ -120,6 +120,68 @@
 
 .s-close:hover { color: var(--ink); border-color: var(--accent); }
 
+/* ---- the topic chips --------------------------------------------------- */
+
+/* One row of on/off switches per surface: here between the field and the list, and on
+   /search/ under the form. `flex: none` matters — .s-form is a column flex box whose
+   .s-results takes the slack, and without it a wrapped row of chips on a narrow screen
+   is compressed instead of being given its two lines. */
+.s-topics {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--line);
+  flex: none;
+}
+
+/* `hidden` is set on the row until a query has something to filter, and `display: flex`
+   above would otherwise win against the UA's `display: none`. */
+.s-topics[hidden] { display: none; }
+
+.s-topic {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 5px 13px;
+  background: none;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+/* A leading glyph, not colour alone. Which topics are showing is information, and a tint
+   plus a border tint is a thin thing to hang it on for anyone who cannot separate the two.
+   Both glyphs are one character wide in the mono face, so toggling a chip never reflows
+   the row — and "+" is the honest label for an off chip, which is a topic you can add back
+   rather than one that found nothing. */
+.s-topic::before { content: "+"; opacity: .75; }
+.s-topic[aria-pressed="true"]::before { content: "✓"; opacity: 1; }
+
+/* Being ON is the quiet state. Every chip starts on, and four solid accent blocks above
+   the results would be a banner rather than a control; switching one OFF is the change the
+   reader made, so that is what has to be legible at a glance. */
+.s-topic[aria-pressed="true"] {
+  color: var(--ink);
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+}
+
+.s-topic:hover { color: var(--ink); border-color: var(--accent); }
+.s-topic:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* Tabular figures so a count changing width — 9 to 10 — does not shuffle the chips beside
+   it, which happens on every peer index that lands after the first render. */
+.s-topic__count {
+  font-size: 12px;
+  opacity: .7;
+  font-variant-numeric: tabular-nums;
+}
+
 .s-results {
   flex: 1 1 auto;
   min-height: 0;
@@ -349,30 +411,16 @@
   cursor: pointer;
 }
 
-.s-page__tabs {
+/* The same chips as the dialog's — see `.s-topic` above — in the page's own row, which
+   sits in the document rather than in a panel and so needs margin instead of the dialog's
+   padding and rule. */
+.s-page__topics {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 18px;
 }
 
-.s-tab {
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  padding: 5px 13px;
-  font-family: var(--font-mono);
-  font-size: 13px;
-  color: var(--muted);
-  border-bottom: 1px solid var(--line);
-}
-
-.s-tab:hover { color: var(--ink); border-color: var(--accent); }
-.s-tab.is-active {
-  color: var(--on-accent);
-  background: var(--accent);
-  border-color: transparent;
-}
-
 .s-page .s-page__status {
   padding: 0 0 14px;
   border-top: 0;
@@ -448,6 +496,13 @@
      results instead. It is still shown before anything is typed. */
   .s-results:not(:empty) ~ .s-hint { display: none; }
 
+  /* Tightened, not scrolled sideways. At 375px the four labels wrap to three lines and
+     that row is the only place the filter exists — putting it in a horizontal scroller
+     would hide chips off the edge of exactly the screen where the API reference most needs
+     switching off. This buys back about 20px of result list instead. */
+  .s-topics { padding: 9px 12px; gap: 6px; }
+  .s-topic { padding: 4px 10px; font-size: 12.5px; gap: 6px; }
+
   .s-page__form { flex-wrap: wrap; }
   .s-page__submit { width: 100%; padding: 12px 20px; }
 }

src/search.html

@@ -52,7 +52,13 @@ <h1 style="font-family:var(--font-display);font-size:40px;line-height:1.1;letter
       <button class="s-page__submit" type="submit">Search</button>
     </form>
 
-    <div class="s-page__tabs"></div>
+    {%- comment -%}
+    Filled by the ranker with one on/off chip per topic — Answers, Guides & articles, API
+    reference, and the other edition. `role="group"` rather than a list: the chips are a
+    set of independent switches with one purpose between them, and the label is what makes
+    a bare row of buttons mean "these filter the results below".
+    {%- endcomment %}
+    <div class="s-page__topics" role="group" aria-label="Show results from these topics"></div>
     <p class="s-page__status" role="status" aria-live="polite"></p>
     <div class="s-page__results"></div>