/* 08-pages/_reference.css — the reference section's page template
   (app/views/reference/show.html.erb): the section's sticky navigation, a document header, and a
   content column carrying rows read from the dataset. Every page in the section is drawn on this
   template; none is hand-built on it.

   The section composes existing components — c-sectionnav, c-panel, c-prose, the c-table family,
   c-codeblock — and this layer adds only the page-level layout none of them own: the header, the
   column rhythm, and one behaviour the section needs that the article template does not. */

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

/* ── Frontmatter — the document header, fenced by rules, as the article template heads a post */
.p-reference__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-reference__title {
  color: var(--text-bright);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: 0;
}
/* the page's catalog summary, under its title — the same line the hub's contents list and the
   page's meta description carry, so a page states its own subject wherever it is met */
.p-reference__summary {
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: var(--text-lg);
  line-height: var(--lh-cell);
}

/* ── The content column — the generated sections ──────────────────────────────────────────── */
.p-reference__generated {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  min-width: 0;
}
.p-reference__section { display: flex; flex-direction: column; gap: var(--space-lg); }
/* A section's own subsections — one menu, one group of keys, one closed set of values. They sit
   closer together than the sections do, so a page made of a dozen small tables still reads as the
   three or four sections it is. */
.p-reference__group { display: flex; flex-direction: column; gap: var(--space-md); }
.p-reference__heading {
  color: var(--text-bright);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
/* ── The inventory tables ──────────────────────────────────────────────────────────────────
   The section's tables are the c-fieldtable and c-cmdtable rows the design system already has,
   carrying what the dataset actually holds. Three things follow from that and belong here
   rather than in either component, because they are true of these pages and not of the pages
   those components were drawn for. */

/* The value column holds one short value on those pages — `auto`, `1800`. Here it can hold a
   whole binding: the settings an environment variable feeds, the invocations a flag applies to.
   So it wraps. The identifier columns keep their single line, and c-panel--flush scrolls them
   sideways within the panel on a narrow screen rather than widening the page. */
.p-reference .c-fieldtable td:nth-child(2),
.p-reference .c-cmdtable td:nth-child(2) { white-space: normal; }

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

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

/* ── One entry given a panel of its own — a harness, an MCP tool ───────────────────────────
   Some inventories carry a row too tall for a table row: a harness has four configuration
   fields, a tool has its arguments. Those rows get a titled panel each, with the row's own
   identifier notched into the top rule, and the panel holds the small table of its parts. The
   panel keeps its padding (its title is notched into the rule and c-panel--flush would drop
   it), so it scrolls its own content sideways where a long environment key will not fit. */
.p-reference__entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow-x: auto;
}
.p-reference__subheading {
  color: var(--text-bright);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
/* a qualifier beside an entry's name — the key that picks a harness — reads at the body size
   rather than at the heading's, so the name stays the thing the eye lands on */
.p-reference__subheading .u-dim { font-size: var(--text-sm); font-weight: var(--fw-regular); }

/* the one line the dataset carries about an entry, under its name and above its parts */
.p-reference__description { color: var(--text-muted); font-size: var(--text-sm); }

/* Where a section's rows came from, under its heading — the title and the repository-relative
   source the dataset states for the inventory, so each table says what generated it. */
.p-reference__source { color: var(--text-dim); font-size: var(--text-xs); }

/* A closed set's own explanatory note, above the table of its values. It is generated content
   like the rows under it, but it is a paragraph rather than a cell, so it reads at the prose
   measure instead of stretching across the table's width. */
.p-reference__note {
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-cell);
}

/* ── The literate pattern pages ─────────────────────────────────────────────────────────────
   A pattern page is the file itself: comment segments and code segments in the file's own
   order. Prose set as prose and TOML in c-codeblock is what marks code as code; the TOML also
   carries the syntax tones that component defines (TomlSyntax marks up the spans).

   Wide enough for it, the two kinds are set side by side: comments in the left column, the TOML
   they annotate in the right. Each comment segment is placed in column 1 and each code segment
   in column 2, and auto-placement then puts a comment and the code segment after it on the same
   grid row — so a comment starts at the same height as the declaration it is about, and the row
   is as tall as whichever of the two is taller. That is the whole alignment rule; it needs no
   wrapper element per pair, so the markup stays one flat run of segments in the file's order.

   Below the site's two-column breakpoint the columns collapse into that same run, comment above
   code, which is the order the file is written in. The segments sit closer together than the
   page's sections do, because a comment block and the declaration under it are one thought.

   The pattern pages are read rather than consulted, so both columns are set at reading sizes
   rather than at the section's table sizes: the prose takes the size and tone a post's body
   takes, and the TOML the same size beside it, so the two columns read as one document. */
.p-reference__literate { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.p-reference__segment { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
@media (min-width: 56rem) {
  .p-reference__literate {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-xl);
    row-gap: var(--space-lg);
  }
  .p-reference__segment--comment { grid-column: 1; }
  .p-reference__segment--code { grid-column: 2; }
}
/* the TOML, at the size and weight of the prose beside it — the two columns are one document */
.p-reference__literate .c-codeblock { font-size: var(--text-lg); }
/* One comment segment, rendered from its markdown by Reference::PatternCommentary through the
   post renderer — so it arrives as the markup a post's body is made of, c-prose paragraphs and
   the article's own headings, and reads at the size a post's body reads at. What this adds is
   the rhythm between those blocks and the lists markdown makes of the authors' numbered steps,
   neither of which a post needs (a post's blocks are spaced by the section they sit in). */
.p-reference__commentary {
  max-width: var(--measure);
  font-size: var(--text-lg);
  line-height: var(--lh-cell);
}
.p-reference__commentary > * + * { margin-top: var(--space-md); }
/* a heading the comment writes for itself reads at the body size — a comment segment is a
   passage, not a page — and takes twice the space above it that it has below, so it reads as
   starting a passage rather than as another line of the one before */
.p-reference__commentary h2,
.p-reference__commentary h3 { font-size: var(--text-lg); }
.p-reference__commentary > * + h2,
.p-reference__commentary > * + h3 { margin-top: var(--space-lg); }
.p-reference__commentary ul,
.p-reference__commentary ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-inline-start: var(--space-lg);
  list-style-position: outside;
}
.p-reference__commentary ul { list-style-type: disc; }
.p-reference__commentary ol { list-style-type: decimal; }

/* A prompt's whole text, verbatim in a code block. It wraps instead of scrolling sideways: the
   prompts are hard-wrapped near 100 columns and a reader on a narrow screen should meet a long
   line rather than lose its end off the edge of the page. */
.p-reference__prompt { white-space: pre-wrap; }

/* ── The patterns index ─────────────────────────────────────────────────────────────────────
   The patterns are the section's one list a reader reads rather than consults: half a dozen
   entries, each a name worth knowing and a sentence saying when to reach for it. So they are set
   as running typography rather than as the titled panels the harness and tool rows take — a
   title, a paragraph at the reading size a post's body takes, and the parameter table under it,
   with space doing the separating a box would otherwise do.

   The parameter table is bounded to the same reading column as the lede above it. The section's
   other tables are inventories to be scanned and take the content column's whole width; this one
   is part of an entry a reader is reading, and a table running wider than the paragraph it sits
   under reads as a different page element rather than as part of the same entry. */
.p-reference__patterns { display: flex; flex-direction: column; gap: var(--space-2xl); }
/* The whole entry is bounded to the reading column, so the table under the lede ends where the
   lede's own lines end. The measure is in `ch`, which is read against the element's own font
   size — so the entry is sized at the lede's reading size and the title and the table set their
   sizes under it, rather than the table computing a narrower column of its own from its smaller
   type. */
.p-reference__pattern {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: var(--measure);
  font-size: var(--text-lg);
  overflow-x: auto;
}
.p-reference__patterntitle {
  color: var(--text-bright);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
/* the title is a link to the pattern's own page, and reads as the title rather than as a link
   until it is pointed at */
.p-reference__patterntitle a { color: inherit; text-decoration: none; }
.p-reference__patterntitle a:hover,
.p-reference__patterntitle a:focus-visible { color: var(--accent); text-decoration: underline; }
/* the header name a pattern declares, where it differs from the name it registers under */
.p-reference__patterntitle .u-dim { font-size: var(--text-sm); font-weight: var(--fw-regular); }
/* the sentence the pattern's own header declares about itself, at the size a post's body reads */
.p-reference__patternlede {
  color: var(--text-muted);
  font-size: var(--text-lg);
  line-height: var(--lh-cell);
}

/* The patterns that are not among the ones an operator chooses between — one-line variants of
   another pattern, and the design experiments — are folded away at the foot of the page,
   together with the line-for-line comparison between the variants. They keep their pages and,
   once opened, they are set exactly as the patterns above them; the index just stops leading
   with them.

   The fold is a native <details>, but not the c-disclosure component: that draws a bordered
   FAQ row, and this is one of the page's own sections that happens to open. So the summary is
   the section heading, marked with the disclosure triangle that says it opens, and there is no
   box around either it or what it opens. */
.p-reference__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-reference__extras > summary::-webkit-details-marker { display: none; }
.p-reference__extras > summary::before { content: "▸"; color: var(--accent); }
.p-reference__extras[open] > summary::before { content: "▾"; }
.p-reference__extrasbody {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  margin-block-start: var(--space-lg);
}

/* ── A page's own contents list ─────────────────────────────────────────────────────────────
   The menus page is sectioned per menu and per group of keys, which is more sections than the
   section's navigation bar carries for the whole site. So that page lists its own, in a panel above the
   first of them: a flat run of in-page links that wraps across the content column rather than
   running a dozen rows down it. */
.p-reference__contents { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-lg); }
.p-reference__contents .c-toc__link { padding-block: 0; }