/* Article reader: top progress + sticky TOC */

#ar-bar{
  position:fixed; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
  transform-origin:left center; transform:scaleX(0);
  z-index:9000; pointer-events:none;
  transition:transform .15s cubic-bezier(.2,.7,.1,1);
  will-change:transform;
}

#ar-toc{
  position:fixed;
  top:96px; right:24px;
  width:260px; max-height:calc(100vh - 130px);
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:2px;
  z-index:50;
  display:flex; flex-direction:column;
  box-shadow:0 14px 40px -22px rgba(28,24,19,.16);
  font-family:'Golos Text', sans-serif;
}

#ar-toc .ar-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 18px;
  background:transparent; border:none; cursor:pointer;
  font-family:'Golos Text', sans-serif;
  font-weight:600; font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-deep);
  border-bottom:1px solid var(--line);
  width:100%; text-align:left;
}
#ar-toc .ar-toggle:hover{color:var(--accent)}
#ar-toc .ar-toggle svg{transition:transform .25s var(--ease)}
#ar-toc .ar-toggle[aria-expanded="false"] svg{transform:rotate(-90deg)}

#ar-toc .ar-list{
  list-style:none; padding:12px 0 14px; margin:0;
  overflow-y:auto; max-height:calc(100vh - 200px);
}
#ar-toc .ar-list.ar-collapsed{display:none}

#ar-toc .ar-list li{padding:0 18px}
#ar-toc .ar-list .ar-h3{padding-left:32px}

#ar-toc .ar-list a{
  display:block;
  padding:6px 0;
  font-family:'Golos Text', sans-serif;
  font-size:13px; line-height:1.45;
  color:var(--ink-soft);
  text-decoration:none;
  border-left:1px solid transparent;
  margin-left:-10px; padding-left:10px;
  transition:color .2s, border-color .2s;
}
#ar-toc .ar-list a:hover{color:var(--accent-deep)}
#ar-toc .ar-list a.cur{color:var(--ink); border-left-color:var(--accent); font-weight:600}

@media (max-width: 1180px){
  #ar-toc{
    position:sticky; top:64px;
    width:auto; right:auto;
    max-height:none;
    margin:24px 0;
    box-shadow:none;
  }
  #ar-toc .ar-list{max-height:none}
}
@media (max-width: 780px){
  #ar-toc{margin:18px 0; border-radius:2px}
}

@media print{
  #ar-bar, #ar-toc{display:none !important}
}

@media (prefers-reduced-motion: reduce){
  #ar-bar{transition:none}
  #ar-toc .ar-toggle svg{transition:none}
}