/* docs.css
   ==========================================================================
   Docs-only chrome layered on top of the shared site/styles.css: a fixed left
   navigation sidebar, a prev/next pager, and a mobile nav select. The reading
   column, minimap, and all Markdown styling are inherited from styles.css, so
   the docs look identical to the root README reader.

   Shared verbatim across sites (leaftext, emptyguru, …) alongside docs.js — see
   that file's header. Nothing here is site-specific.

   Deep nesting: the sidebar supports groups inside groups. Each depth level
   gets progressively smaller, lighter group titles. Leaf-page links use an
   inline padding-left set by docs.js (8px + depth × 14px), so no fixed CSS
   hierarchy is needed for indentation. (A shallow tree simply never uses the
   deeper tiers.)
   ========================================================================== */

:root {
  --docs-sidebar-width: 264px;
}

@media (min-width: 901px) {
  body {
    padding-left: var(--docs-sidebar-width);
  }
}

/* ---- Sidebar ------------------------------------------------------------- */

.docs-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--docs-sidebar-width);
  overflow-y: auto;
  padding: 28px 18px 40px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  z-index: 6;
}

.docs-sidebar-brand {
  display: block;
  font-family: var(--font-heading);
  font-weight: 850;
  font-size: 1.25rem;
  color: var(--text);
  text-decoration: none;
}
.docs-sidebar-brand:hover {
  color: var(--link);
}
.docs-sidebar-sub {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 2px 0 24px;
}

/* Top-level group headers. */
.docs-nav-group {
  margin-bottom: 20px;
}
.docs-nav-group-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  margin: 0 0 8px;
}

/* Nested group headers shrink and lose emphasis with each depth level. */
.docs-nav-group[data-depth="1"] > .docs-nav-group-title {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin-bottom: 4px;
}
.docs-nav-group[data-depth="2"] > .docs-nav-group-title {
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.7;
  margin-bottom: 4px;
  text-transform: none;
}
.docs-nav-group[data-depth="3"] > .docs-nav-group-title,
.docs-nav-group[data-depth="4"] > .docs-nav-group-title,
.docs-nav-group[data-depth="5"] > .docs-nav-group-title {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.6;
  margin-bottom: 2px;
  text-transform: none;
}

/* A folder heading that links to its README: same look as a plain heading, but
   clickable (block target, hover feedback, active state when it is the page). */
.docs-nav-group-link {
  display: block;
  text-decoration: none;
  border-radius: var(--radius);
  padding-top: 4px;
  padding-bottom: 4px;
  padding-right: 8px;
  cursor: pointer;
}
.docs-nav-group-link:hover {
  color: var(--text);
  background: var(--bg-elevated);
  text-decoration: none;
  opacity: 1;
}
.docs-nav-group-link.active {
  color: var(--link);
  background: var(--bg-elevated);
  opacity: 1;
}

/* Nested groups reduce bottom margin so deep trees stay compact. */
.docs-nav-group[data-depth="1"],
.docs-nav-group[data-depth="2"],
.docs-nav-group[data-depth="3"],
.docs-nav-group[data-depth="4"],
.docs-nav-group[data-depth="5"] {
  margin-bottom: 8px;
}

.docs-nav-link {
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 8px;
  /* padding-left is set inline by docs.js based on depth */
  border-radius: var(--radius);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.4;
}
.docs-nav-link:hover {
  color: var(--text);
  background: var(--bg-elevated);
  text-decoration: none;
}
.docs-nav-link.active {
  color: var(--link);
  background: var(--bg-elevated);
  font-weight: 600;
}

.docs-sidebar-footer {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.docs-sidebar-footer a {
  display: block;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.82rem;
  padding: 3px 8px;
}
.docs-sidebar-footer a:hover {
  color: var(--link);
}

/* ---- Mobile navigation --------------------------------------------------- */

.docs-mobile-nav {
  display: none;
}

/* ---- Prev / next pager ---------------------------------------------------- */

.docs-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.docs-pager a {
  flex: 1 1 0;
  min-width: 0;
  text-decoration: none;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.docs-pager a:hover {
  border-color: var(--link);
  color: var(--link);
  text-decoration: none;
}
.docs-pager .docs-pager-next {
  text-align: right;
}
.docs-pager-label {
  display: block;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* ---- Narrow screens ------------------------------------------------------ */

@media (max-width: 900px) {
  .docs-sidebar {
    display: none;
  }
  .docs-mobile-nav {
    display: block;
    width: 100%;
    margin-bottom: 28px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
  }
  .docs-pager {
    flex-direction: column;
  }
  .docs-pager .docs-pager-next {
    text-align: left;
  }
}