/* Docs shell — built on LombokCSS tokens, so it re-skins with the site */
.docs { display:flex; min-block-size:100vh; }
.docs-aside {
  inline-size:248px; flex:none; position:sticky; inset-block-start:0; align-self:flex-start;
  block-size:100vh; overflow-y:auto; padding: var(--lc-space-5) var(--lc-space-3);
  border-inline-end: var(--lc-border-width) solid var(--lc-border); background: var(--lc-surface);
  -webkit-backdrop-filter: var(--lc-blur); backdrop-filter: var(--lc-blur);
}
.docs-brand { display:flex; align-items:center; gap:.5em; font-weight:var(--lc-weight-bold); font-size:var(--lc-text-lg); padding:0 var(--lc-space-3) var(--lc-space-4); color:var(--lc-text); text-decoration:none; }
.docs-navtitle { font-size:var(--lc-text-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--lc-text-faint); padding:var(--lc-space-4) var(--lc-space-3) var(--lc-space-1); }
.docs-nav a { display:block; padding:.45em .75em; border-radius:var(--lc-radius-sm); color:var(--lc-text-muted); text-decoration:none; font-size:var(--lc-text-sm); }
.docs-nav a:hover { background:var(--lc-surface-2); color:var(--lc-text); }
.docs-nav a.is-active { background:var(--lc-accent-soft); color:var(--lc-accent-soft-text); font-weight:var(--lc-weight-medium); }
.docs-main { flex:1; min-inline-size:0; }
.docs-top {
  position:sticky; inset-block-start:0; z-index:var(--lc-z-sticky);
  display:flex; align-items:center; gap:var(--lc-space-3); flex-wrap:wrap;
  padding:var(--lc-space-3) var(--lc-space-6); border-block-end:var(--lc-border-width) solid var(--lc-border);
  background:var(--lc-surface); -webkit-backdrop-filter:var(--lc-blur); backdrop-filter:var(--lc-blur);
}
.docs-top .seg { display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; background:var(--lc-surface-2); border:var(--lc-border-width) solid var(--lc-border); border-radius:var(--lc-radius); }
.docs-top .seg button { font:inherit; font-size:var(--lc-text-xs); font-weight:var(--lc-weight-medium); cursor:pointer; border:0; background:none; color:var(--lc-text-muted); padding:.35em .6em; border-radius:var(--lc-radius-sm); }
.docs-top .seg button.is-active { background:var(--lc-accent); color:var(--lc-accent-text); }
.docs-toggles { display:flex; gap:var(--lc-space-4); margin-inline-start:auto; }
.docs-content { padding:var(--lc-space-8) var(--lc-space-6); max-inline-size:920px; }
.docs-content h1 { font-size:var(--lc-text-3xl); }
.docs-content h2 { font-size:var(--lc-text-2xl); margin-block:var(--lc-space-8) var(--lc-space-3); padding-block-start:var(--lc-space-4); border-block-start:var(--lc-border-width) solid var(--lc-border); }
.docs-content h3 { margin-block:var(--lc-space-6) var(--lc-space-2); }
.example { border:var(--lc-border-width) solid var(--lc-border); border-radius:var(--lc-radius) var(--lc-radius) 0 0; padding:var(--lc-space-6); background:var(--lc-surface); display:flex; flex-wrap:wrap; gap:var(--lc-space-3); align-items:center; }
.example + pre { margin-block-start:0; border-start-start-radius:0; border-start-end-radius:0; border-block-start:0; }
.docs-burger { display:none; }
@media (max-width:860px){
  .docs-aside { position:fixed; inset-block:0; inset-inline-start:0; z-index:var(--lc-z-modal); transform:translateX(-100%); transition:transform var(--lc-transition); }
  [dir=rtl] .docs-aside { transform:translateX(100%); }
  .docs.nav-open .docs-aside { transform:none; box-shadow:var(--lc-shadow-lg); }
  .docs-burger { display:inline-flex; }
}