/* ==========================================================================
   docs.css — Documentation typography in the Swiss-Flow voice (v1, 2026-09-26)
   --------------------------------------------------------------------------
   Loaded by docs.html and the sixteen docs-*.html pages only, after
   styles.css and swiss.css (which supplies the self-hosted Plex faces).
   Typography only: the grid, the sidebar and its toggle, the contents rail,
   the colours and every behaviour stay exactly as styles.css draws them.
   Plex Sans replaces Inter and the Bricolage display face; Plex Mono
   replaces Roboto Mono on labels and code. Plex sets smaller than Inter at
   the same size, so reading text moves up one step (15 → 16px) and the few
   intervals that depend on it are adjusted to match.
   Everything is scoped to `.pf-docpage .pf-doc`; the shared header keeps
   its own face.
   Standard: references/swiss-flow-design/TYPOGRAPHY.md.
   ========================================================================== */

.pf-docpage .pf-doc {
  --doc-sans: "IBM Plex Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  --doc-mono: "IBM Plex Mono", "Roboto Mono", ui-monospace, monospace;
  font-family: var(--doc-sans);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

/* ---------- 1. Mono labels: one face, one tracking ------------------------ */
.pf-docpage :is(.pf-doc-crumbs, .pf-doc-navgroup, .pf-doc-navbtn, .pf-doc-search kbd, .pf-doc-example-label,
  .pf-doc-table th, .pf-doc-related-head, .pf-doc-pager-label, .pf-doc-toc-head) {
  font-family: var(--doc-mono);
  font-weight: 400;
  letter-spacing: 0.07em;
}
.pf-docpage .pf-doc-crumbs { font-size: 10.5px; margin-bottom: 1rem; }
.pf-docpage :is(.pf-doc-navgroup, .pf-doc-related-head, .pf-doc-toc-head, .pf-doc-example-label, .pf-doc-pager-label) { font-size: 10px; }
.pf-docpage .pf-doc-table th { font-size: 10px; }
.pf-docpage .pf-doc-navbtn { font-size: 10.5px; }
.pf-docpage .pf-doc-search kbd { font-size: 10.5px; letter-spacing: 0; }

/* ---------- 2. Title and lede -------------------------------------------- */
.pf-docpage .pf-doc-title {
  font-family: var(--doc-sans);
  font-optical-sizing: auto;
  font-size: clamp(38px, 3.7vw, 54px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.pf-docpage .pf-doc-lede { margin-top: 1.1rem; font-size: 18px; line-height: 1.6; text-wrap: pretty; }

/* ---------- 3. Reading column -------------------------------------------- */
.pf-docpage .pf-doc-body h2 {
  font-size: 25px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.pf-docpage .pf-doc-body h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
/* Reading text only: the labelled paragraphs in the column (example label,
   related heading, feedback line) keep the sizes styles.css meant for them;
   its generic `.pf-doc-body p` rule had been enlarging them to body size. */
.pf-docpage .pf-doc-body p:not([class]),
.pf-docpage .pf-doc-body li { font-size: 16px; line-height: 1.7; text-wrap: pretty; }
.pf-docpage .pf-doc-body .pf-doc-example-label { margin: 0; line-height: 1.5; }
.pf-docpage .pf-doc-body .pf-doc-related-head { margin: 0 0 1rem; line-height: 1.5; }
.pf-docpage .pf-doc-body .pf-doc-feedback { margin: 2rem 0 0; line-height: 1.6; }
.pf-docpage .pf-doc-body li::before { top: 0.85em; }
.pf-docpage .pf-doc-body strong { font-weight: 500; }
.pf-docpage .pf-doc-note p { font-size: 15px; line-height: 1.65; }
.pf-docpage .pf-doc-example pre { font-family: var(--doc-mono); font-size: 13px; line-height: 1.7; }
.pf-docpage .pf-doc-table table { font-size: 15px; }
.pf-docpage .pf-doc-table td { font-variant-numeric: tabular-nums; }

/* ---------- 4. Sidebar, search and contents ------------------------------ */
.pf-docpage .pf-doc-search input { font-family: var(--doc-sans); font-size: 14px; }
.pf-docpage .pf-doc-navlist a { font-size: 14px; line-height: 1.45; }
.pf-docpage .pf-doc-navlist a.is-current { font-weight: 500; }
.pf-docpage .pf-doc-toc a { font-size: 13px; }

/* ---------- 5. Related, pager, feedback ---------------------------------- */
/* Cards and pager links are whole-block links; the body's link underline
   belongs to inline links only. */
.pf-docpage .pf-doc-body :is(.pf-doc-card, .pf-doc-pager-next, .pf-doc-pager-prev) { text-decoration: none; }
.pf-docpage :is(.pf-doc-card-title, .pf-doc-pager-title) { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.pf-docpage .pf-doc-card-desc { font-size: 13.5px; }
.pf-docpage .pf-doc-feedback { font-size: 14px; }

/* ---------- 6. Legibility ------------------------------------------------ */
/* Secondary text takes the homepage's muted tone (--zinc-400, the .sw muted
   value): the lighter greys styles.css used here measured about 2.6 : 1 in
   light and 3.9 : 1 in dark on 10–14px text. Mono case and size, not a paler
   grey, keep the labels subordinate. */
.pf-docpage :is(.pf-doc-crumbs, .pf-doc-crumbs a, .pf-doc-navgroup, .pf-doc-search kbd, .pf-doc-example-label,
  .pf-doc-table th, .pf-doc-related-head, .pf-doc-pager-label, .pf-doc-toc-head, .pf-doc-toc a,
  .pf-doc-card-desc, .pf-doc-feedback, .pf-doc-feedback a, .pf-doc-navbtn) { color: var(--zinc-400); }
.pf-docpage :is(.pf-doc-crumbs a, .pf-doc-toc a, .pf-doc-feedback a):hover { color: var(--ink); }
/* The current page keeps its orange tint and reads in ink on it, the way the
   homepage sets ink on orange; orange type on the tint was about 2.8 : 1. */
.pf-docpage .pf-doc-navlist a.is-current { color: var(--ink); }