/* dropbits.org public docs — matches landing page palette */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0e0e0e;
  --muted:#6b6560;
  --paper:#f4f0e8;
  --paper2:#ebe7de;
  --accent:#c84b00;
  --border:#d4cfc8;
  --card:#ffffff;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  --serif:Georgia,'Times New Roman',serif;
  --max:42rem;
  --nav:16rem;
  --toc:11rem;
  --header-h:3.25rem;
  --docs-sidebar-bp:980px;
}
html{font-size:17px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif);
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}

.docs-header{
  position:sticky;
  top:0;
  z-index:100;
  padding:.75rem 1.5rem;
  min-height:var(--header-h);
  border-bottom:1px solid var(--border);
  background:var(--card);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem 1rem;
}
.docs-header .brand{
  font-family:var(--mono);
  font-weight:700;
  font-size:1.1rem;
  color:var(--ink);
}
.docs-header .brand span{color:var(--accent)}
.docs-header .tag{font-size:.85rem;color:var(--muted)}
.docs-header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:.75rem;
  flex:1 1 auto;
  justify-content:flex-end;
  min-width:12rem;
}
.docs-search-wrap{flex:1 1 14rem;max-width:18rem;min-width:10rem}
.docs-search-wrap pagefind-searchbox{
  --pf-primary:var(--accent);
  --pf-text:var(--ink);
  --pf-background:var(--paper);
  --pf-border:var(--border);
  display:block;
  width:100%;
  font-size:.85rem;
}
.docs-menu-btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:.4rem .65rem;
  border:1px solid var(--border);
  border-radius:3px;
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
}
.docs-menu-btn:hover{border-color:var(--accent);color:var(--accent)}

.docs-layout{
  display:flex;
  flex-wrap:nowrap;
  max-width:min(100%,calc(var(--max) + var(--nav) + var(--toc) + 6rem));
  margin:0 auto;
  padding:0 1.5rem 3rem;
  gap:2rem;
  align-items:flex-start;
}
.docs-nav{
  flex:0 0 var(--nav);
  padding-top:2rem;
  font-size:.82rem;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:min(18rem,88vw);
  max-height:none;
  padding:1rem 1.25rem 2rem;
  background:var(--card);
  border-right:1px solid var(--border);
  box-shadow:4px 0 24px rgba(14,14,14,.08);
  transform:translateX(-105%);
  visibility:hidden;
  transition:transform .2s ease,visibility .2s ease;
  z-index:300;
  overflow-y:auto;
}
.docs-nav h2{
  font-family:var(--mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  margin:1.25rem 0 .35rem;
}
.docs-nav h2:first-child{margin-top:0}
.docs-nav-group{margin-bottom:.5rem}
.docs-nav-group h3{
  font-family:var(--mono);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  margin:.65rem 0 .25rem;
  opacity:.9;
}
.docs-nav ul{list-style:none}
.docs-nav li{margin:.2rem 0}
.docs-nav a{color:var(--muted);display:block;line-height:1.35}
.docs-nav a:hover,.docs-nav a.active{color:var(--accent)}
.docs-nav-close{
  display:block;
  font-family:var(--mono);
  font-size:.7rem;
  margin-bottom:.75rem;
  padding:.25rem 0;
  border:none;
  background:none;
  color:var(--muted);
  cursor:pointer;
}
.docs-nav-backdrop{
  display:block;
  position:fixed;
  inset:0;
  background:rgba(14,14,14,.35);
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;
  z-index:250;
}
body.docs-nav-open .docs-nav{
  transform:translateX(0);
  visibility:visible;
}
body.docs-nav-open .docs-nav-backdrop{
  opacity:1;
  pointer-events:auto;
  visibility:visible;
}
body.docs-nav-open{overflow:hidden}

.docs-content{
  flex:1 1 auto;
  min-width:0;
  width:100%;
  padding-top:2rem;
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
}
.docs-content.has-toc{
  grid-template-columns:minmax(0,1fr);
}
.docs-main{
  min-width:0;
  width:100%;
  max-width:var(--max);
}
.docs-main h1{
  font-family:var(--serif);
  font-size:1.85rem;
  line-height:1.2;
  margin-bottom:1rem;
}
.docs-main h2{font-size:1.25rem;margin:2rem 0 .75rem;scroll-margin-top:calc(var(--header-h) + 1rem)}
.docs-main h3{font-size:1.05rem;margin:1.5rem 0 .5rem;scroll-margin-top:calc(var(--header-h) + 1rem)}
.docs-main p,.docs-main ul,.docs-main ol{margin:.75rem 0}
.docs-main li{margin:.25rem 0}
.docs-main code{
  font-family:var(--mono);
  font-size:.88em;
  background:var(--paper2);
  padding:.1em .35em;
  border-radius:2px;
}
.docs-main pre{
  font-family:var(--mono);
  font-size:.82rem;
  line-height:1.55;
  background:var(--card);
  border:1px solid var(--border);
  padding:1rem 1.25rem;
  overflow-x:auto;
  margin:1rem 0;
}
.docs-main pre code{background:none;padding:0}
.docs-main table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
  margin:1rem 0;
}
.docs-main th,.docs-main td{
  border:1px solid var(--border);
  padding:.45rem .65rem;
  text-align:left;
  vertical-align:top;
}
.docs-main th{background:var(--paper2);font-family:var(--mono);font-size:.78rem}
.docs-main blockquote{
  border-left:3px solid var(--accent);
  padding-left:1rem;
  color:var(--muted);
  margin:1rem 0;
}
.docs-main img{
  max-width:100%;
  height:auto;
  border:1px solid var(--border);
  border-radius:4px;
  margin:1rem 0;
}

.docs-toc{
  font-size:.78rem;
  line-height:1.4;
  position:static;
  max-height:none;
  border-bottom:1px solid var(--border);
  padding-bottom:1rem;
  margin-bottom:.5rem;
  order:-1;
}
.docs-toc-title{
  font-family:var(--mono);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:.5rem;
}
.docs-toc ul{list-style:none}
.docs-toc li{margin:.2rem 0}
.docs-toc a{color:var(--muted)}
.docs-toc a:hover{color:var(--accent)}
.docs-toc .toc-h3{padding-left:.75rem;font-size:.92em}

.docs-footer{
  border-top:1px solid var(--border);
  padding:2rem 1.5rem;
  font-size:.8rem;
  color:var(--muted);
  text-align:center;
}
.docs-footer a{font-size:.8rem}

@media(min-width:980px){
  .docs-menu-btn{display:none}
  .docs-nav-close{display:none}
  body.docs-nav-open{overflow:auto}
  .docs-nav-backdrop{display:none!important;visibility:hidden!important}
  .docs-nav{
    position:sticky;
    top:calc(var(--header-h) + 1rem);
    flex:0 0 var(--nav);
    width:auto;
    max-height:calc(100vh - var(--header-h) - 2rem);
    padding-top:2rem;
    padding-left:0;
    padding-right:0;
    transform:none;
    visibility:visible;
    box-shadow:none;
    border-right:none;
    overflow-y:auto;
  }
  .docs-content.has-toc{
    grid-template-columns:minmax(0,1fr) var(--toc);
    align-items:start;
  }
  .docs-toc{
    order:0;
    position:sticky;
    top:calc(var(--header-h) + 1rem);
    align-self:start;
    max-height:calc(100vh - var(--header-h) - 2rem);
    overflow-y:auto;
    border-bottom:none;
    padding-bottom:0;
    margin-bottom:0;
  }
}

@media(max-width:979px){
  .docs-header-actions{min-width:0}
  .docs-search-wrap{flex:1 1 100%;max-width:none;order:3;width:100%}
  .docs-layout{flex-wrap:wrap;padding-bottom:2rem;gap:0}
}

@media(max-width:540px){
  .docs-header{padding:.65rem 1rem}
  .docs-layout{padding:0 1rem 2rem}
}