/* ============================================================
   Docs pages (integrations): the legal pages' reading column,
   with a docs sidebar on the left listing every guide. Loaded after
   page-legal.css.
   ============================================================ */

.docs-layout { display: grid; grid-template-columns: minmax(0, 68ch); justify-content: center; }

/* ---- Sidebar: the guides, grouped; the current page is tinted lavender ---- */
.docs-nav { display: flex; flex-direction: column; gap: 28px; margin-bottom: 56px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.docs-nav-group { display: flex; flex-direction: column; gap: 2px; }
.docs-nav-label { margin-bottom: 8px; padding-left: 12px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-500); }
.docs-nav a { display: block; padding: 7px 12px; border-radius: 8px; font-size: 0.9375rem; line-height: 1.35; color: var(--ink-600); transition: color .2s ease, background-color .2s ease; }
.docs-nav a:hover { color: var(--ink-900); background: var(--ink-100); }
.docs-nav a[aria-current="page"] { color: var(--lavender-700); background: var(--lavender-50); font-weight: 500; }

/* ---- Guide list: hairline rows like the RevOps MCP audience list; the whole row links ---- */
.legal-content ul.guide-list { display: block; margin: 0; border-top: 1px solid var(--line); }
.legal-content .guide-list li { padding: 0; border-bottom: 1px solid var(--line); }
.legal-content .guide-list li::before { display: none; }
.guide-list a { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: baseline; padding: 26px 0; }
.legal-content .guide-list h3 { margin: 0; font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-900); transition: color .2s ease; }
.legal-content .guide-list p { margin: 0; font-size: 1rem; color: var(--ink-600); }
.guide-list a:hover h3 { color: var(--lavender-700); }
@media (max-width: 640px) { .guide-list a { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; } }

/* Small and medium screens: the sidebar sits above the guide as two rows of links */
@media (max-width: 1023px) {
    .docs-nav { flex-direction: row; flex-wrap: wrap; gap: 20px 40px; }
    .docs-nav-group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; }
    .docs-nav-label { width: 100%; }
}

/* Wide screens: sidebar | guide */
@media (min-width: 1024px) {
    .docs-layout { grid-template-columns: 200px minmax(0, 68ch); gap: 72px; align-items: start; }
    .docs-nav { position: sticky; top: 112px; margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
}

@media print { .docs-nav { display: none !important; } .docs-layout { display: block; } }