/* The docs section's page template (docs/show): a document header over a content column of rows
   read from the reference dataset. Every page in the section is drawn on it and none is hand-built,
   so a rule here reaches all of them. The section composes c-sectionnav, c-panel, c-prose, the
   c-table family and c-codeblock; what is left for this file is the header, the column rhythm, and
   what generated content asks of those components that authored content does not. */

.p-docs { display: flex; flex-direction: column; gap: var(--space-2xl); }

/* The header repeats the article template's frontmatter block rather than reusing it, a docs page
   being drawn on its own template; the two are meant to read as the same kind of document. */
.p-docs__frontmatter {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-block-start: var(--space-xl);
  padding-block: var(--space-lg);
  border-block: var(--bw) dashed var(--line-strong);
}
.p-docs__title {
  color: var(--text-bright);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: 0;
}
.p-docs__summary {
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: var(--text-lg);
  line-height: var(--lh-cell);
}

.p-docs__generated {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  min-width: 0;
}
.p-docs__section { display: flex; flex-direction: column; gap: var(--space-lg); }
/* A subsection — one menu, one group of keys, one closed set of values — sits closer to its
   neighbours than sections do, so a page made of a dozen small tables still reads as the three or
   four sections it is. */
.p-docs__group { display: flex; flex-direction: column; gap: var(--space-md); }
.p-docs__heading {
  color: var(--text-bright);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

/* c-fieldtable and c-cmdtable were drawn for a value column holding one short value — `auto`,
   `1800`. A dataset row's second column can hold a whole binding: the settings an environment
   variable feeds, the invocations a flag applies to. So it wraps here, while the identifier
   columns keep their single line and c-panel--flush scrolls them within the panel on a narrow
   screen rather than widening the page. */
.p-docs .c-fieldtable td:nth-child(2),
.p-docs .c-cmdtable td:nth-child(2) { white-space: normal; }

/* A cell carrying several facts about its row puts each on a line of its own rather than running
   them together, the dim label ahead of a fact naming the dataset field it was read from. */
.p-docs__facts { display: flex; flex-direction: column; gap: var(--space-3xs); }

/* The marks a command-line row carries sit under the help line they qualify rather than in place
   of it: what an entry does and whether this build has it have to be readable at once. */
.p-docs__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-block-start: var(--space-2xs);
}

/* Some inventory rows are too tall for a table row — a harness has four configuration fields, a
   tool has its arguments — and take a titled panel each instead. That panel cannot be
   c-panel--flush, whose sideways scroll would clip the notched title off, so the entry inside it
   is what scrolls when a long environment key will not fit. */
.p-docs__entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow-x: auto;
}
.p-docs__subheading {
  color: var(--text-bright);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
/* The qualifier beside an entry's name — the key that picks a harness — reads at the body size
   rather than the heading's, so the name stays what the eye lands on. */
.p-docs__subheading .u-dim { font-size: var(--text-sm); font-weight: var(--fw-regular); }

.p-docs__description { color: var(--text-muted); font-size: var(--text-sm); }

/* The repository-relative source the dataset states for an inventory, so a table says what
   generated it. */
.p-docs__source { color: var(--text-dim); font-size: var(--text-xs); }

/* A closed set's note is generated like the rows under it, but it is a paragraph rather than a
   cell, so it takes the prose measure instead of the table's width. */
.p-docs__note {
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-cell);
}

/* A pattern page is the pattern file itself: docs/pages/_patterns_item emits one flat run of
   comment and code segments in the file's order, with no wrapper per pair. Pinning comments to
   column 1 and code to column 2 is what pairs them: auto-placement puts a comment and the code
   segment after it on one row, as tall as the taller of the two, so a comment starts at the
   height of the declaration it is about. Below the site's two-column breakpoint the same run
   collapses to comment above code, which is how the file reads anyway.

   Both columns are set at reading sizes rather than the section's table sizes, a pattern page
   being read rather than consulted, and the segments sit closer together than the page's sections
   do because a comment and the declaration under it are one thought. */
.p-docs__literate { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.p-docs__segment { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
@media (min-width: 56rem) {
  .p-docs__literate {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-xl);
    row-gap: var(--space-lg);
  }
  .p-docs__segment--comment { grid-column: 1; }
  .p-docs__segment--code { grid-column: 2; }
}
.p-docs__literate .c-codeblock { font-size: var(--text-lg); }
/* A comment segment arrives from Docs::PatternCommentary through the post renderer, so it is the
   markup a post's body is made of and reads at that size. What it does not inherit is the rhythm
   between its blocks, a post's being spaced by the section they sit in, which is what the rules
   below supply. */
.p-docs__commentary {
  max-width: var(--measure);
  font-size: var(--text-lg);
  line-height: var(--lh-cell);
}
.p-docs__commentary > * + * { margin-top: var(--space-md); }
/* A heading a comment writes for itself reads at the body size, a segment being a passage rather
   than a page, and takes twice the space above it that it has below or it reads as another line
   of the passage it is ending. */
.p-docs__commentary h2,
.p-docs__commentary h3 { font-size: var(--text-lg); }
.p-docs__commentary > * + h2,
.p-docs__commentary > * + h3 { margin-top: var(--space-lg); }
.p-docs__commentary ul,
.p-docs__commentary ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-inline-start: var(--space-lg);
  list-style-position: outside;
}
.p-docs__commentary ul { list-style-type: disc; }
.p-docs__commentary ol { list-style-type: decimal; }

/* A published pattern document is a markdown file rendered through the post renderer, so it
   arrives as a post's markup with none of the rhythm a post's template supplies. These rules are
   that rhythm and the lists markdown emits as bare ul/ol; the prose is bounded by c-prose's own
   measure, while a table or a TOML block takes the column's full width, which is what a document
   read beside its tables needs. */
.p-docs__document > * + * { margin-top: var(--space-md); }
.p-docs__document > * + .p-article__heading { margin-top: var(--space-2xl); }
.p-docs__document ul,
.p-docs__document ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  max-width: var(--measure);
  padding-inline-start: var(--space-lg);
  list-style-position: outside;
}
.p-docs__document ul { list-style-type: disc; }
.p-docs__document ol { list-style-type: decimal; }

/* A prompt is printed verbatim and wraps instead of scrolling sideways: the prompts are
   hard-wrapped near 100 columns, so on a narrow screen a reader meets a long line rather than
   losing its end off the edge of the page. */
.p-docs__prompt { white-space: pre-wrap; }

/* The patterns index is the section's one list a reader reads rather than consults, so an entry is
   set as running typography — title, lede, parameter table — with space doing the separating the
   titled panels do elsewhere in the section. */
.p-docs__patterns { display: flex; flex-direction: column; gap: var(--space-2xl); }
/* The bound goes on the entry rather than the table, so the table ends where the lede's own lines
   end: --measure is in ch, read against the element's own font size, and an entry sized at the
   lede's reading size hands the table a column the lede's width rather than the narrower one the
   table's smaller type would compute. Left unbounded the table would run wider than the paragraph
   above it and read as a separate page element. */
.p-docs__pattern {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: var(--measure);
  font-size: var(--text-lg);
  overflow-x: auto;
}
.p-docs__patterntitle {
  color: var(--text-bright);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
/* The title links the pattern's own page and reads as the title rather than as a link until it is
   pointed at. */
.p-docs__patterntitle a { color: inherit; text-decoration: none; }
.p-docs__patterntitle a:hover,
.p-docs__patterntitle a:focus-visible { color: var(--accent); text-decoration: underline; }
/* The entry pattern is shown beside the registry name only where the two differ. */
.p-docs__patterntitle .u-dim { font-size: var(--text-sm); font-weight: var(--fw-regular); }
.p-docs__patternlede {
  color: var(--text-muted);
  font-size: var(--text-lg);
  line-height: var(--lh-cell);
}

/* The patterns an operator does not choose between — one-line variants of another, and the design
   experiments — are folded away at the foot of the index, set exactly as the patterns above once
   opened. The fold is a native <details> rather than c-disclosure, which draws a bordered FAQ row
   where this is one of the page's own sections that happens to open, so the summary is styled as
   the section heading and carries the triangle that says it opens. */
.p-docs__extras > summary {
  display: flex;
  gap: 1ch;
  cursor: pointer;
  list-style: none;
  color: var(--text-bright);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.p-docs__extras > summary::-webkit-details-marker { display: none; }
.p-docs__extras > summary::before { content: "▸"; color: var(--accent); }
.p-docs__extras[open] > summary::before { content: "▾"; }
.p-docs__extrasbody {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  margin-block-start: var(--space-lg);
}

/* The menus page holds more sections than the section's navigation bar carries for the whole site,
   so it lists its own above the first of them — c-toc laid out as a flat run of links wrapping
   across the content column rather than as the dozen-row rail that component draws. */
.p-docs__contents { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-lg); }
.p-docs__contents .c-toc__link { padding-block: 0; }