/* Praigen Docs - Runware-style layout */
.docs-page { display: flex; min-height: 100vh; flex-direction: column; }
.docs-body {
  display: flex;
  flex: 1;
  width: min(var(--max-width), calc(100vw - 2 * var(--content-gutter)));
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
  box-sizing: border-box;
}
.docs-sidebar {
    width: 260px;
    flex-shrink: 0;
    padding: 1.5rem 0;
    border-right: 1px solid var(--color-border, #d1d9e6);
    background: var(--color-surface, #fff);
}
.docs-sidebar-inner { position: sticky; top: 1rem; }
.docs-sidebar h3 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted, #5a6c7d);
    padding: 0 1.25rem;
    margin-bottom: 0.5rem;
}
.docs-sidebar ul { list-style: none; }
.docs-sidebar a {
    display: block;
    padding: 0.4rem 1.25rem;
    color: var(--color-text, #1a202c);
    text-decoration: none;
    font-size: 0.9375rem;
    border-left: 3px solid transparent;
}
.docs-sidebar a:hover { background: var(--color-bg, #f5f7fa); color: var(--color-accent, #2563eb); }
.docs-sidebar a.active { font-weight: 600; color: var(--color-accent); border-left-color: var(--color-accent); background: rgba(37, 99, 235, 0.06); }
.docs-main { flex: 1; padding: 2rem 2.5rem 3rem; max-width: 820px; }
.docs-content h1 { font-size: 2rem; margin-bottom: 0.5rem; color: var(--color-text-strong, #000); }
.docs-content .lead { font-size: 1.125rem; color: var(--color-muted); margin-bottom: 2rem; line-height: 1.6; }
.docs-content h2 { font-size: 1.375rem; margin: 2rem 0 0.75rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--color-border); }
.docs-content h3 { font-size: 1.125rem; margin: 1.5rem 0 0.5rem; }
.docs-content p { margin-bottom: 1rem; }
.docs-content ul, .docs-content ol { margin: 0 0 1rem 1.25rem; }
.docs-content li { margin-bottom: 0.35rem; }
.docs-content pre, .docs-content code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.875rem; }
.docs-content code { padding: 0.15em 0.4em; background: var(--color-bg); border-radius: 4px; }
.docs-content pre { background: #1a202c; color: #e2e8f0; padding: 1rem 1.25rem; border-radius: 8px; overflow-x: auto; margin: 1rem 0; }
.docs-content pre code { padding: 0; background: none; color: inherit; }
.docs-content .note { padding: 1rem 1.25rem; background: rgba(37, 99, 235, 0.08); border-left: 4px solid var(--color-accent); border-radius: 0 8px 8px 0; margin: 1rem 0; }
.docs-content a { color: var(--color-accent); text-decoration: none; }
.docs-content a:hover { text-decoration: underline; }
@media (max-width: 768px) {
    .docs-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--color-border); padding: 1rem 0; }
    .docs-sidebar-inner { position: static; }
    .docs-body { flex-direction: column; }
    .docs-main { padding: 1.5rem 1.25rem; }
}
