/* public/docs/docs.css — shared layout for docs.sunflare.me.
   Loaded alongside the site-wide /styles.css (palette, .cta/.btn.ghost,
   header nav) — this file only adds what a docs page needs on top: the
   sidebar/content layout, typography for long-form text, and code blocks. */

.docs-header { position:sticky; top:0; z-index:45; background:rgba(11,11,11,0.9); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,0.06); }
.docs-header-inner { max-width:1200px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.docs-header-title { display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; font-weight:700; font-size:16px; }
.docs-header-title img { height:28px; }
.docs-header-title .pill { font-size:11px; font-weight:700; letter-spacing:.04em; color:#0b0b0b; background:linear-gradient(90deg,var(--accent-1),var(--accent-2)); padding:2px 8px; border-radius:999px; text-transform:uppercase; }

.docs-shell { max-width:1200px; margin:0 auto; display:flex; gap:40px; padding:28px 20px 80px; align-items:flex-start; }

.docs-sidebar { flex:0 0 220px; position:sticky; top:76px; }
.docs-sidebar-group { margin-bottom:22px; }
.docs-sidebar-label { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; }
.docs-sidebar a { display:block; padding:7px 10px; margin:0 -10px; border-radius:8px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:500; }
.docs-sidebar a:hover { color:#fff; background:rgba(255,255,255,0.04); }
.docs-sidebar a.active { color:#fff; background:rgba(255,122,42,0.12); box-shadow:inset 2px 0 0 var(--accent-1); }

.docs-content { flex:1 1 auto; min-width:0; max-width:760px; }
.docs-content > *:first-child { margin-top:0; }
.docs-eyebrow { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-1); margin:0 0 8px; }
.docs-content h1 { font-size:32px; line-height:1.15; margin:0 0 12px; text-wrap:balance; }
.docs-content .docs-lede { color:var(--muted); font-size:16px; line-height:1.6; margin:0 0 36px; max-width:62ch; }
.docs-content h2 { font-size:22px; margin:44px 0 14px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.07); }
.docs-content h2:first-of-type { border-top:none; padding-top:0; }
.docs-content h3 { font-size:16px; margin:26px 0 10px; color:#fff; }
.docs-content p { color:#c7c9cc; line-height:1.7; font-size:15px; max-width:68ch; }
.docs-content li { color:#c7c9cc; line-height:1.7; font-size:15px; }
.docs-content a { color:var(--accent-2); text-decoration:underline; text-decoration-color:rgba(255,210,74,0.35); text-underline-offset:2px; }
.docs-content a:hover { text-decoration-color:currentColor; }
.docs-content strong { color:#fff; }
.docs-content ul, .docs-content ol { padding-left:22px; max-width:68ch; }
.docs-content code { font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; font-size:0.86em; background:rgba(255,255,255,0.08); padding:2px 6px; border-radius:5px; color:#ffd8a8; }
.docs-content pre { background:#111214; border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:16px 18px; overflow-x:auto; margin:16px 0; }
.docs-content pre code { background:none; padding:0; color:#e2e4e8; font-size:13px; line-height:1.6; }
.docs-content table { border-collapse:collapse; width:100%; margin:16px 0; font-size:14px; }
.docs-content th, .docs-content td { text-align:left; padding:9px 12px; border-bottom:1px solid rgba(255,255,255,0.08); vertical-align:top; }
.docs-content th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.docs-content td code { white-space:nowrap; }

.docs-callout { display:flex; gap:12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:14px 16px; margin:20px 0; }
.docs-callout.warn { background:rgba(255,122,42,0.08); border-color:rgba(255,122,42,0.25); }
.docs-callout-icon { flex:0 0 auto; font-size:18px; line-height:1; }
.docs-callout p { margin:0; font-size:14px; }

.docs-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:22px 0; }
.docs-card { display:block; background:#141416; border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:18px; text-decoration:none; transition:border-color .12s ease, transform .08s ease; }
.docs-card:hover { border-color:rgba(255,122,42,0.4); transform:translateY(-1px); }
.docs-card-title { color:#fff; font-weight:700; font-size:15px; margin-bottom:6px; }
.docs-card-desc { color:var(--muted); font-size:13.5px; line-height:1.5; }

@media (max-width:900px) {
  .docs-shell { flex-direction:column; }
  .docs-sidebar { position:static; width:100%; display:flex; flex-wrap:wrap; gap:4px 18px; }
  .docs-sidebar-group { margin-bottom:10px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; }
  .docs-sidebar-label { width:100%; }
}