/* TOC — Table of Contents sidebar (port from updn.pub) */

.toc-aside {
  display: none;
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  max-height: 70vh;
  overflow-y: auto;
  scroll-behavior: auto;
  z-index: 40;
  padding: 1rem 0 1rem 1rem;
  scrollbar-width: none;
}

.toc-aside::-webkit-scrollbar {
  display: none;
}

.toc-aside.visible {
  display: block;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-item {
  margin-bottom: 16px;
}

.toc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  color: inherit;
}

.toc-link:hover {
  text-decoration: none;
}

/* Indicator bars — width varies by depth */
.toc-line {
  flex-shrink: 0;
  height: 3px;
  background: #ccc;
  border-radius: 2px;
  transition: background 0.2s ease;
}

.toc-item[data-depth="2"] .toc-line { width: 12px; }
.toc-item[data-depth="3"] .toc-line { width: 8px; }
.toc-item[data-depth="4"] .toc-line { width: 5px; }

/* Text — hidden by default, visible on hover/active */
.toc-text {
  opacity: 0;
  color: #bbb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  transition: opacity 0.15s ease, color 0.15s ease;
}

/* Active state */
.toc-item.active .toc-line {
  background: #333;
}

.toc-item.active .toc-text {
  opacity: 1;
  color: #333;
  font-weight: 600;
}

/* Hover — reveal all text */
.toc-aside:hover .toc-text {
  opacity: 1;
  color: #bbb;
}

.toc-aside:hover .toc-item.active .toc-text {
  color: #333;
  font-weight: 600;
}

.toc-item:hover .toc-line { background: #333; }
.toc-item:hover .toc-text { color: #333 !important; font-weight: 600; }

/* Sweep animation state */
.toc-item.sweep .toc-line { background: #333; }
.toc-item.sweep .toc-text { opacity: 1; color: #333 !important; font-weight: 600; }

/* ===== Dark mode ===== */
html[data-theme="dark"] .toc-line { background: #555; }
html[data-theme="dark"] .toc-text { color: #666; }
html[data-theme="dark"] .toc-item.active .toc-line { background: #ddd; }
html[data-theme="dark"] .toc-item.active .toc-text { color: #ddd; }
html[data-theme="dark"] .toc-aside:hover .toc-text { color: #666; }
html[data-theme="dark"] .toc-aside:hover .toc-item.active .toc-text { color: #ddd; }
html[data-theme="dark"] .toc-item:hover .toc-line { background: #bbb; }
html[data-theme="dark"] .toc-item:hover .toc-text { color: #ddd !important; }
html[data-theme="dark"] .toc-item.sweep .toc-line { background: #bbb; }
html[data-theme="dark"] .toc-item.sweep .toc-text { color: #ddd !important; }