/* Documentation pages: the docs.html portal and every Markdown page Jekyll
   renders through _layouts/doc.html. Built on the tokens in site.css. */

/* Sidebar */
.nav-item {
  display: block;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  border-left: 3px solid transparent;
  color: var(--text-muted);
  font-size: 0.875rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.nav-item.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--text);
}
.nav-group-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 1.25rem 0 0.4rem;
}
#sidebar { transition: transform 0.25s ease; background: var(--bg-elev); }
#sidebar::-webkit-scrollbar { width: 8px; }
#sidebar::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }
#sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; }
#sidebar-overlay { transition: opacity 0.25s ease; }

/* Rendered Markdown */
.markdown-content { color: var(--text-muted); line-height: 1.7; overflow-wrap: anywhere; }
.markdown-content h1, .markdown-content h2, .markdown-content h3,
.markdown-content h4, .markdown-content h5, .markdown-content h6 {
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.markdown-content h1 { font-size: 2rem; margin-top: 0; }
.markdown-content h2 { font-size: 1.5rem; }
.markdown-content h3 { font-size: 1.25rem; }
.markdown-content h4 { font-size: 1.05rem; }
.markdown-content p { margin: 0.75rem 0; }
.markdown-content strong { color: var(--text); }
.markdown-content code {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: #93c5fd;
  padding: 0.1rem 0.35rem;
  border-radius: 5px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 0.875em;
}
.markdown-content pre {
  background: #0d0f12;
  color: #e5e7eb;
  padding: 1.1rem 1.25rem;
  border-radius: 10px;
  overflow-x: auto;
  margin: 1.25rem 0;
  border: 1px solid var(--border);
  line-height: 1.55;
}
.markdown-content pre code { background: none; border: none; color: inherit; padding: 0; font-size: 0.85rem; }
.markdown-content .code-wrap { position: relative; }
.markdown-content ul, .markdown-content ol { margin: 0.5rem 0 1rem; padding-left: 1.5rem; }
.markdown-content ul { list-style: disc; }
.markdown-content ol { list-style: decimal; }
.markdown-content li { margin: 0.3rem 0; }
.markdown-content li > ul, .markdown-content li > ol { margin: 0.2rem 0; }
.markdown-content ul.task-list { list-style: none; padding-left: 0.25rem; }
.markdown-content input[type="checkbox"] { margin-right: 0.5rem; accent-color: var(--accent); }
.markdown-content a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-border);
  transition: border-color 0.15s ease;
}
.markdown-content a:hover { border-bottom-color: var(--accent); }
.markdown-content blockquote {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 0.5rem 1rem;
  margin: 1rem 0;
  border-radius: 0 8px 8px 0;
}
.markdown-content hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.markdown-content table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.markdown-content th {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
  padding: 0.6rem 0.75rem;
  text-align: left;
  border: 1px solid var(--border);
}
.markdown-content th, .markdown-content td { overflow-wrap: normal; }
.markdown-content td { padding: 0.6rem 0.75rem; border: 1px solid var(--border); vertical-align: top; }

/* "On this page" list that assets/docs.js adds to long pages */
.page-toc {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin: 1rem 0 2rem;
  background: var(--surface);
}
.page-toc-title { margin: 0 0 0.35rem; font-weight: 600; color: var(--text); font-size: 0.9rem; }
.markdown-content .page-toc ul { list-style: none; padding-left: 0; margin: 0; columns: 2 16rem; }
.markdown-content .page-toc li { margin: 0.15rem 0; font-size: 0.9rem; }

/* Copy button that assets/docs.js adds to each code block */
.copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--surface-hover);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
}
.copy-button:hover { color: var(--text); }

/* API cards on docs.html */
.api-endpoint {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 1.25rem;
  margin: 1.5rem 0;
  border-radius: 10px;
}
.btn-link {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  text-decoration: none;
}
.markdown-content a.btn-link { color: #fff; border-bottom: none; }
.markdown-content a.btn-link.secondary { color: var(--text); border: 1px solid var(--border-strong); }
.btn-link:hover { background: var(--accent-hover); }
.markdown-content .api-endpoint h3 { margin-top: 0; }
.btn-link.secondary { background: var(--surface-hover); color: var(--text); border: 1px solid var(--border-strong); }

.page-meta { border-top: 1px solid var(--border); margin-top: 3rem; padding-top: 1rem; font-size: 0.85rem; color: var(--text-faint); }
.page-meta a { color: var(--accent); }

/* Syntax highlighting for Rouge output, from `rougify style monokai.sublime`
   with backgrounds removed so blocks use the pre background above. */
.highlight .gh { color: #999999; }
.highlight .sr { color: #f6aa11; }
.highlight .go { color: #888888; }
.highlight .gp { color: #555555; }
.highlight .gs {  }
.highlight .gu { color: #aaaaaa; }
.highlight .nb { color: #f6aa11; }
.highlight .cm { color: #75715e; }
.highlight .cp { color: #75715e; }
.highlight .c1 { color: #75715e; }
.highlight .cs { color: #75715e; }
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf { color: #75715e; }
.highlight .err { color: #960050; }
.highlight .gr { color: #960050; }
.highlight .gt { color: #960050; }
.highlight .gd { color: #49483e; }
.highlight .gi { color: #49483e; }
.highlight .ge { color: #49483e; }
.highlight .kc { color: #66d9ef; }
.highlight .kd { color: #66d9ef; }
.highlight .kr { color: #66d9ef; }
.highlight .no { color: #66d9ef; }
.highlight .kt { color: #66d9ef; }
.highlight .mf { color: #ae81ff; }
.highlight .mh { color: #ae81ff; }
.highlight .il { color: #ae81ff; }
.highlight .mi { color: #ae81ff; }
.highlight .mo { color: #ae81ff; }
.highlight .m, .highlight .mb, .highlight .mx { color: #ae81ff; }
.highlight .sc { color: #ae81ff; }
.highlight .se { color: #ae81ff; }
.highlight .ss { color: #ae81ff; }
.highlight .sd { color: #e6db74; }
.highlight .s2 { color: #e6db74; }
.highlight .sb { color: #e6db74; }
.highlight .sh { color: #e6db74; }
.highlight .si { color: #e6db74; }
.highlight .sx { color: #e6db74; }
.highlight .s1 { color: #e6db74; }
.highlight .s, .highlight .sa, .highlight .dl { color: #e6db74; }
.highlight .na { color: #a6e22e; }
.highlight .nc { color: #a6e22e; }
.highlight .nd { color: #a6e22e; }
.highlight .ne { color: #a6e22e; }
.highlight .nf, .highlight .fm { color: #a6e22e; }
.highlight .vc { color: #e5e7eb; }
.highlight .nn { color: #e5e7eb; }
.highlight .nl { color: #e5e7eb; }
.highlight .ni { color: #e5e7eb; }
.highlight .bp { color: #e5e7eb; }
.highlight .vg { color: #e5e7eb; }
.highlight .vi { color: #e5e7eb; }
.highlight .nv, .highlight .vm { color: #e5e7eb; }
.highlight .w { color: #e5e7eb; }
.highlight { color: #e5e7eb; }
.highlight .n, .highlight .py, .highlight .nx { color: #e5e7eb; }
.highlight .ow { color: #f92672; }
.highlight .nt { color: #f92672; }
.highlight .k, .highlight .kv { color: #f92672; }
.highlight .kn { color: #f92672; }
.highlight .kp { color: #f92672; }
.highlight .o { color: #f92672; }