/* ARTICLE TOC — UI v1 component
 * Exact layout/state cascade extracted from assets/styles.css.
 * Typography remains owned by assets/typography.css.
 */

@media (min-width:1001px){
.article-toc{
    top:28px;
    padding:18px 0;
  }

.article-toc>span{
    font-size:9.5px;
  }

.article-toc-list{
    gap:10px;
  }

.article-toc-list a{
    font-size:13px;
    line-height:1.4;
  }

.article-toc-list a.is-sub{
    font-size:12px;
  }
}

.article-sidebar{
  position:sticky;
  top:22px;
  min-width:0;
}

.article-toc{
  padding:17px 18px 16px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  box-shadow:0 2px 10px rgba(16,35,45,.025);
}

.article-toc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.article-toc-head strong{color:var(--ink)}

.article-toc-count{display:none}

.article-toc-toggle{
  display:none;
  padding:0;
  background:transparent;
  color:var(--green);
  font-size:var(--type-meta);
  font-weight:700;
}

.article-toc-list{
  display:flex;
  flex-direction:column;
  gap:0;
  margin:0;
  counter-reset:article-toc;
}

.article-toc-list a{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:9px;
  align-items:start;
  padding:8px 0;
  border-top:1px solid #edf1ef;
  color:#5f7078;
}

.article-toc-list a:first-child{border-top:0}

.article-toc-list a:before{
  counter-increment:article-toc;
  content:counter(article-toc);
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  margin-top:1px;
  border-radius:50%;
  background:#edf6f1;
  color:var(--green);
  font-size:var(--type-label);
  font-weight:900;
}

.article-toc-list a.active,
.article-toc-list a:hover{color:var(--green)}

.article-toc-list a.active:before{
  background:var(--green);
  color:#fff;
}

@media(max-width:900px){
.article-sidebar{
    position:static;
    order:-1;
  }

.article-toc{
    padding:13px 15px;
    background:#fff;
  }

.article-toc-head{margin:0}

.article-toc-head strong{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
  }

.article-toc-count{
    display:inline;
    margin-left:0;
    color:#89958f;
    font-size:var(--type-meta);
    font-weight:500;
  }

.article-toc-count:before{content:" · "}

.article-toc-toggle{
    display:inline-grid;
    place-items:center;
    width:28px;
    height:28px;
    border:1px solid var(--line);
    border-radius:50%;
    color:var(--ink);
    font-size:0;
  }

.article-toc-toggle:after{
    content:"";
    width:16px;
    height:16px;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6 L8 10 L12 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6 L8 10 L12 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transform:rotate(0deg);
    transition:transform .18s ease;
  }

.article-toc-toggle[aria-expanded="true"]:after{
    transform:rotate(180deg);
  }

.article-toc-list{
    margin-top:10px;
    padding-top:4px;
    border-top:1px solid #e7ece9;
  }
}