/* Docs section: thin header band, sidebar + 46rem prose. */
header.site.thin { padding-bottom: 1.6rem; }
header.site.thin h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }

.docs-layout {
  display: grid; grid-template-columns: 14rem 1fr; gap: 3rem;
  padding: 2.5rem 0 4rem; align-items: start;
}
@media (max-width: 900px) { .docs-layout { grid-template-columns: 1fr; gap: 1rem; } }

.docs-nav {
  position: sticky; top: 1.5rem;
  max-height: calc(100vh - 3rem); overflow-y: auto;
}
@media (max-width: 900px) {
  .docs-nav { position: static; display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem;
    border-bottom: 1px solid var(--line); padding-bottom: 0.8rem; }
}
.docs-nav a {
  display: block; padding: 0.45rem 0; font-weight: 700;
  color: var(--ink-soft); text-decoration: none;
}
.docs-nav a:hover { color: var(--accent); text-decoration: underline; }
.docs-nav a[aria-current="page"] { color: var(--accent); }

/* Sub-section links under the current page's entry */
.docs-nav .subnav {
  list-style: none; margin: 0 0 0.3rem; padding: 0 0 0 0.9rem;
  border-left: 2px solid var(--line);
}
.docs-nav .subnav a {
  display: flex; align-items: center; min-height: 44px;
  padding: 0.15rem 0; font-weight: 400; font-size: 0.88rem;
}
@media (max-width: 900px) {
  .docs-nav .subnav { display: none; }
}

/* On-page h2 anchors, nested under the current page's subnav entry */
.docs-nav .anchors {
  list-style: none; margin: 0 0 0.4rem; padding: 0 0 0 0.9rem;
  border-left: 1px solid var(--line);
}
.docs-nav .anchors a {
  display: flex; align-items: center; min-height: 36px;
  padding: 0.1rem 0; font-weight: 400; font-size: 0.8rem;
}
.docs-prose h2 { scroll-margin-top: 1.2rem; }

.docs-prose { max-width: 46rem; min-width: 0; }
.docs-prose h2 { margin-top: 2.2rem; }
.docs-prose h2:first-child { margin-top: 0; }
.docs-prose pre { font-size: 0.82rem; }

/* App-reference pages (generated, restyled at fetch): the page title lives
   in the prose, under the fixed "App reference" band heading. */
.docs-prose h1 { font-size: 1.7rem; margin-top: 0; scroll-margin-top: 1.2rem; }
.docs-prose h3 { scroll-margin-top: 1.2rem; }

/* The API reference's TOC, nested under its subnav entry (like the anchors
   lists): collapsible domain groups of anchor links. The artifact's
   scrollspy (docs-nav.js) follows the reading position — it opens the
   active group, folds the rest, and marks the active link
   aria-current="location". It hides with the subnav on mobile. */
.docs-nav .docs-toc { margin: 0.2rem 0 0.4rem; font-size: 0.8rem; }
.docs-nav .docs-toc-domain > summary {
  font-weight: 400; color: var(--ink-soft); padding: 0.2rem 0; cursor: pointer;
}
.docs-nav .docs-toc ul {
  list-style: none; margin: 0 0 0.4rem; padding: 0 0 0 0.9rem;
  border-left: 1px solid var(--line);
}
.docs-nav .docs-toc a {
  font-weight: 400; font-size: 0.78rem; min-height: 30px;
  display: flex; align-items: center; padding: 0.1rem 0;
  overflow-wrap: anywhere;
}
.docs-nav .docs-toc a[aria-current="location"] { color: var(--accent); }

.docs-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem; margin-top: 1.5rem;
}
.docs-cards a.card { display: block; text-decoration: none; color: var(--ink); }
.docs-cards a.card:hover { border-color: var(--accent); }
.docs-cards b { font-family: "Familjen Grotesk", sans-serif; font-weight: 600; display: block; margin-bottom: 0.3rem; }
.docs-cards span { color: var(--ink-soft); font-size: 0.92rem; }

.note {
  border: 1.5px solid var(--celebrate); border-radius: var(--radius);
  padding: 0.7rem 1rem; font-size: 0.92rem; margin: 1rem 0;
}