@import "https://assets.elements.dev/assets/app/shared/styles/page.ff0dc0f91a65e37.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";

/* The same frame as the /ui catalog: the topic list flush left with a rule
   down its edge for the page's full height, and the page centered in the
   width that is left. Collapsed, the list is only its trigger. */
.man-shell {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  align-items: stretch;
  min-height: 100svh;
  /* The topbar's own width and gutter (topbar/style.css, .topbar-inner),
     so the list's edge lines up with the logo above it. */
  max-width: 1240px;
  margin-inline: auto;
  /* The two columns start on one line, the breadcrumb row's, and the list
     is a closed panel that keeps the same margin above and below it as it
     follows the page. */
  padding: var(--space-16) 1.5rem;
}
.man-shell.is-collapsed { grid-template-columns: 3rem minmax(0, 1fr); }
.man-shell.is-collapsed .man-nav-home,
.man-shell.is-collapsed .man-nav-list { display: none; }

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

.man-nav {
  font-size: var(--text-sm);
}
/* Sticky under the topbar so the reader keeps their place in the manual
   while reading a long page. The same top as the page title beside it. */
.man-nav-inner {
  position: sticky;
  top: var(--space-16);
  max-height: calc(100svh - 2 * var(--space-16));
  overflow-y: auto;
  padding: var(--space-2) var(--space-3) var(--space-12);
  border: 1px solid var(--rule);
}
.man-shell.is-collapsed .man-nav-inner {
  height:  calc(100svh - 2 * var(--space-16));
  padding: var(--space-1);
}
.man-shell.is-collapsed .man-nav-row { justify-content: center; margin: 0; }

/* The trigger sits at the right of the column, as the /ui tree's does. */
.man-nav-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}
.man-nav-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.man-nav-trigger svg { width: 1rem; height: 1rem; }
.man-nav-trigger:hover { color: var(--ink); background: var(--bg-muted); }

/* The same quiet label the /ui tree gives a group. */
.man-nav-home {
  display: block;
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  text-decoration: none;
  margin-bottom: var(--space-2);
}
.man-nav-home:hover { color: var(--ink); }
.man-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Rows like the /ui tree: a fixed height, a filled pill on hover and on the
   current page. Two classes deep so the site's a:not([class]) rule, which a
   shared template's stylesheet brings in after this one, does not win. */
.man-nav .man-nav-item a {
  display: flex;
  align-items: center;
  height: 1.625rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  line-height: var(--leading-snug);
}
.man-nav .man-nav-item a:hover {
  color: var(--ink);
  background: var(--bg-muted);
}

/* A child sits under the topic it belongs to, indented, with a rule down the
   group so the indent reads as containment. */
.man-nav-item.is-child {
  margin-left: var(--space-3);
  padding-left: var(--space-2);
  border-left: 1px solid var(--rule);
}
.man-nav .man-nav-item.is-current > a {
  color: var(--ink);
  font-weight: var(--weight-semibold);
  background: var(--bg-muted);
}

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

.man-crumbs {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  margin-bottom: var(--space-4);
}
.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. A wide table or long code
   line scrolls inside its own box. */
/* The page column: the same padding as a /ui page, the text centered in it
   at the manual's measure. */
.man-doc {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--space-10));
  min-width: 0;
  margin-inline: auto;
  padding: 0 var(--space-10) var(--space-24);
}

.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;
}

@media (max-width: 900px) {
  .man-shell,
  .man-shell.is-collapsed {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 0;
  }
  /* On one column the topic list is a header, not a rail, and it does
     not collapse. */
  .man-nav {
    border-bottom: 1px solid var(--rule);
  }
  .man-nav-inner,
  .man-shell.is-collapsed .man-nav-inner {
    position: static;
    max-height: none;
    overflow: visible;
    border: 0;
    padding: var(--space-6) var(--page-gutter);
  }
  .man-nav-row { display: none; }
  .man-shell.is-collapsed .man-nav-home,
  .man-shell.is-collapsed .man-nav-list { display: revert; }
  .man-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-4);
  }
  .man-nav-item.is-child { display: none; }
  .man-doc {
    max-width: none;
    padding: var(--space-6) var(--page-gutter) var(--space-16);
  }
}

/* ---- 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; }
}