/* ---------- Docs / FAQ ----------
   Sticky TOC sidebar + per-module FAQ blocks (mk-details accordion). */
.dc-hero { padding-top: calc(var(--header-h) + 56px); }
.dc-grid { display: grid; grid-template-columns: 232px 1fr; gap: 48px; align-items: start; margin-top: 40px; }

.dc-toc { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; }
.dc-toc__lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-subtle); margin-bottom: 12px; padding-left: 12px; }
.dc-toc a { display: block; font-size: 13.5px; color: var(--fg-muted); padding: 7px 12px; border-radius: var(--r-md); border-left: 2px solid transparent; transition: color .12s var(--ease-out), background-color .12s var(--ease-out), border-color .12s var(--ease-out); }
.dc-toc a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.dc-toc a.is-active { color: var(--nx-green); border-left-color: var(--nx-green); font-weight: 600; }

.dc-content { display: flex; flex-direction: column; gap: 46px; min-width: 0; }
.dc-block { scroll-margin-top: calc(var(--header-h) + 20px); }
.dc-block__head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.dc-block__ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-inset); border: 1px solid var(--border); color: var(--nx-green); }
.dc-block__ic svg { width: 21px; height: 21px; }
.dc-block__name { font-size: 20px; }
.dc-block .mk-details { margin: 0 0 10px; max-width: none; }

@media (max-width: 880px){ .dc-grid { grid-template-columns: 1fr; gap: 0; } .dc-toc { display: none; } }
