/* ---- the search results page -------------------------------------------- */

/* Sphinx's stock search form is gone. This theme renders its own on search.html
   - a <button>, not an <input type="submit"> - so the rules that styled the
   original matched nothing on any built page. They were found by the component
   gate, which is the sort of thing a gate finds on the way to what it was
   looking for. */

/* Sphinx sets a pixel pad inline on the progress span; the rule below cannot
   remove an inline style, so the margin that positions it lives here instead
   and the inline value simply adds to a gap the flex row already owns. */

#search-progress {
  color: var(--color-ink-muted);
  font-size: var(--text-meta);
}

/* Results are an unordered list of links, each optionally followed by a context
   paragraph with the matched terms marked. Given the reading measure this page
   shares with every other, they are set as a list of records rather than as
   prose: the link is the thing being chosen between, and the context is
   supporting evidence for that choice. */

.vs-docs-article ul.search {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.vs-docs-article ul.search > li {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hairline) solid var(--color-rule);
}

.vs-docs-article ul.search > li:last-child {
  border-bottom: 0;
}

.vs-docs-article ul.search > li > a {
  font-family: var(--font-display);
  font-synthesis: none;
  font-size: var(--text-body-strong);
  font-weight: var(--ms-h3-weight);
  text-decoration: none;
}

.vs-docs-article ul.search > li > a:hover {
  text-decoration: underline;
}

.vs-docs-article ul.search .context {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-muted);
  font-size: var(--text-meta);
  line-height: var(--text-meta-line-height);
}

/* The matched term. An accent ground would compete with the result link above
   it, so the mark is the accent's subtle tint with the ink left alone. */

/* Vertical padding only. Sphinx marks the matched stem, which is often the
   front of a word - "instal" in "installation" - and side padding opened a
   gap inside the word it was marking. */
.vs-docs-article .highlighted {
  padding: 0.1em 0;
  box-decoration-break: clone;
  background: var(--color-accent-subtle);
  border-radius: var(--radius-cut);
}

/* The search page's own controls.

   Sphinx draws this form with bare inputs and a progress span carrying an
   inline `padding-left: 10px`. The pixel survived because the units gate reads
   authored sources and this markup is generated, which is a fair reason for a
   gate to miss something and no reason to keep it. The form is drawn from the
   same tokens as every other control here, and the template no longer emits the
   inline style. */

.vs-docs-article .vs-docs-searchpage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-4) 0 var(--space-2);
}

/* The search page's field is the same component as the sidebar's, set larger
   because it is the subject of the page rather than a control beside one. It
   had been a second full declaration of a field, down to its own ground - which
   is how the two came to disagree about what a field is made of. */

.vs-docs-article .vs-docs-searchpage-input {
  --field-size: var(--text-body);
  flex: 1 1 18rem;
  min-width: 0;
  line-height: var(--text-body-line-height);
}

.vs-docs-article .vs-docs-searchpage-submit {
  --control-pad-x: var(--space-4);
  --control-pad-y: var(--space-2);
  --control-size: var(--text-body);
  --control-line-height: var(--text-body-line-height);
}

/* Where the stock template put its inline pixel. It is empty until the search
   runs, so it takes its spacing from the flex gap and needs none of its own. */

.vs-docs-article .vs-docs-searchpage-progress {
  color: var(--color-ink-faint);
  font-size: var(--text-meta);
  line-height: var(--text-meta-line-height);
}

.vs-docs-article .vs-docs-searchpage-hint {
  color: var(--color-ink-muted);
  font-size: var(--text-meta);
  line-height: var(--text-meta-line-height);
}

/* Sphinx search progress can receive inline padding at runtime. */

.vs-docs-article #search-progress {
  padding-left: var(--space-2) !important;
}