/* Docs-only shell. Pulled out of the per-page <style> blocks so all five
 * doc pages share one stylesheet. Brand tokens come from oddly-brand.css. */

.docs-layout { max-width: 1100px; margin: 0 auto; padding: 32px 22px 80px; display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 880px) { .docs-layout { grid-template-columns: 220px 1fr; gap: 48px; } }

aside.docs-nav { font-size: 14px; }
@media (min-width: 880px) { aside.docs-nav { position: sticky; top: 80px; align-self: start; } }
.docs-nav h4 { font-size: 12px; font-weight: 700; color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 10px; }
.docs-nav ul { list-style: none; padding: 0; margin: 0 0 20px; }
.docs-nav li { padding: 6px 0; }
.docs-nav a { color: var(--ink-soft); text-decoration: none; padding: 4px 8px; margin-left: -8px; border-radius: 6px; display: inline-block; }
.docs-nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.docs-nav a.active { color: var(--brand); background: var(--accent-soft); font-weight: 600; }

article.docs-body { min-width: 0; }
article.docs-body h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; margin: 0 0 8px; font-weight: 800; }
article.docs-body .lede { color: var(--ink-mute); font-size: 16px; margin: 0 0 28px; max-width: 640px; }
article.docs-body h2 { font-size: 22px; margin: 36px 0 10px; letter-spacing: -0.01em; font-weight: 700; }
article.docs-body h3 { font-size: 16px; margin: 24px 0 6px; font-weight: 600; }
article.docs-body p, article.docs-body li { color: var(--ink-soft); font-size: 15px; line-height: 1.65; }
article.docs-body ul, article.docs-body ol { padding-left: 22px; }
article.docs-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--surface-2); padding: 1px 6px; border-radius: 4px; color: var(--ink); }
article.docs-body pre { background: var(--surface-2); padding: 14px 16px; border-radius: var(--radius); overflow-x: auto; margin: 14px 0; font-size: 13px; line-height: 1.5; }
article.docs-body blockquote { margin: 18px 0; padding: 12px 16px; border-left: 3px solid var(--brand); background: var(--accent-soft); color: var(--ink-soft); border-radius: 0 var(--radius) var(--radius) 0; }
article.docs-body table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
article.docs-body th, article.docs-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
article.docs-body th { color: var(--ink-mute); font-weight: 600; font-size: 13px; }

.docs-cards { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 32px 0; }
@media (min-width: 700px) { .docs-cards { grid-template-columns: 1fr 1fr; } }
.docs-card { padding: 22px; }
.docs-card h3 { margin: 0 0 6px; font-size: 17px; }
.docs-card p { font-size: 14px; margin-top: 6px; }
.docs-card a { font-size: 14px; font-weight: 600; }

.prev-next { display: flex; justify-content: space-between; gap: 16px; margin-top: 60px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 14px; }
.prev-next a { color: var(--ink-soft); }
.prev-next a:hover { color: var(--brand); text-decoration: none; }
.prev-next .arrow { color: var(--brand); margin: 0 4px; }