/* ── Documentation (the in-app user manual) ─────────────────────────────────
   The docs index + a rendered chapter. Plan: oko-suite/maggyver/plans/maggyver-manual-plan.md.
   Prose styling only — the index reuses the standard .card / .execution-list containers. */

.docs-index__intro,
.docs-empty {
    color: var(--text-secondary);
    font-size: var(--font-size-body-sm);
    margin: 0 0 var(--spacing-lg);
}

.docs-index__group {
    font-size: var(--font-size-ui-md);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: var(--spacing-lg) 0 var(--spacing-sm);
}
.docs-index__group:first-of-type {
    margin-top: 0;
}

.docs-index__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.docs-index__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    width: 100%;
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.12s ease;
}
.docs-index__item:hover {
    border-color: var(--border-strong);
}

.docs-index__item-title {
    font-size: var(--font-size-body-md);
    color: var(--text-primary);
}

.docs-index__item-open {
    font-size: var(--font-size-ui-sm);
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── rendered chapter ──────────────────────────────────────────────────────
   `marked` emits plain semantic HTML, so everything here is element-scoped under .docs-body.
   Measure is capped: full-width prose at this font size is hard to read across a wide monitor. */

.docs-body {
    max-width: 76ch;
    color: var(--text-primary);
    font-size: var(--font-size-body-md);
    line-height: 1.65;
}

.docs-body h1 { font-size: var(--font-size-h3); margin: var(--spacing-lg) 0 var(--spacing-sm); }
.docs-body h2 { font-size: var(--font-size-h4); margin: var(--spacing-xl) 0 var(--spacing-sm); }
.docs-body h3 { font-size: var(--font-size-h5); margin: var(--spacing-lg) 0 var(--spacing-xs); }
.docs-body h4 { font-size: var(--font-size-h6); margin: var(--spacing-md) 0 var(--spacing-xs); }
.docs-body h1:first-child,
.docs-body h2:first-child { margin-top: 0; }

.docs-body p,
.docs-body ul,
.docs-body ol {
    margin: 0 0 var(--spacing-md);
}
.docs-body li { margin-bottom: var(--spacing-xs); }

.docs-body a {
    color: var(--accent-main);
    text-decoration: none;
}
.docs-body a:hover { text-decoration: underline; }

/* A link to a chapter that is not in the corpus. Marked visibly rather than left looking live —
   "no write path that can silently do nothing", applied to navigation. */
.docs-body a.docs-link--missing {
    color: var(--text-muted);
    text-decoration: line-through;
    cursor: not-allowed;
}

.docs-body code {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-sm);
    background: var(--bg-muted);
    border-radius: var(--border-radius-sm);
    padding: 1px 4px;
}
.docs-body pre {
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    overflow-x: auto;
    margin: 0 0 var(--spacing-md);
}
.docs-body pre code {
    background: none;
    padding: 0;
}

.docs-body blockquote {
    margin: 0 0 var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-left: 3px solid var(--border-strong);
    color: var(--text-secondary);
}

/* Screenshots are the point of this manual, so give them room and a frame that reads as a
   screenshot rather than as page furniture. */
.docs-body img {
    display: block;
    max-width: 100%;
    /* A tall portrait grab (a clipped dropdown, say) at full measure width fills the viewport and
       pushes the prose it illustrates off the page. Cap the height and let width follow, so the
       aspect ratio holds and a tall image simply becomes narrower than the measure. */
    max-height: 60vh;
    width: auto;
    height: auto;
    margin: var(--spacing-md) 0;
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-md);
}

.docs-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-body-sm);
}
.docs-body th,
.docs-body td {
    text-align: left;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 1px solid var(--border-subtle);
}
.docs-body th { color: var(--text-secondary); font-weight: 600; }

.docs-body hr {
    border: 0;
    border-top: 1px solid var(--border-subtle);
    margin: var(--spacing-lg) 0;
}

/* ── sidebar placement ──────────────────────────────────────────────────────
   DOCS sits at the FOOT of the nav rail, directly above the `?` in .sidebar-bottom, because it is a
   reference surface rather than a place you work. `margin-top: auto` rather than moving the button
   out of `#section-nav`: the collapsed-sidebar dropdown, the active-item highlight and
   updateNavVisibility() are all driven from `#section-nav .sidebar-nav-item`, so relocating the
   element in the DOM would quietly drop DOCS from the collapsed nav.

   When the rail is long enough to scroll (a tier-3 session), `auto` has nothing to distribute and
   DOCS simply sits last. That is the same place, reached by scrolling. */
#section-nav .sidebar-nav-item[data-section="docs"] {
    /* `order` as well as `margin-top`, because the grouped-nav renderer APPENDS its group slots to
       #section-nav at runtime (app.js `nav.appendChild(wrapper)`). DOM position in index.html
       therefore cannot put DOCS last, but a flex order can, without touching that renderer. */
    order: 1;
    margin-top: auto;
    border-top: 1px solid var(--border-subtle);
}

/* The chapter header uses the shared .execution-list-header--back modifier (components.css) rather
   than a docs-only rule — the back-control-first layout is now the house pattern for every detail
   view, not something this section does differently. "Contents" rather than "List" is docs-specific:
   the index is a table of contents, not a data list. */