/* AuraTerm docs area (manual / scenarios / FAQ / changelog): sidebar,
   content column and the block styles render_blocks emits. Loaded only by
   auraterm_docs_base.html. */

.docs-page { display: flex; gap: 32px; align-items: flex-start; }
.docs-sidebar {
    position: sticky; top: 84px; flex: 0 0 250px; width: 250px;
    max-height: calc(100vh - 110px); overflow-y: auto;
    padding: 18px 16px; border: 1px solid rgba(127,127,127,0.18);
    border-radius: 12px; background: rgba(127,127,127,0.04);
}
.docs-sidebar-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .6; margin: 0 0 10px; }
.docs-nav { list-style: none; padding: 0; margin: 0 0 14px; }
.docs-nav > li { margin: 2px 0; }
.docs-nav > li > a {
    display: block; padding: 6px 10px; border-radius: 8px;
    font-size: 14px; line-height: 1.5;
}
.docs-nav > li > a:hover { background: rgba(127,127,127,0.10); text-decoration: none; }
.docs-nav > li.active > a { background: rgba(127,127,127,0.14); font-weight: 600; }
.docs-outline { list-style: none; padding: 2px 0 6px 22px; margin: 0; border-left: 2px solid rgba(127,127,127,0.18); margin-left: 12px; }
.docs-outline li { margin: 3px 0; font-size: 13px; line-height: 1.5; }
.docs-outline a { opacity: .85; }
.docs-body { flex: 1 1 auto; min-width: 0; max-width: 820px; }
.docs-header { margin-bottom: 28px; }
.docs-header .product-kicker {
    display: inline-block; padding: 0; border: 0; background: none;
    text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--primary-color);
}
.docs-header h1 { margin: 6px 0 12px; }
.docs-lead { font-size: 16px; line-height: 1.7; opacity: .85; }
.docs-section { padding: 22px 0; border-top: 1px solid rgba(127,127,127,0.16); scroll-margin-top: 80px; }
.docs-section h2 { margin: 0 0 14px; }
.docs-section h3 { margin: 22px 0 8px; font-size: 17px; }
.docs-section p { line-height: 1.8; margin: 10px 0; }
.docs-section ul { line-height: 1.8; padding-left: 22px; }
.docs-section li { margin: 4px 0; }
.docs-note {
    margin: 14px 0; padding: 12px 16px; border-radius: 10px;
    border-left: 3px solid #d0a24f; background: rgba(208,162,79,0.10); line-height: 1.7;
}
.docs-code {
    margin: 12px 0; padding: 12px 14px; border-radius: 8px; overflow-x: auto;
    background: rgba(127,127,127,0.12); border: 1px solid rgba(127,127,127,0.18);
    font-family: Consolas, "Courier New", monospace; font-size: 13.5px; white-space: pre;
}
.docs-body kbd {
    display: inline-block; padding: 1px 6px; border-radius: 5px; font-size: 12.5px; color: inherit;
    border: 1px solid rgba(127,127,127,0.4); border-bottom-width: 2px; background: rgba(127,127,127,0.10);
    font-family: Consolas, "Courier New", monospace;
}
/* Changelog */
.docs-release { padding: 22px 0; border-top: 1px solid rgba(127,127,127,0.16); scroll-margin-top: 80px; }
.docs-release-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; }
.docs-release-head h2 { margin: 0; }
.docs-release-badge {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: .02em;
    background: rgba(92,184,92,0.16); color: #3d8b3d; border: 1px solid rgba(92,184,92,0.35);
}
.docs-release-badge.upcoming { background: rgba(127,127,127,0.12); color: inherit; opacity: .75; border-color: rgba(127,127,127,0.3); }
.docs-release-body h3 { margin: 18px 0 8px; font-size: 16px; }
.docs-release-body p, .docs-release-body li { line-height: 1.8; }
.docs-release-body ul { padding-left: 22px; }
.docs-release-body li { margin: 4px 0; }
.docs-release-body code {
    padding: 1px 5px; border-radius: 4px; font-size: 13px;
    background: rgba(127,127,127,0.12); color: inherit;
}
@media (max-width: 860px) {
    .docs-page { flex-direction: column; }
    .docs-sidebar { position: static; width: 100%; flex-basis: auto; max-height: none; }
}