/* liftt. docs — dark only, no light-mode branch anywhere */
.docs-body{ background:var(--ink); }
.docs-body .bg-stack{ display:none; }
.docs-body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58vw 42vw at 82% -8%, rgba(255,45,142,.13), transparent 68%),
    radial-gradient(48vw 40vw at 4% 8%, rgba(164,87,255,.10), transparent 70%),
    linear-gradient(180deg, #0b070d, #08050a 40%);
}
.docs-badge{
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pink); padding:5px 11px; border-radius:999px;
  background:rgba(255,45,142,.1); border:1px solid rgb(var(--tint)/.3);
}

/* Grid, not fixed + padding. A fixed sidebar with no `left` resolves to its
   static position, which sat inside the very padding meant to clear it — so the
   nav and the article rendered on top of each other. Sticky in a grid column
   cannot do that. */
.docs-shell{
  max-width:1340px; margin:0 auto; padding:104px var(--gut) 0;
  display:grid; grid-template-columns:212px minmax(0,1fr); gap:44px; align-items:start;
}
.docs-main{ display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:48px; align-items:start; }

/* left nav */
.docs-side{
  position:sticky; top:104px; max-height:calc(100vh - 132px); overflow-y:auto;
  padding-right:10px; scrollbar-width:thin;
}
.docs-side h6{
  margin:22px 0 8px; font-size:10.5px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--paper-mute);
}
.docs-side h6:first-child{ margin-top:0; }
.docs-side a{
  display:block; padding:6px 12px; margin-left:-12px; border-radius:9px;
  font-size:13.5px; color:var(--paper-dim); border-left:2px solid transparent;
  transition:color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.docs-side a:hover{ color:var(--paper); background:rgba(255,255,255,.045); }
.docs-side a.on{ color:var(--pink); border-left-color:var(--pink); background:rgba(255,45,142,.07); }

/* right TOC */
.docs-toc{ position:sticky; top:112px; }
.docs-toc h6{
  font-size:10.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--paper-mute); margin-bottom:12px;
}
.docs-toc a{
  display:block; padding:5px 0 5px 12px; font-size:12.5px; color:var(--paper-mute);
  border-left:1px solid var(--glass-rim); transition:.2s var(--ease);
}
.docs-toc a:hover{ color:var(--paper-dim); }
.docs-toc a.on{ color:var(--pink); border-left-color:var(--pink); }
.docs-toc a.lvl2{ padding-left:24px; }

/* article */
.docs-article{ max-width:760px; padding-bottom:110px; }
.docs-eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pink); margin-bottom:14px;
}
.docs-article h1{
  font-size:clamp(30px,3.4vw,40px); letter-spacing:-.035em; margin:0 0 18px;
  scroll-margin-top:110px;
}
.docs-article h2{
  font-size:21px; letter-spacing:-.02em; margin:40px 0 14px; scroll-margin-top:110px;
  padding-top:4px;
}
.docs-article p{ font-size:15.5px; line-height:1.72; color:var(--paper-dim); margin:0 0 16px; }
.docs-article p b, .docs-article li b{ color:var(--paper); font-weight:600; }
.docs-lede{ font-size:18px !important; color:var(--paper) !important; line-height:1.62 !important; }
.docs-article a:not(.btn){ color:var(--pink); border-bottom:1px solid rgb(var(--tint)/.35); }
.docs-article a:not(.btn):hover{ border-bottom-color:var(--pink); }
.docs-article hr{ border:0; border-top:1px solid rgba(255,255,255,.07); margin:56px 0 44px; }
.docs-note{ font-size:13.5px !important; color:var(--paper-mute) !important; }

.docs-list, .docs-steps{ margin:0 0 18px; padding-left:20px; }
.docs-list li, .docs-steps li{ font-size:15px; line-height:1.7; color:var(--paper-dim); margin-bottom:10px; }
.docs-steps li{ padding-left:6px; }
.docs-steps li::marker{ color:var(--pink); font-weight:600; }
.docs-list li::marker{ color:var(--pink); }

.docs-code{
  margin:0 0 18px; padding:16px 18px; border-radius:var(--r-md); overflow-x:auto;
  background:rgba(0,0,0,.4); border:1px solid var(--glass-rim);
}
.docs-code code{ font-family:var(--font-mono); font-size:13px; color:var(--pink-lite); white-space:pre; }

.docs-table{
  width:100%; border-collapse:collapse; margin:0 0 22px; font-size:14px;
  display:block; overflow-x:auto;
}
.docs-table th{
  text-align:left; padding:0 18px 10px 0; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--paper-mute); font-weight:500;
  border-bottom:1px solid var(--glass-rim); white-space:nowrap;
}
.docs-table td{
  padding:12px 18px 12px 0; border-bottom:1px solid rgba(255,255,255,.05);
  color:var(--paper-dim); vertical-align:top;
}
.docs-table tr:last-child td{ border-bottom:0; }
.docs-table td:first-child{ color:var(--paper); white-space:nowrap; }

.callout{
  margin:0 0 22px; padding:18px 20px; border-radius:var(--r-md);
  background:rgba(255,255,255,.04); border:1px solid var(--glass-rim);
  border-left:3px solid var(--pink);
}
.callout b{ display:block; font-size:13.5px; color:var(--paper); margin-bottom:7px; }
.callout p{ margin:0; font-size:14px; color:var(--paper-dim); }
.callout.warn{ border-left-color:var(--amber); background:rgba(255,184,77,.055); }
.callout.warn b{ color:var(--amber); }

.faq details{
  border:1px solid var(--glass-rim); border-radius:var(--r-md); padding:0 18px;
  margin-bottom:10px; background:rgba(255,255,255,.03);
}
.faq summary{
  cursor:pointer; padding:15px 0; font-size:15px; font-weight:500; color:var(--paper);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--pink); font-size:18px; line-height:1; flex:none; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0 0 16px; font-size:14.5px; color:var(--paper-dim); }

.docs-foot{ display:flex; gap:10px; margin-top:56px; padding-top:28px; border-top:1px solid rgba(255,255,255,.07); }

@media (max-width:1100px){
  .docs-main{ grid-template-columns:minmax(0,1fr); }
  .docs-toc{ display:none; }
}
@media (max-width:900px){
  .docs-shell{ grid-template-columns:minmax(0,1fr); padding-top:92px; }
  .docs-side{
    position:fixed; inset:64px 0 auto; width:100%; max-height:70vh; z-index:35;
    background:rgba(10,6,12,.97); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--glass-rim); padding:18px var(--gut) 22px;
    display:none;
  }
  .docs-side.open{ display:block; }
  .nav-burger{ display:block; }
}