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

/* Two columns: the topic list, then the page. The nav column is fixed so a
   long page does not shift it, and the doc column carries its own measure
   rather than inheriting the page frame's. */
.man-shell {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--space-6) var(--space-24);
}

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

/* Sticky under the topbar so the reader keeps their place in the manual
   while reading a long page. */
.man-nav {
  position: sticky;
  top: var(--space-8);
  font-size: var(--text-sm);
}
.man-nav-home {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: var(--weight-bold);
  text-decoration: none;
  margin-bottom: var(--space-4);
}
.man-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.man-nav-item a {
  display: block;
  padding: 2px 0;
  color: var(--ink-soft);
  text-decoration: none;
  line-height: var(--leading-snug);
}
.man-nav-item a:hover { color: var(--ink); }

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

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

.man-crumbs {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-bottom: var(--space-4);
}
.man-crumbs a {
  color: var(--ink-soft);
  text-decoration: none;
}
.man-crumbs a:hover { text-decoration: underline; }
.man-crumb-sep { padding: 0 0.4em; }
.man-crumb-current { color: var(--ink); }

.man-title {
  font-family: var(--font-sans);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  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 on the left, the markdown link pushed to the right edge. Sat
   next to each other they read as one string, as though "markdown" were an
   argument to the command. */
.man-command {
  display: flex;
  align-items: baseline;
  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;
}
.man-source {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.man-source:hover { color: var(--ink-soft); }

/* Long pages read better with a cap, but code blocks and tables need the full
   column, so the cap goes on the running text rather than on the container. */
.man-body > p,
.man-body > ul,
.man-body > ol { max-width: var(--measure); }

.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 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    padding: 0 var(--space-5) var(--space-16);
  }
  /* On one column the topic list is a header, not a rail. */
  .man-nav {
    position: static;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--rule);
  }
  .man-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-4);
  }
  .man-nav-item.is-child { display: none; }
}

/* ---- 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-faint);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-5);
}
.man-child {
  display: block;
  text-decoration: none;
  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;
  padding: var(--space-5) var(--space-6);
  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. */
.man-body :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
}

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