/* The measure belongs to prose, not to the page.
   Holding the whole article to 68 characters put a two-hundred-character
   command into a 623px well with 450px of empty mat beside it: measured at
   1440px wide, forty-eight of the CLI reference's blocks scrolled sideways for
   want of room that was already there. Text keeps the measure, because that is
   what it is for. Blocks and tables take the column.

   The canonical block measure keeps prose, lists and figures aligned even
   when their font sizes differ. */

.vs-docs-article {
  --docs-measure: var(--doc-measure);
  font-size: var(--doc-body);
  line-height: var(--doc-body-line-height);
}

.vs-docs-article :is(p, dt, blockquote, figure) {
  max-width: var(--docs-measure);
}

/* `dd` carries its own indent as a margin rather than a parent's padding, so
   the same 1.5rem has to come off its own cap instead of a container's. */

.vs-docs-article dd {
  max-width: calc(var(--docs-measure) - var(--space-6));
}

/* Except the two figures that are blocks rather than prose, which the rule
   above already says should take the column. Both scale their contents to the
   width they are given, so the measure was shrinking type that had no measure
   to keep: the diagram renders its viewBox into 623px instead of the 736px
   column, and the recording fits ninety-two terminal columns into the same.
   Measured on this build, that put every label in both diagrams under the
   twelve-pixel floor the type scale declares for prose - stage names at 12.3px
   and 11.0px, directory labels and captions at 9.1px and 8.4px - and the
   recording's cells at about 11.3px. Taking the column is a 1.18x lift for all
   of them and changes nothing inside either figure, so no text can collide with
   anything it did not collide with before.

   The lift was necessary and, for one of the two diagrams, not sufficient. It
   multiplies whatever size the markup declares, and the two diagrams did not
   declare the same sizes: the pipeline on the concepts page sets its labels at
   19 and 18 user units, the sync diagram on the MCP guide set its at 17, 15 and
   13. So the same 1.18x left the first comfortably over the floor and the
   second under it - notes and directory labels at 9.97px and the band caption
   at 11.50px, at the widest viewport the site has. A stylesheet cannot reach
   those: an SVG presentation attribute is what sets them, and the fix is in the
   markup, which now carries the same 19 and 18 as the other diagram. The two
   lines that would not fit at 18 were rewrapped rather than shrunk, and the
   viewBox grew taller to hold them - free, because width alone maps the viewBox
   to the column, so height buys room at no cost to the rendered size.

   None of this makes the diagrams legible on a phone. There the column is 358px
   and the labels land between 4.9px and 7.1px; closing that needs a portrait
   layout the figures do not have, not a wider box. The widening is the part
   that was free; matching the sizes was the part that was overdue. */

.vs-docs-article :is(.vs-pipe, .vs-cast) {
  max-width: none;
}

/* Headings take the block column instead of a measure of their own, so the h2
   rule, code blocks and tables share one right edge rather than three: at
   1440px the old measure put the heading rule and the prose edge together at
   about x=990 while blocks ran on to about x=1104. A reader's eye had no
   single line to return to. */

.vs-docs-article :is(h1, h2, h3, h4, h5) {
  max-width: none;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.vs-docs-article {
  max-width: none;
}

/* The sidebar's search field had no rule of any kind. The markup calls it
   .vs-docs-search-input and the only declarations in this file were for
   .vs-docs-searchpage-input, which belongs to the search page's own form - so
   on all thirty-nine pages the one control in the navigation rail rendered as
   a browser default: system font, system ground, system corner, in the middle
   of a surface where nothing else is.

   It is inlaid stock: an input is cut into the page rather than laid on it, so
   it takes the sunken ground and a hairline, and casts nothing. */

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

/* ---- prose ------------------------------------------------------------- */

.vs-docs-article h1,
.vs-docs-article h2,
.vs-docs-article h3,
.vs-docs-article h4 {
  font-family: var(--font-display);
  font-synthesis: none;
  color: var(--color-ink);
  margin: var(--space-10) 0 var(--space-3);
}

/* A section break has to cost more than a paragraph break, and it did not:
   every heading carried a 1.5rem top margin while every paragraph carried a
   1.5em bottom margin, so after collapsing they were the same gap. On the CLI
   reference that left forty-three command sections with no more air between
   them than two sentences have.

   The steps are fluid because a section interval cannot be one number. The gap
   that gives a wide page its air is a gap that spends half a phone screen on
   nothing, and this surface is read at both. Four intervals, ordered by
   level, so the depth of a break is legible before the heading is read -
   h4 used to break that order with a flat 40px, wider than h3's own 32px
   ceiling. */

/* The ladder is the documentation role scale, named in the token layer. It
   used to be assembled here out of marketing roles read at an offset, which is
   how it came to be inverted once already: `--text-display` is a compatibility
   alias onto `--ms-h3`, so every page title rendered at 22px beneath section
   headings of 24px. Four roles kept in agreement by hand is three chances to
   get it wrong; the scale now states the relationship. */

.vs-docs-article h1 {
  font-size: var(--doc-h1);
  line-height: var(--doc-h1-line-height);
  letter-spacing: var(--doc-h1-tracking);
  font-weight: var(--doc-h1-weight);
  margin-top: 0;
}

/* --space-fluid-lg pins to 5.5rem (88px) at this width - a section break
   that read as three empty paragraphs. A break still has to cost more than a
   paragraph break, so the floor stays above the tightened rhythm below; it
   just no longer costs a whole screen's worth of scroll on a long reference. */

.vs-docs-article h2 {
  font-size: var(--doc-h2);
  line-height: var(--doc-h2-line-height);
  letter-spacing: var(--doc-h2-tracking);
  font-weight: var(--doc-h2-weight);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hairline) solid var(--color-rule);
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
}

.vs-docs-article h3 {
  font-size: var(--doc-h3);
  line-height: var(--doc-h3-line-height);
  letter-spacing: var(--doc-h3-tracking);
  font-weight: var(--doc-h3-weight);
  margin-top: clamp(var(--space-6), 3vw, var(--space-8));
}

.vs-docs-article h4 {
  font-family: var(--font-label);
  font-size: var(--doc-h4);
  line-height: var(--doc-h4-line-height);
  font-weight: var(--doc-h4-weight);
  letter-spacing: var(--doc-h4-tracking);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-top: clamp(var(--space-5), 2vw, var(--space-6));
  margin-bottom: var(--space-2);
}

.vs-docs-article h5 {
  font-family: var(--font-label);
  font-size: var(--doc-h5);
  line-height: var(--doc-h5-line-height);
  font-weight: var(--doc-h5-weight);
  color: var(--color-ink-muted);
  margin-top: clamp(var(--space-4), 1.5vw, var(--space-5));
  margin-bottom: var(--space-2);
}

/* An h4 that names a thing is a title, not a section label.
   The uppercase rule above is right for the 141 h4s that read Options,
   Examples, Arguments, Subcommands - one word each, the same four repeating
   down a reference. It is wrong for the two on this site that carry code in
   the heading, because those name something: "Step-Aware Execution Scaffolding
   (DOC_TYPE=exec)" was being shouted in muted ink with 0.09em tracking. Code in
   the heading is the discriminator, and it sorts 2 from 143 with nothing
   misfiled either way. */

.vs-docs-article h4:has(code) {
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-ink);
}

/* Paragraphs carried no spacing rule at all, so they fell to the user-agent
   1em - a gap smaller than the 1.6 leading inside them, which is what made long
   prose read as one slab. The space between paragraphs has to beat the space
   between lines or the boundary is invisible.

   It is now a step on the scale rather than 1.5em, which was the most-used gap
   on the site and the only major one governed by nothing. 2rem cleared the 1.6
   leading with room to spare but fragmented the column into separate islands
   on its own; 1.25rem still clears it, which is enough to keep a boundary
   unmistakable without spending that much of the column on it. */

.vs-docs-article p {
  margin: 0 0 var(--space-5);
  text-wrap: pretty;
}

/* Lists carried no rule either, so they took the user-agent's 1em and its 40px
   indent - an indent set in pixels, which ignores the reader's own type size,
   and a row gap that made a six-item options list read as one paragraph with
   bullets in it.

   The measure is capped here rather than on `li`: capping the item left it
   inside this padding, so a bulleted line ran to 24px past every plain
   paragraph's edge. Capping the box that owns the indent keeps an item's
   text flush with the rest of the prose instead, at any nesting depth,
   because the indent is inside the cap rather than added on top of it. */

.vs-docs-article :is(ul, ol) {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-6);
  max-width: var(--docs-measure);
}

.vs-docs-article :is(ul, ol) :is(ul, ol) {
  margin: var(--space-2) 0 0;
}

.vs-docs-article li + li {
  margin-top: var(--space-2);
}

/* Docutils wraps every list item's content in a paragraph, including in the
   lists it calls simple, where the item is one line. Without this the
   paragraph rhythm - which is set to be unmistakable between paragraphs -
   lands between bullets instead, and a seven-item options list opens to the
   height of a screen. Inside an item the gap is a paragraph break within one
   thought, not a break between two, and the last one owns no space at all
   because the item's own row gap is already carrying it. */

.vs-docs-article :is(li, dd) > p {
  margin-bottom: var(--space-3);
}

.vs-docs-article :is(li, dd) > p:last-child {
  margin-bottom: 0;
}

.vs-docs-article dl {
  margin: 0 0 var(--space-5);
}

/* A term in a "choose your setup" list is the thing a reader scans for; at
   body weight it read as ordinary prose, no different from its own
   definition. */

.vs-docs-article dt {
  color: var(--color-ink);
  font-weight: var(--text-body-strong-weight);
}

.vs-docs-article dd {
  margin: var(--space-2) 0 var(--space-6) var(--space-6);
}

.vs-docs-article p,
.vs-docs-article li {
  color: var(--color-ink);
}

.vs-docs-article a {
  color: var(--color-accent-text);
  text-decoration-color: var(--color-accent-subtle);
  text-underline-offset: 0.15em;
}

.vs-docs-article a:hover {
  text-decoration-color: currentColor;
}

/* The anchor beside a heading is navigation, not prose: it stays out of the
   reading line until the heading is hovered or the link itself is focused. */

.vs-docs-article .headerlink {
  margin-left: var(--space-1);
  color: var(--color-ink-faint);
  opacity: 0;
  text-decoration: none;
}

.vs-docs-article :is(h2, h3, h4, h5):hover .headerlink,
.vs-docs-article .headerlink:focus-visible {
  opacity: 1;
}

/* The title names the page; nothing links to "the top of the top", so it is
   the one heading with no anchor to reveal. */

.vs-docs-article h1 .headerlink {
  display: none;
}

.vs-docs-article hr {
  border: 0;
  border-top: var(--border-hairline) solid var(--color-rule);
  margin: var(--space-12) 0;
}

.vs-docs-article blockquote {
  margin: var(--space-8) 0;
  padding-left: var(--space-5);
  border-left: var(--border-thick) solid var(--color-rule-strong);
  color: var(--color-ink-muted);
}

/* ---- tables ------------------------------------------------------------ */

.vs-docs-article table.docutils {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--doc-table);
  line-height: var(--text-body-line-height);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--space-5);
}

.vs-docs-article table.docutils th,
.vs-docs-article table.docutils td {
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--color-rule);
  text-align: left;
  vertical-align: top;
}

/* Docutils wraps every cell's content in a paragraph, so a one-line cell
   carried the paragraph rule's own bottom margin inside a row that has no
   second paragraph to separate it from. */

.vs-docs-article table.docutils :is(td, th) > p {
  margin: 0;
}

.vs-docs-article table.docutils th {
  background: var(--color-paper-sunken);
  font-family: var(--font-label);
  font-weight: var(--text-body-strong-weight);
}

/* ---- admonitions ------------------------------------------------------- */

/* One shape, recoloured by severity. The rule is a left edge rather than a
   filled panel: a documentation page carries many of these, and filled blocks
   at this density read as a page of warnings rather than a page of prose. */

.vs-docs-article .admonition,
.vs-docs-article .topic {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-paper-sunken);
  border: var(--border-hairline) solid var(--color-rule);
  border-left: var(--border-accent-edge) solid var(--color-rule-strong);
  border-radius: var(--radius-cut);
}

.vs-docs-article .admonition > .admonition-title,
.vs-docs-article .topic > .topic-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-line-height);
  color: var(--color-ink);
}

.vs-docs-article .admonition > :last-child {
  margin-bottom: 0;
}

.vs-docs-article .admonition.note,
.vs-docs-article .admonition.seealso,
.vs-docs-article .admonition.hint,
.vs-docs-article .admonition.tip,
.vs-docs-article .admonition.important {
  border-left-color: var(--color-accent);
}

.vs-docs-article .admonition.warning,
.vs-docs-article .admonition.caution,
.vs-docs-article .admonition.attention {
  border-left-color: var(--color-state-stale);
}

.vs-docs-article .admonition.danger,
.vs-docs-article .admonition.error {
  border-left-color: var(--color-state-broken);
}

/* Sphinx wraps a `container` directive in `docutils container`. The generic
   class carries block margins this layout sets on the specific one, so it is
   zeroed rather than fought with specificity at every use. */

.vs-docs-article .docutils.container {
  margin: 0;
}

/* A hidden toctree renders its wrapper and nothing inside it. The element is
   invisible either way; removing it keeps the rendered document honest about
   what it contains. Whitespace inside means :empty never matches, so the test
   is for the list a populated wrapper would hold. */

.vs-docs-article .toctree-wrapper.compound:not(:has(ul)) {
  display: none;
}

/* An anchor kept alive after the heading that owned it went away. Renaming or
   removing a section breaks every link anyone saved to it, so the pages leave
   `<p id="old-anchor"></p>` behind to catch them: fifty-four of these across
   twelve pages. They hold no text and still take the paragraph rule's bottom margin,
   so each one opens a paragraph-sized hole in the prose, twice over on the
   correctness page where two sit together.

   Zeroed rather than hidden. `display: none` would tidy the gap and cost the
   element its whole reason to exist, because a browser does not scroll to a box
   it is not laying out - the saved link would resolve and land nowhere. With no
   content and no margin the box is already zero-height, so it stays in flow,
   stays a target, and stops pushing the page apart. */

.vs-docs-article p:empty {
  margin: 0;
}

/* Touch has no hover, so a control revealed by it would never appear. The copy
   button no longer hides that way, and the heading anchors need reaching too
   - but not at the heading's size, and not the H1's, which stays hidden above.
   Full size down a whole reference page read as forty stray marks rather than
   forty headings. The glyph is made small rather than faint: at 0.6 opacity the
   faint ink composited to 2.31:1, a link no reader could be asked to find. The
   target still clears WCAG 2.2's 24px floor where the glyph itself does not. */

@media (pointer: coarse) {
  .vs-docs-article :is(h2, h3, h4, h5) .headerlink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-6);
    min-height: var(--space-6);
    font-size: 0.75em;
    opacity: 1;
  }
}

/* ---- where you are ----------------------------------------------------- */

/* The trail sits inside the article, above the heading, so it takes the
   article's own decisions about measure and rhythm rather than the shell's.
   Plain inline text at meta size, on one baseline: the markup carries no
   `.vs-control` any more, so nothing here has to undo a chip's padding and
   border to get a sentence a reader skims rather than a row of buttons.

   The separator sits on the wrapping li's own side of the gap, glued to
   whichever crumb follows it, so a wrap can never start a line with a bare
   "/". The last crumb is the current page and is not a link, so it takes
   the muted ink the rest of the trail's text does and none of the link
   colour. */

.vs-docs-article .vs-docs-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
  font-size: var(--text-meta);
  line-height: var(--text-meta-line-height);
  color: var(--color-ink-muted);
  /* The list measure above answers to reading prose; a trail is navigation
     wrapping on the same column as headings and rules, not a bulleted read. */
  max-width: none;
}

.vs-docs-article .vs-docs-crumbs li {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  margin: 0;
}

/* The separator closes the crumb before it rather than opening the next, so
   a trail that wraps on a phone breaks after a slash, never before one. */
.vs-docs-article .vs-docs-crumbs li:not(:last-child)::after {
  content: "/";
  color: var(--color-rule-strong);
}