/* side table of contents (Notion style): thin bars on the left that open into the real section names on hover.
   Markup: <aside class="toc" id="toc"><button class="toc-bars">(one <i></i> per item)</button><nav class="toc-panel" id="tocPanel">(<a href="#id">name</a> ...)</nav></aside>
   Behaviour lives in toc.js. Used by the product page and the package page. */
.toc{ position:fixed; left:clamp(10px, 1.6vw, 28px); top:calc(var(--hdr, 88px) + 64px); z-index:25; }
.toc-bars{ display:flex; flex-direction:column; align-items:flex-start; gap:11px; padding:14px 22px 14px 10px; background:none; border:0; cursor:pointer; transition:opacity .2s ease; }
.toc-bars i{ display:block; width:16px; height:2px; border-radius:2px; background:#CFD6DE; transition:width .25s var(--ease-out, ease), background-color .25s ease; }
.toc-bars i.on{ width:26px; background:#1B2430; }
.toc-panel{
  position:absolute; left:-6px; top:-4px; min-width:236px; padding:10px 8px; background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 18px 40px -12px rgba(10,20,50,.22); display:flex; flex-direction:column; gap:1px;
  opacity:0; visibility:hidden; transform:translateX(-8px); transition:opacity .2s ease, transform .25s var(--ease-out, ease), visibility 0s linear .25s;
}
.toc-panel a{ position:relative; display:block; padding:7px 12px 7px 26px; border-radius:9px; font-size:12.5px; line-height:1.45; color:var(--muted); text-decoration:none; white-space:nowrap; }
.toc-panel a::before{ content:""; position:absolute; left:10px; top:50%; width:8px; height:2px; margin-top:-1px; border-radius:2px; background:#CFD6DE; transition:width .2s ease, background-color .2s ease; }
.toc-panel a:hover{ background:var(--surface-alt); color:var(--ink); }
.toc-panel a.on{ color:var(--ink); font-weight:700; }
.toc-panel a.on::before{ width:12px; background:#1B2430; }
.toc:hover .toc-panel, .toc:focus-within .toc-panel, .toc.open .toc-panel{ opacity:1; visibility:visible; transform:none; transition:opacity .2s ease, transform .25s var(--ease-out, ease), visibility 0s; }
.toc:hover .toc-bars, .toc:focus-within .toc-bars, .toc.open .toc-bars{ opacity:0; }
@media (max-width:1100px){
  .toc{ left:auto; right:14px; top:auto; bottom:84px; }
  .toc-bars{ background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 10px 24px -8px rgba(10,20,50,.25); padding:12px 14px; }
  .toc-panel{ left:auto; right:0; top:auto; bottom:0; max-height:70vh; overflow:auto; transform:translateY(8px); }
}