/* forest.ws content-page additions (pages.css)
   Loaded after /assets/forest.css on content pages only. Owned by the pages build, not the design system.
   Only uses forest.css tokens; adds no colours of its own. See PAGES-NOTES.md. */

/* vertical rhythm between stacked blocks inside one section */
.stack { display: grid; gap: clamp(40px, 6vw, 72px); }
/* a section that follows another section without doubling the gap */
.section-flush-top { padding-top: 0; }
/* lists used as layout (rows, changelog) */
.plain-list { list-style: none; padding: 0; margin: 0; }
.side .card a { font-size: var(--t-sm); font-weight: 600; }
/* changelog entries */
.entry { display: grid; gap: var(--s-3); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.entry h2 { font-size: var(--t-2xl); }
.entry p { color: var(--muted); max-width: 60ch; }
.entry .chip + .chip { margin-left: var(--s-2); }
/* header at the narrowest phones: brand + CTA must fit in 320px without clipping */
@media (max-width: 400px) {
  .site-header .wrap { gap: var(--s-3); }
  .brand { font-size: 1.25rem; }
}
/* fix: `.on-forest a` (0,1,1) outranks `.btn-light` (0,1,0), leaving white text on the white button */
.on-forest .btn-light { color: var(--forest-900); }
/* fix: `.coming-soon` is a grid, so its chip stretched to full width */
.coming-soon .chip { justify-self: start; }

/* Docs navigation precedes the article on phones. */
.docs-layout { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--s-12); align-items: start; }
.docs-sidebar { display: grid; gap: var(--s-4); border-right: 1px solid var(--line); padding-right: var(--s-6); }
.docs-sidebar ul { display: grid; gap: var(--s-1); }
.docs-sidebar a { display: block; padding-block: var(--s-2); font-size: var(--t-sm); overflow-wrap: anywhere; }
.docs-sidebar a[aria-current="page"] { font-weight: 650; text-decoration-thickness: 2px; }
.docs-content { min-width: 0; display: grid; gap: var(--s-8); }
/* Together with html's 24px scroll padding, hashes land at the reading line. */
.docs-content h2[id] { scroll-margin-top: calc(30vh - 24px); }
.docs-layout-toc { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) minmax(0, 12rem); gap: var(--s-8); }
.docs-toc { position: sticky; top: var(--s-6); max-height: calc(100dvh - var(--s-12)); overflow-y: auto; overscroll-behavior: contain; border-left: 1px solid var(--line); padding-left: var(--s-4); }
.docs-toc ul { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.docs-toc a { display: block; border-left: 3px solid transparent; padding: var(--s-2) var(--s-3); font-size: var(--t-sm); overflow-wrap: anywhere; }
[data-toc] a[aria-current="true"] { border-left: 3px solid currentColor; font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; background: var(--surface-2); }
.docs-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.docs-pagination a { display: grid; gap: var(--s-2); max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 880px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .docs-sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 var(--s-6); }
  .docs-sidebar ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-4); }
  .docs-toc { display: none; }
}
@media (max-width: 480px) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .row .chip { justify-self: start; }
}