.toc{
height:fit-content;
margin:0 0 var(--gap);
}
.toc.toc-empty{
display:none;
}
.toc-buttons{
display:flex;
gap:var(--gap);
}
.toc-btn{
flex:1;
background-color:var(--kb1);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
padding:16px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:var(--gd4);
color:var(--tx2);
box-shadow:0 0 3px var(--bc1);
}
.toc-btn:hover{
color:var(--cl1);
background-color:var(--kb2);
}
.toc-btn.active{
background-color:var(--ob3);
border-color:var(--cl1);
color:var(--cl1);
}
.toc-btn.active:hover{
background-color:var(--ob2);
border-color:var(--ob5);
}
.toc-btn svg{
width:28px;
height:28px;
flex-shrink:0;
}
.toc-btn span{
font-size:18px;
font-weight:700;
font-family:var(--ff2);
text-transform:uppercase;
letter-spacing:.8px;
}
.toc-section{
max-height:0;
overflow:hidden;
border:0 solid var(--bc3);
border-radius:var(--br1);
}
.toc-section.active{
max-height:9999px;
border-width:var(--bw1);
margin-top:var(--gap);
}
.toc-section[data-section="summary"]{
display:flex;
flex-direction:column-reverse;
}
.toc-stats{
padding:12px var(--gap);
font-size:15px;
font-weight:600;
color:var(--tx2);
font-family:var(--ff1);
text-align:center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
background-color:var(--kb1);
}
.toc-placeholder{
padding:var(--gap) var(--gap) var(--gt3);
}
.toc-placeholder p{
color:var(--tx2);
font-size:var(--fz1);
line-height:var(--lh1);
margin:0;
}
.toc-placeholder strong{
color:var(--cl1);
display:block;
margin-bottom:12px;
font-size:22px;
text-align:center;
}