/* ---- quick search palette --------------------------------------------- */

/* The palette is a plate laid on the mat, not a floating card: the same raised
   paper, hairline edge and square cut as the rest of the surface, lifted by the
   overlay shadow because it is the one thing on the page that sits above the
   page. Its states are the site tree's states - ground and ink for the row you
   are on - so the two lists read as one vocabulary. */

:root.vs-palette-open {
  overflow: hidden;
}

.vs-palette {
  width: min(42rem, calc(100% - 2 * var(--space-4)));
  max-width: none;
  max-height: min(34rem, calc(100dvh - 2 * var(--space-16)));
  margin: var(--space-16) auto auto;
  padding: 0;
  color: var(--color-ink);
  background: var(--color-paper-raised);
  border: var(--border-hairline) solid var(--color-rule-strong);
  border-radius: var(--radius-cut);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}

.vs-palette[open] {
  display: flex;
}

.vs-palette::backdrop {
  background: color-mix(in srgb, var(--color-mat) 55%, rgb(0 0 0 / 30%));
}

@media (prefers-reduced-motion: no-preference) {
  .vs-palette[open] {
    transition:
      opacity var(--duration-ui-fast) var(--ease-snap),
      transform var(--duration-ui-fast) var(--ease-snap);
  }

  @starting-style {
    .vs-palette[open] {
      opacity: 0;
      transform: translateY(calc(-1 * var(--space-2)));
    }
  }
}

.vs-palette-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

/* ---- the field ---- */

.vs-palette-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-hairline) solid var(--color-rule);
}

.vs-palette-glyph {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: var(--color-ink-muted);
}

.vs-palette-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-strong);
  line-height: var(--text-body-strong-line-height);
  color: var(--color-ink);
  background: transparent;
  border: 0;
  outline: none;
  appearance: none;
}

.vs-palette-input::placeholder {
  color: var(--color-ink-muted);
  opacity: 1;
}

.vs-palette-input::-webkit-search-cancel-button {
  appearance: none;
}

/* The field owns the frame's focus: the whole head row shows the ring, because
   a ring drawn around borderless text reads as a stray box. */
.vs-palette-head:focus-within {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(-1 * var(--focus-ring-width));
}

/* Close is drawn as the key that also closes it, so the one control says both
   what it does and which key does the same. */
.vs-palette-close {
  flex: none;
  min-width: 2.5rem;
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
  background: var(--color-paper);
  border: var(--border-hairline) solid var(--color-rule-strong);
  border-bottom-width: 0.125rem;
  border-radius: var(--radius-cut);
}

.vs-palette-close:hover {
  color: var(--color-ink);
}

.vs-palette-close:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ---- results ---- */

.vs-palette-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.vs-palette-list {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-1) var(--space-2) var(--space-2);
}

.vs-palette-list:empty {
  display: none;
}

.vs-palette-group + .vs-palette-group {
  margin-top: var(--space-2);
  padding-top: var(--space-1);
  border-top: var(--border-hairline) solid var(--color-rule);
}

.vs-palette-group-label {
  padding: var(--space-2) var(--space-2) var(--space-1);
  font-family: var(--font-label);
  font-size: var(--text-caption);
  line-height: var(--text-caption-line-height);
  font-weight: var(--ms-rule-label-weight);
  letter-spacing: var(--ms-rule-label-tracking);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.vs-palette-option {
  display: grid;
  gap: var(--space-0-5);
  padding: var(--space-2);
  color: var(--color-ink);
  text-decoration: none;
  border-radius: var(--radius-cut);
}

.vs-palette-option[aria-selected="true"] {
  color: var(--color-accent-text);
  background: var(--color-accent-subtle);
}

.vs-palette-option-title {
  font-size: var(--text-body);
  line-height: var(--text-body-strong-line-height);
  font-weight: var(--text-body-strong-weight);
}

.vs-palette-option-title mark {
  color: inherit;
  background: none;
  text-decoration: underline;
  text-decoration-thickness: var(--border-hairline);
  text-underline-offset: 0.2em;
}

.vs-palette-option-meta {
  font-size: var(--text-meta);
  line-height: var(--text-meta-line-height);
  color: var(--color-ink-muted);
}

.vs-palette-note {
  margin: 0;
  padding: var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--text-meta);
  line-height: var(--text-meta-line-height);
}

/* ---- the foot ---- */

.vs-palette-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-top: var(--border-hairline) solid var(--color-rule);
  background: var(--color-paper-sunken);
  font-size: var(--text-caption);
  line-height: var(--text-caption-line-height);
  color: var(--color-ink-muted);
}

.vs-palette-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0 auto 0 0;
}

.vs-palette-full {
  color: var(--color-accent-text);
}

.vs-palette-slash {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 1.5rem;
  padding: 0 var(--space-1);
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

.vs-palette-slash:focus-visible,
.vs-palette-full:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.vs-palette-slash [data-vs-slash-state] {
  color: var(--color-ink);
  font-weight: var(--text-body-strong-weight);
}

/* ---- keycaps ---- */

/* A key, drawn as the cut plates are: square, hairline-edged, with a thicker
   lower edge so it reads as something pressed rather than as inline code. */
.vs-kbd {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.35rem;
  text-align: center;
  color: var(--color-ink-muted);
  background: var(--color-paper);
  border: var(--border-hairline) solid var(--color-rule-strong);
  border-bottom-width: 0.125rem;
  border-radius: var(--radius-cut);
}

/* The trigger shows the modifier this platform uses. Until the script has
   said which, the Windows and Linux form shows, because that is the one that
   is right more often. */
[data-vs-kbd="mac"] {
  display: none;
}

:root[data-vs-platform="mac"] [data-vs-kbd="mac"] {
  display: inline-block;
}

:root[data-vs-platform="mac"] [data-vs-kbd="other"] {
  display: none;
}

/* ---- phone width ---- */

@media (max-width: 40rem) {
  .vs-palette {
    width: 100%;
    height: var(--vs-palette-viewport, 100dvh);
    max-height: none;
    margin: 0;
    border: 0;
    box-shadow: none;
  }

  .vs-palette-head {
    padding: max(var(--space-2), env(safe-area-inset-top)) var(--space-3) var(--space-2);
  }

  .vs-palette-hint {
    display: none;
  }

  .vs-palette-foot {
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
  }

  .vs-palette-option {
    padding: var(--space-3) var(--space-2);
  }
}

/* ---- coarse pointer ---- */

.vs-palette-close-word {
  display: none;
}

/* A keycap names the key that does the same thing, and there is no key to
   press on a touchscreen: the "Esc" glyph read as a stray label rather than
   a control. The word replaces it and the target grows to the pointer floor
   the rest of the surface already uses at this granularity. */

@media (pointer: coarse) {
  .vs-palette-close {
    min-width: 2.75rem;
    min-height: 2.75rem;
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    border-bottom-width: var(--border-hairline);
  }

  /* Swapped rather than generated: text drawn with ::after joins the button's
     accessible name, which then read "Close search Close". */
  .vs-palette-close-key {
    display: none;
  }

  .vs-palette-close-word {
    display: inline;
  }

  /* The shortcut it toggles has no keyboard to fire it from here. */
  .vs-palette-slash {
    display: none;
  }
}

/* Keys named in prose share the palette's keycap, so "press Ctrl K" on a page
   looks like the key the palette itself shows. Sphinx splits a chord into one
   element per key inside an outer one; only the inner keys are drawn. */
.vs-docs-article kbd.kbd:not(.compound),
.vs-docs-article kbd.kbd.compound > kbd.kbd {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.85em;
  line-height: 1.5;
  text-align: center;
  color: var(--color-ink);
  background: var(--color-paper-raised);
  border: var(--border-hairline) solid var(--color-rule-strong);
  border-bottom-width: 0.125rem;
  border-radius: var(--radius-cut);
}

.vs-docs-article kbd.kbd.compound {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* ---- the header trigger ---- */

/* An inlaid field, like the search input it stands for: sunken ground and a
   hairline, cut into the header rather than laid on it. It takes the space
   between the brand and the header's own controls, and shows the key that
   opens it so the shortcut is learned by looking. */

.vs-docs-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 17rem;
  min-width: 0;
  min-height: 2.25rem;
  margin-inline-start: var(--space-8);
  padding: 0 var(--space-1) 0 var(--space-3);
  font-size: var(--text-meta);
  line-height: var(--text-meta-line-height);
  color: var(--color-ink-muted);
  text-decoration: none;
  background: var(--color-paper-sunken);
  border: var(--border-hairline) solid var(--color-rule-strong);
  border-radius: var(--radius-cut);
  cursor: text;
}

.vs-docs-search-trigger:hover {
  color: var(--color-ink);
  border-color: var(--color-ink-muted);
}

.vs-docs-search-trigger:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.vs-docs-search-glyph {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.vs-docs-search-trigger-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vs-docs-search-keys {
  display: inline-flex;
  flex: none;
}

/* At drawer width the header holds the brand and two square controls: search
   stays outside the drawer, beside the button that opens it. The label leaves
   the screen but not the accessibility tree. */

@media (max-width: 60rem) {
  .vs-docs-search-trigger {
    flex: none;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    min-height: 0;
    margin-inline: auto var(--space-2);
    padding: 0;
    background: var(--color-paper-raised);
  }

  .vs-docs-search-glyph {
    width: 1.25rem;
    height: 1.25rem;
  }

  .vs-docs-search-trigger-label {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    margin: -0.0625rem;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .vs-docs-search-keys {
    display: none;
  }
}