/* LabMu UI docs page only: example boxes, code, colour swatches, icon grid. Everything else is labmu-ui.css. */
.sidebar nav{flex:1;min-height:0;overflow-y:auto;margin:0 -14px;padding:0 14px}
body.nav-mini .sidebar nav{margin:0 -12px;padding:0 12px}
.content{max-width:1080px}
.docs-section{scroll-margin-top:calc(var(--header-h) + 16px);display:flex;flex-direction:column;gap:14px}
.docs-section+.docs-section{margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
/* code blocks scroll inside the column instead of widening the page */
.docs-section>*{min-width:0;max-width:100%}
.docs-section>h2{font-size:1.25rem;letter-spacing:-.01em}
.docs-section h3{font-size:.95rem;margin-top:8px}
.docs-prose{color:var(--body);line-height:1.6;max-width:76ch}
.docs-prose :is(ul,ol),:is(ul,ol).docs-prose{margin:0;padding-left:1.25em}
.docs-prose li+li{margin-top:4px}
.docs-react{font-size:.8rem;color:var(--muted)}
code.k{font-family:var(--font-mono);font-size:.85em;background:var(--surface);color:var(--ink);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
.docs-ex{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);overflow:hidden;min-width:0}
.docs-demo{padding:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;min-width:0}
.docs-demo.block{display:block}
.docs-demo.block:is(.stack,.stack-sm){display:flex;align-items:stretch}
.docs-demo.canvas{background:var(--canvas)}
.docs-demo>.topbar{position:relative;z-index:auto;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-ctl)}
.docs-code{margin:0;padding:14px 18px;background:var(--surface);border-top:1px solid var(--line);font:12.5px/1.6 var(--font-mono);color:var(--ink);overflow:auto;max-height:340px;white-space:pre;tab-size:2}
.docs-code.docs-static{border:1px solid var(--line);border-radius:var(--r-card)}
.docs-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.swatch{border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden;background:var(--paper);font-size:.75rem;min-width:0}
.swatch span{display:block;height:44px;border-bottom:1px solid var(--line)}
.swatch code{display:block;padding:6px 10px 0;font-family:var(--font-mono);color:var(--ink)}
.swatch small{display:block;padding:0 10px 6px;color:var(--muted)}
.docs-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.docs-icons figure{margin:0;display:grid;justify-items:center;gap:6px;padding:12px 4px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--paper);font-size:.7rem;color:var(--body);text-align:center;overflow-wrap:anywhere}
.docs-icons .icon{width:24px;height:24px;color:var(--ink)}
.docs-hero{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--r-card);border:1px solid var(--primary-border);background:linear-gradient(110deg,var(--primary-light),var(--paper))}
.docs-hero h1{font-size:1.75rem}
.docs-hero p{color:var(--body);max-width:68ch}
@media (max-width:900px){.docs-brand-seg{display:none}}