/* The page head: where this page sits, and what a reader can take away from it.
 *
 * The breadcrumb answers the first question and has been here since the trail
 * was rendered for readers rather than only for crawlers. The second is new.
 * Every page is published twice, as HTML and as Markdown at the same stem, and
 * the Markdown was reachable only through a <link> in the head - which is to
 * say by the machines it was written for and by nobody holding a mouse.
 *
 * The two share one row because both are furniture about the page rather than
 * part of it, and one row of small grey type reads as furniture where two would
 * read as a header. The actions go right so the trail keeps the text column's
 * left edge, which is the edge every heading and paragraph below it starts on.
 *
 * Below the width where both fit, the actions wrap under the trail rather than
 * squeezing it: a breadcrumb broken over two lines to make room for two
 * controls reads as an accident rather than as a choice.
 */

.vs-docs-article .vs-docs-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-2);
}

/* Alone in the article the trail carries the gap under it; in this row the row
   owns it, and leaving both would set the heading twice as far down on a page
   with a trail as on one without. */
.vs-docs-article .vs-docs-page-head .vs-docs-crumbs ol {
  margin-bottom: 0;
}

.vs-docs-article .vs-docs-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 0 auto;
}

/* Quiet and meta-sized, because these sit beside running text rather than in a
   toolbar: the shared control layer already paints the resting ground, the
   hover and the focus ring, so the only argument here is the geometry. The
   floor is a 24px target in both axes - the actions are read on a phone as
   often as on a desk, and a control small enough to miss is one a reader stops
   reaching for. */
.vs-docs-article .vs-docs-page-action {
  --control-min-height: var(--space-6);
  --control-padding: var(--space-0-5) var(--space-2);
  --control-gap: var(--space-1-5);
}

/* Drawn rather than lettered, in the one stroke the rest of this theme's
   glyphs are drawn in, and in currentColor so each follows its control through
   every state. */
.vs-docs-article .vs-docs-page-action svg {
  flex: none;
  width: var(--space-4);
  height: var(--space-4);
}