@import "https://assets.elements.dev/assets/app/shared/styles/page.bbd96b3881544aa4.css";
/* Code fences, inline code, and the syntax token colors, shared with the
   feed so a fenced elements html block looks the same in both places. */
@import "https://assets.elements.dev/assets/app/shared/styles/post-body.229d4509dd5c21df.css";

/* ---- topic list ---- */


/* ---- the page ---- */

.man-crumbs {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  /* The /ui crumb row's margin plus its header's gap, so the title lands
     where every site page's title does. */
  margin-bottom: calc(var(--space-4) + var(--space-3));
}
.man-doc .man-crumbs a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
  text-underline-offset: 0.25em;
}
.man-crumbs a:hover { }
.man-crumb-sep { padding: 0 0.4em; }
.man-crumb-current { color: var(--ink); }

.man-title {
  font-family: var(--font-sans);
  font-size: var(--page-title);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-none);
  margin: 0 0 var(--space-4);
}

/* The terminal address for the same page, so a reader who arrives from search
   learns the command. */
/* The command, over the rule that opens the page. */
.man-command {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--rule);
}
.man-command code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  background: none;
  padding: 0;
}
/* The menu under the title, boxed like the post's own (.post-actions in
   the discussion template, which this page does not load), placed as /vs
   places it. */
.man-actions {
  display: flex;
  align-items: center;
  margin: calc(-1 * var(--space-3)) 0 var(--space-6);
}
.man-actions > .action-row {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  gap: 0;
}
.man-actions .action-row .action-menu {
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}
.man-actions .action-row .action-menu:hover,
.man-actions .action-row .action-menu.is-open {
  border-color: var(--ink-faint);
  color: var(--ink);
}

/* One width for the page: the title, its rule, headings, code blocks and
   tables end at the same right edge as the text, at the manual's measure.
   A wide table or long code line scrolls inside its own box. */
.man-doc {
  max-width: var(--measure);
  min-width: 0;
}

.man-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.man-body pre {
  overflow-x: auto;
  border-radius: var(--radius-md);
}

.man-body table {
  width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}

/* ---- child listing on a branch page ---- */

/* `elements man html` prints its children after the prose; the corpus does
   not carry that listing, so the page builds it from the manifest order. */
.man-children {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--rule);
}
.man-children-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-5);
}
.man-child {
  display: block;
  text-decoration: none;
  /* The row's two spans set their own colours, so the link colour only
     shows on whitespace — but the theme derives a bare <a> from the text
     around it, and on a dark ground that asks for a blue lighter than
     sRGB has. Browsers gamut map that differently, so the row is pinned
     to the page's ink instead. */
  color: inherit;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
}
.man-child:last-child { border-bottom: 0; }
.man-child-name {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent-deep);
}
.man-child-summary {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: var(--leading-snug);
  margin-top: 2px;
  max-width: var(--measure);
}
.man-child:hover .man-child-summary { color: var(--ink); }

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

/* Reference prose is denser than a post: short paragraphs, a code block every
   few lines, headings every screen. At the default rhythm it packs together
   and reads as one undifferentiated block, so everything here buys vertical
   air and gives the headings enough lead to act as landmarks. */
.man-body > * + * { margin-top: var(--space-5); }
.man-body > * + h2 { margin-top: var(--space-14); }
.man-body > * + h3 { margin-top: var(--space-10); }
.man-body > h2 + *,
.man-body > h3 + * { margin-top: var(--space-4); }

.man-body h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.man-body h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.man-body li { margin-top: var(--space-2); }
.man-body li > p { margin: 0; }

/* ---- code ---- */

/* The fences carry the weight of a reference page, so they get real padding
   and a looser line height. The default sits at 0.75rem/1.6, which puts the
   first line against the top edge and reads as a dump rather than as a
   figure. */
.man-body pre.code-fence,
.man-body pre {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  --pre-pad-y: var(--space-5);
  --pre-pad-x: var(--space-6);
  padding: var(--pre-pad-y) var(--pre-pad-x);
  border-radius: var(--radius-lg);
  margin: var(--space-6) 0;
  overflow-x: auto;
  /* No ligatures, so => stays => and !== stays !==, matching the terminal
     cards on the home page. */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

/* Inline code sits inside running text, so it has to hold the line height it
   is in rather than pushing the line apart. */
/* Inline code is monospace in the ink color with no panel behind it, so a
   paragraph full of names and paths reads calmly and long paths wrap on a
   phone. Code fences keep their dark surface. */
.man-body :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  overflow-wrap: anywhere;
}

.man-body a code { color: inherit; }

/* A name that is a cell's whole content stays on one line, so the column
   sizes to it; code inside a sentence wraps at spaces, never mid-word. */
.man-body :is(td, th) > code { overflow-wrap: normal; }
.man-body :is(td, th) > code:only-child { white-space: nowrap; }

@media (max-width: 640px) {
  .man-title { font-size: 2.5rem; }
}

/* The manual's header holds only the trigger, so the row gets the same air
   above and below it, open or collapsed, and the trigger never moves
   vertically when the rail toggles. */
.man-page .catalog-nav-head,
.man-page .sidebar-wrapper[data-state="collapsed"] .catalog-nav-head {
  padding-top:    var(--space-2);
  padding-bottom: var(--space-2);
}