/*
 * The docs pages (/docs/:slug) and other prose pages (.doc). Linked with
 * application.css by stylesheet_link_tag :app and built on its tokens.
 */

/* Docs: the list of pages beside the page. */
.docs { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 0 2.5rem; align-items: start; }
.docs-nav ul { flex-direction: column; }
.docs-nav a[aria-current="page"] { font-weight: 600; }

@media (max-width: 48rem) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs-nav { margin: 0 0 1rem; border-bottom: 1px solid var(--rule); }
  .docs-nav ul { flex-direction: row; }
}

/* Rendered markdown. */
.doc ul, .doc ol { max-width: 72ch; margin: 0 0 0.75rem; padding-left: 1.25rem; }
.doc li { margin: 0 0 0.25rem; }
.doc li > p { margin: 0; }
/* Docs::Page wraps each table in .scroll: the wrapper scrolls, the table stays a table. */
.doc .scroll { max-width: 100%; overflow-x: auto; margin: 0 0 0.75rem; }
.doc table { border-collapse: collapse; font-size: 0.9rem; }
.doc th, .doc td { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.doc th:first-child, .doc td:first-child { padding-left: 0; }
.doc thead th { border-bottom-color: var(--fg); font-weight: 600; white-space: nowrap; }
/* Header names break at their hyphens, not inside a word; the table scrolls if it must. */
.doc td code { overflow-wrap: normal; }

/* Heading anchors from the markdown renderer: a "#" shown on hover or focus. */
.doc .anchor { margin-left: 0.35em; color: var(--muted); text-decoration: none; }
.doc .anchor::before { content: "#"; }
.doc :is(h2, h3):not(:hover) > .anchor:not(:focus-visible) { opacity: 0; }