/* ---- sidebar navigation ------------------------------------------------ */

/* The rail draws a flat list. The declared navigation has one level of rows,
   and the two product sections keep theirs inside a disclosure rather than as
   a nested branch, so there is no indentation to carry and no marker to hide.
   A row is placed by the caption above it, not by how far in it sits. */

.vs-docs-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vs-docs-toc li {
  margin: 0;
}

/* Both rails use the same row rhythm. Space belongs between targets rather
   than inside one rail's outer edge, so wrapped labels never collide with the
   state drawn on the row above or below them. */

.vs-docs-toc li + li,
.vs-docs-onpage li + li {
  margin-top: var(--space-1);
}

.vs-docs-onpage li > ul {
  margin-top: var(--space-1);
}

/* A navigation row is a thing you point at, so it has to be big enough to be
   pointed at. These were two pixels of padding on a thirteen pixel row, which
   made forty links read as one continuous block of text and gave the pointer
   nothing to land on; it also sat under WCAG 2.2's 24px target minimum. The
   row is now the same chip the landing page uses for a selectable thing, at
   the same padding, so a reader who has seen one has seen both. */

.vs-docs-toc a,
.vs-docs-onpage a {
  --control-display: block;
}

/* The 24px floor above is a mouse reader's minimum, not a thumb's. The
   control system already carries a coarse-pointer height on the token
   layer; a row only has to ask for it, the same way the phone-width
   drawer's own controls do. */

@media (pointer: coarse) {
  .vs-docs-toc a,
  .vs-docs-onpage a {
    --control-min-height: var(--interaction-height);
  }
}

/* One highlighted row per page. The page a reader is on takes ground and ink
   together - the shared control's own selection paint, reached through the
   aria-current the template writes, so the state is in the markup and the CSS
   only follows it.

   Ground and ink rather than the left bar this carried before: a bar detaches
   from its row the moment the row wraps to two lines, which on a rail this
   narrow is most of them, and a state carried in two channels still reads when
   one of them is gone - a monochrome rendering, or a reader who does not
   separate these hues.

   The section that page is inside is not a second highlighted row. It is an
   open disclosure, and it says so by weight and by where its chevron points. */

/* ---- the ruler voice ---------------------------------------------------
   The mat language's labels have a voice of their own: the console face, set
   small, tracked and uppercase. The documentation theme once copied the ruler
   label's size, weight and tracking to eight places and never set its face, so
   every one of them rendered in the reading face - the tracking of a ruler
   label with none of its voice. Every label on the rails takes its face from
   this rule; labels elsewhere in the theme name the same token themselves.

   h4 takes the same face in the prose styles, at its own size. It is a level in
   the document outline rather than a label on the furniture, so it keeps the
   heading scale instead of the ruler's. */

.vs-docs-onpage-label,
.vs-docs-toc-caption,
.vs-docs-toc-summary,
.vs-docs-toc .vs-docs-toc-group,
.vs-docs-pager-caption,
.vs-docs-pager-label {
  font-family: var(--font-label);
}

/* ---- on this page ------------------------------------------------------ */

/* The site tree answers "where else can I go"; the local contents answers
   "what is on this page". At wide widths each occupies the same ruled rail;
   at narrower widths their source order changes, but their inset and row
   rhythm remain identical. */

.vs-docs-onpage {
  margin-top: 0;
}

.vs-docs-onpage-label {
  margin: 0 0 var(--space-1);
  /* Muted rather than faint. Faint at caption size reads 4.29:1 on the light
     ground, under the 4.5 a label this small needs. */
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--ms-rule-label-tracking);
}

.vs-docs-onpage ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-3);
  border-left: var(--border-hairline) solid var(--color-rule);
}

.vs-docs-onpage > ul {
  padding-left: 0;
  border-left: 0;
}

/* A long local list, collapsed to its top level with the branch being read
   opened. `onpage-current.js` decides which lists qualify and marks the open
   chain; without it neither class is ever set and the full list renders, which
   is why the hiding lives behind a class rather than behind a page width or a
   media query. Depth here is counted from the wrapper list item Sphinx puts the
   page title in, so `> ul > li > ul` is the first level a reader sees. */

.vs-docs-onpage-deep > ul > li > ul > li > ul > li > ul {
  display: none;
}

.vs-docs-onpage-deep li.vs-docs-onpage-open > ul {
  display: block;
}

/* Sphinx wraps the whole local toc in one list item carrying the page title,
   which the H1 above the prose already states. The wrapper's own link is
   dropped and its children promoted, so the list starts at the first real
   section rather than repeating the title. */

.vs-docs-onpage > ul > li > a {
  display: none;
}

/* The hidden page-title row above is only Sphinx's structural wrapper. Its
   child list is the visible first level, so it must not inherit the margin,
   rule, or indentation reserved for genuine nested sections. Without this,
   every page section begins one level to the right and a little below the
   "On this page" label. */

.vs-docs-onpage > ul > li > ul {
  margin-top: 0;
  padding-left: 0;
  border-left: 0;
}

/* The home row sits above the sections and is styled as one of their rows,
   because it is one: the root document is what every section hangs off, so it
   cannot be placed inside one of them. */

.vs-docs-toc-home {
  margin: 0 0 var(--space-2);
}

/* A current-page anchor returns to the top of this page; its cursor marks that position. */

.vs-docs-toc a[href="#"] {
  --control-cursor: default;
}

/* ---- section captions -------------------------------------------------- */

/* A caption over a run of rows, in the mat's ruler voice. A collapsible
   section's summary is the same caption with a chevron on it: a reader should
   not have to tell the two apart, only notice that one of them opens. */

.vs-docs-toc-caption,
.vs-docs-toc-summary {
  margin: var(--space-6) 0 var(--space-1);
  padding-bottom: var(--space-1);
  color: var(--color-accent-text);
  font-size: var(--text-meta);
  font-weight: var(--text-body-strong-weight);
  text-transform: uppercase;
  letter-spacing: var(--ms-rule-label-tracking);
  border-bottom: var(--border-hairline) solid var(--color-rule-strong);
}

/* The first caption follows the home row rather than a run of links, so it
   does not need the full interval that separates one section from the next. */

.vs-docs-toc-home + .vs-docs-toc-caption {
  margin-top: var(--space-4);
}

/* The summary holds a name, a chevron and the disclosure behaviour in one
   row, so it is laid out rather than left to flow. Its floor is WCAG 2.2's
   24px target minimum, which the caption's type does not reach on its own.

   The browser's own marker is dropped for a drawn chevron: the marker is a
   glyph from a font this site does not choose, at a size it does not set,
   while the chevron is the stroke weight the rest of the theme's icons use
   and turns to say which state it is in. */

.vs-docs-toc-summary {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-height: var(--space-6);
  list-style: none;
}

@media (pointer: coarse) {
  .vs-docs-toc-summary {
    min-height: var(--interaction-height);
  }
}

.vs-docs-toc-summary::-webkit-details-marker {
  display: none;
}

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

.vs-docs-toc-chevron {
  width: var(--space-4);
  height: var(--space-4);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: square;
  transition: transform var(--duration-ui-fast) var(--ease-snap);
}

/* Open reads by the chevron, never by ground: ground is what says "you are
   on this page", and there is one of those per page. Weight cannot carry it:
   the label face ships two cuts and the summary already sets the heavier one,
   so an open summary can only match its closed caption, which it must. */

.vs-docs-toc-section[open] > .vs-docs-toc-summary .vs-docs-toc-chevron {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .vs-docs-toc-chevron {
    transition: none;
  }
}

/* A group label divides the rows under a caption rather than heading a
   section of its own, so it is smaller, quieter and carries no rule - four
   more ruled labels inside the search component would have made its
   disclosure read as four sections. It aligns with the row text beside it,
   which is inset by the control's own horizontal padding. */

.vs-docs-toc .vs-docs-toc-group {
  margin-top: var(--space-4);
  padding-left: var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--ms-rule-label-tracking);
}

/* ---- sequential navigation --------------------------------------------- */

/* The pager sits below the article rather than in the rail, because it is the
   end of a page rather than a view of the site: a reader reaches it by
   finishing, not by looking for it. Next is the common move and sits on the
   right where the text ends; previous keeps the left. When only one exists the
   grid leaves the other column empty rather than centring the survivor, so the
   position of "next" never moves between pages. */

.vs-docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  /* Below headings, rules and code, not on its own measure: the pager is the
     end of the article rather than something read, so it takes the block
     column those already share. */
  max-width: none;
  margin: var(--space-8) 0 var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-hairline) solid var(--color-rule);
}

/* The caption spans the grid so it heads both cards rather than sitting beside
   one of them, and it is set at the same meta scale as the site tree's own
   group headings: it names a kind of navigation, which is what those do too. */

.vs-docs-pager-caption {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-ink-faint);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--ms-rule-label-tracking);
}

.vs-docs-pager-link {
  --control-display: block;
  --control-pad-y: var(--space-2);
  --control-size: inherit;
  --control-line-height: inherit;
}

/* Next occupies the second column whether or not a previous exists. */

.vs-docs-pager-next {
  grid-column: 2;
  --control-align: right;
}

.vs-docs-pager-label {
  display: block;
  color: var(--color-ink-faint);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--ms-rule-label-tracking);
}

.vs-docs-pager-title {
  display: block;
  margin-top: var(--space-0-5);
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-synthesis: none;
  font-size: var(--text-body-strong);
  font-weight: var(--ms-h3-weight);
  line-height: var(--text-display-line-height);
}

@media (max-width: 40rem) {
  .vs-docs-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .vs-docs-pager-next {
    grid-column: 1;
  }
}