/*
 * Copyright © 2025–2026 Dankest, LLC
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * docs.xchain.io layout — sidebar + prose. The white nav/footer come from
 * xchain.io/styles.css; this file only adds the docs shell, content typography,
 * and code-block highlighting. Kept self-contained so docs render even offline.
 */
:root {
  --doc-accent: #1e90c7;
  --doc-accent2: #7b2c8f;
  --doc-ink: #0f1722;
  --doc-body: #3b4654;
  --doc-muted: #6b7280;
  --doc-border: #e6e9ef;
  --doc-bg-soft: #f6f8fb;
  --doc-sidebar-w: 270px;
}

/* ── shell ─────────────────────────────────────────────────────────────── */
.docs-shell {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--doc-sidebar-w) minmax(0, 1fr);
  gap: 2.5rem;
  padding: 1.5rem 24px 4rem;
  align-items: start;
}

/* ── sidebar ───────────────────────────────────────────────────────────── */
.docs-sidebar {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding-right: .5rem;
  font-size: .9rem;
}
.docs-search { margin-bottom: 1.25rem; }
.docs-nav__section {
  margin: 1.4rem 0 .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--doc-muted);
}
.docs-nav__section a { color: inherit; text-decoration: none; }
.docs-nav__section a:hover { color: var(--doc-accent); }
.docs-nav__list { list-style: none; margin: 0 0 .25rem; padding: 0; }
.docs-nav__top { margin-bottom: .5rem; }
.docs-nav__list a {
  display: block;
  padding: .26em .6em;
  margin: 1px 0;
  border-radius: 6px;
  color: var(--doc-body);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.docs-nav__list a:hover { background: var(--doc-bg-soft); color: var(--doc-ink); }
.docs-nav__list a.is-active {
  color: var(--doc-accent);
  background: rgba(30, 144, 199, 0.08);
  border-left-color: var(--doc-accent);
  font-weight: 600;
}
.docs-nav__group { margin: .15rem 0; }
.docs-nav__grouphead {
  display: block;
  padding: .26em .6em;
  font-weight: 600;
  color: var(--doc-ink);
  font-size: .86rem;
}
.docs-nav__grouphead a { display: inline; padding: 0; border: 0; color: inherit; }
.docs-nav__group .docs-nav__list { padding-left: .7rem; border-left: 1px solid var(--doc-border); margin-left: .3rem; }
.docs-sidebar__toggle { display: none; }

/* ── content / prose ───────────────────────────────────────────────────── */
.docs-main { min-width: 0; }
.docs-prose { color: var(--doc-body); line-height: 1.7; font-size: 1rem; max-width: 56rem; }
.docs-prose > :first-child { margin-top: 0; }
.docs-prose h1 { font-size: 2.1rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--doc-ink); margin: 0 0 1rem; }
.docs-prose h2 { font-size: 1.5rem; color: var(--doc-ink); margin: 2.2rem 0 .8rem; padding-bottom: .3rem; border-bottom: 1px solid var(--doc-border); }
.docs-prose h3 { font-size: 1.2rem; color: var(--doc-ink); margin: 1.8rem 0 .6rem; }
.docs-prose h4 { font-size: 1.02rem; color: var(--doc-ink); margin: 1.4rem 0 .5rem; }
.docs-prose p, .docs-prose li { color: var(--doc-body); }
.docs-prose a { color: var(--doc-accent); text-decoration: none; }
.docs-prose a:hover { text-decoration: underline; }
.docs-prose ul, .docs-prose ol { padding-left: 1.4rem; }
.docs-prose li { margin: .3em 0; }
.docs-prose img { max-width: 100%; height: auto; }
.docs-prose hr { border: 0; border-top: 1px solid var(--doc-border); margin: 2rem 0; }
.docs-prose blockquote {
  margin: 1.2rem 0; padding: .6rem 1.1rem;
  border-left: 3px solid var(--doc-accent);
  background: var(--doc-bg-soft); color: var(--doc-muted); border-radius: 0 6px 6px 0;
}
.docs-prose blockquote p { margin: .3rem 0; }
/* inline code */
.docs-prose :not(pre) > code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: .87em;
  background: var(--doc-bg-soft);
  border: 1px solid var(--doc-border);
  padding: .1em .4em;
  border-radius: 4px;
  color: #b5295a;
}
/* code blocks */
.docs-prose pre {
  background: #0d1117; color: #e6edf3;
  border-radius: 10px; padding: 1rem 1.1rem;
  overflow-x: auto; margin: 1.2rem 0;
  font-size: .87rem; line-height: 1.55;
}
.docs-prose pre code { font-family: 'SF Mono', Menlo, Consolas, monospace; }
/* tables */
.docs-prose table { border-collapse: collapse; width: 100%; margin: 1.2rem 0; font-size: .92rem; display: block; overflow-x: auto; }
.docs-prose th, .docs-prose td { border: 1px solid var(--doc-border); padding: .5rem .7rem; text-align: left; }
.docs-prose th { background: var(--doc-bg-soft); font-weight: 600; color: var(--doc-ink); }
/* heading anchor ids: offset so in-page jumps clear any sticky nav */
.docs-prose :target { scroll-margin-top: 90px; }
.docs-edit { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--doc-border); font-size: .9rem; }
.docs-edit a { color: var(--doc-muted); text-decoration: none; }
.docs-edit a:hover { color: var(--doc-accent); }

/* ── pagefind search tint ──────────────────────────────────────────────── */
.docs-search { --pagefind-ui-primary: var(--doc-accent); --pagefind-ui-font: inherit; --pagefind-ui-border-radius: 8px; }

/* ── highlight.js (github-ish light-on-dark subset) ────────────────────── */
.hljs-comment, .hljs-quote { color: #8b949e; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag { color: #ff7b72; }
.hljs-string, .hljs-attr, .hljs-template-tag, .hljs-addition { color: #a5d6ff; }
.hljs-number, .hljs-literal, .hljs-variable, .hljs-bullet { color: #79c0ff; }
.hljs-title, .hljs-section, .hljs-function .hljs-title, .hljs-class .hljs-title { color: #d2a8ff; }
.hljs-type, .hljs-meta { color: #ffa657; }
.hljs-symbol, .hljs-regexp, .hljs-link { color: #7ee787; }
.hljs-deletion { color: #ffa198; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .docs-shell { grid-template-columns: 1fr; gap: 1rem; }
  .docs-sidebar__toggle {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--doc-bg-soft); border: 1px solid var(--doc-border);
    border-radius: 8px; padding: .5rem .9rem; font: inherit; font-weight: 600;
    color: var(--doc-ink); cursor: pointer;
  }
  .docs-sidebar {
    position: static; max-height: none; overflow: visible;
    display: none; margin-top: .75rem;
    border: 1px solid var(--doc-border); border-radius: 10px; padding: 1rem;
  }
  .docs-sidebar.is-open { display: block; }
}