/* tools/shared/blog-toc.css - sticky "On this page" table of contents for
   /blog/ articles. Two layouts, same markup (blog-toc.js injects one <nav>):
   - >=1440px: floating sidebar fixed to the right of the centered article
     column, scroll-synced (.is-active on the section currently in view).
   - <1440px: collapsible inline box injected after the article's intro
     paragraph, toggled by its own button (no native <details> - keeps
     open/close behavior consistent across both layouts via one JS toggle).
   position:fixed on the desktop variant means it never affects document
   flow, so it costs zero CLS on wide screens. The inline mobile/tablet
   variant starts collapsed (small, fixed height) to keep its own shift
   minimal. */

.rlt-toc{
  font-family:var(--font-body);
}
.rlt-toc__toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  border:none;
  background:none;
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5b6472;
  padding:0;
}
.rlt-toc__toggle svg{
  width:14px;height:14px;
  flex-shrink:0;
  transition:transform .2s ease;
  color:#8b93a3;
}
.rlt-toc__list{
  list-style:none;
  margin:0;
  padding:0;
}
.rlt-toc__list li{margin:0}
.rlt-toc__list a{
  display:block;
  padding:7px 0;
  font-size:14px;
  line-height:1.4;
  color:#5b6472;
  text-decoration:none;
  border-left:2px solid transparent;
  padding-left:12px;
  margin-left:-1px;
  transition:color .15s,border-color .15s;
}
.rlt-toc__list a:hover{color:#0b132e}
.rlt-toc__list a.is-active{
  color:var(--brand);
  border-left-color:var(--brand);
  font-weight:600;
}

/* ---------- inline / collapsible variant (default, <1440px) ---------- */
.rlt-toc--inline{
  margin:8px 0 32px;
  padding:16px 20px;
  background:#fff;
  border:1px solid rgba(11,19,46,.08);
  border-radius:14px;
}
.rlt-toc--inline .rlt-toc__toggle[aria-expanded="false"] svg{transform:rotate(-90deg)}
.rlt-toc--inline .rlt-toc__panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
}
.rlt-toc--inline .rlt-toc__panel.is-open{max-height:600px}
.rlt-toc--inline .rlt-toc__list{margin-top:12px;padding-top:12px;border-top:1px solid rgba(11,19,46,.06)}

/* ---------- floating sidebar variant (>=1440px) ----------
   position:fixed (not sticky - the site's global body{overflow-x:hidden}
   forces a computed overflow-y:auto on body/html, which breaks
   position:sticky for descendants). blog-toc.js computes `top` on
   scroll/resize to fake sticky behavior: follows the article's top edge
   until it reaches the site's floating pill-nav (.header-fixed, read live
   at scroll time so it always clears whatever height that header currently
   has, scrolled or not), stays there while scrolling through the article,
   then detaches and rides out with the article's bottom edge so it never
   overlaps the hero above or the footer below. */
@media(min-width:1440px){
  .rlt-toc--float{
    position:fixed;
    left:calc(50% + 448px);
    width:230px;
    max-height:calc(100vh - 48px);
    overflow-y:auto;
  }
  .rlt-toc--float .rlt-toc__toggle{cursor:default}
  .rlt-toc--float .rlt-toc__toggle svg{display:none}
  .rlt-toc--float .rlt-toc__panel{max-height:none !important;overflow:visible}
  .rlt-toc--float .rlt-toc__list{margin-top:12px;padding-top:12px;border-top:1px solid rgba(11,19,46,.08)}
}
@media(max-width:1439px){
  .rlt-toc--float{display:none}
}
@media(min-width:1440px){
  .rlt-toc--inline{display:none}
}

@media(prefers-reduced-motion:reduce){
  .rlt-toc--inline .rlt-toc__panel{transition:none}
}