/* ================================================================
   BrainyDock TOC — matches AcademicHub Premium theme exactly
   Colors: --bg:#0C0820  --purple:#8B5CF6  --magenta:#C026D3
           --lilac:#C4B5FD  --border:rgba(196,173,245,.14)
   ================================================================ */

/* ── Fonts (same as theme) ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=DM+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

/* ── Root vars (fallback if theme not loaded) ── */
.bdtoc {
  --bd-bg:        #0C0820;
  --bd-surface:   rgba(255,255,255,.045);
  --bd-surface2:  rgba(255,255,255,.07);
  --bd-border:    rgba(196,173,245,.16);
  --bd-border-b:  rgba(196,173,245,.32);
  --bd-purple:    #8B5CF6;
  --bd-purple2:   #A855F7;
  --bd-magenta:   #C026D3;
  --bd-lilac:     #C4B5FD;
  --bd-txt:       #F3F0FF;
  --bd-muted:     #A79EC6;
  --bd-muted2:    #7E769B;
}

/* ── Container ── */
.bdtoc {
  position: relative;
  background: linear-gradient(165deg, rgba(124,58,237,.13), rgba(192,38,211,.06));
  border: 1px solid var(--bd-border-b);
  border-radius: 18px;
  padding: 0;
  margin: 2rem 0 2.2rem;
  overflow: hidden;
  backdrop-filter: blur(12px);
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 8px 40px -12px rgba(124,58,237,.45),
              inset 0 1px 0 rgba(255,255,255,.07);
}

/* Animated top border line */
.bdtoc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #7C3AED, #A855F7, #E879F9, #C026D3, #7C3AED);
  background-size: 200% auto;
  animation: bdtoc-shine 4s linear infinite;
}
@keyframes bdtoc-shine {
  to { background-position: 200% center; }
}

/* Subtle glow orb */
.bdtoc::after {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(168,85,247,.18), transparent 70%);
  top: -100px; right: -60px;
  pointer-events: none;
  filter: blur(30px);
  z-index: 0;
}

/* ── Header ── */
.bdtoc-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--bd-border);
  position: relative;
  z-index: 2;
  cursor: pointer;
  user-select: none;
}

.bdtoc-icon {
  font-size: 1.1rem;
  background: linear-gradient(135deg, #A855F7, #E879F9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  flex-shrink: 0;
  line-height: 1;
}

.bdtoc-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  color: #fff;
  flex: 1;
}

.bdtoc-toggle {
  background: rgba(168,85,247,.15);
  border: 1px solid rgba(196,173,245,.25);
  border-radius: 8px;
  color: var(--bd-lilac);
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: .85rem;
  transition: background .2s, transform .3s;
  flex-shrink: 0;
  line-height: 1;
}
.bdtoc-toggle:hover {
  background: rgba(168,85,247,.3);
}
.bdtoc.collapsed .bdtoc-toggle {
  transform: rotate(-90deg);
}

/* ── List ── */
.bdtoc-list {
  list-style: none;
  margin: 0;
  padding: .7rem 1.3rem 1rem;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  transition: all .3s ease;
}

.bdtoc.collapsed .bdtoc-list {
  display: none;
}

/* ── Items ── */
.bdtoc-item {
  position: relative;
}

.bdtoc-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .48rem .7rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--bd-muted);
  font-size: .9rem;
  font-weight: 500;
  transition: background .2s, color .2s, padding-left .2s;
  border: 1px solid transparent;
  line-height: 1.4;
}

.bdtoc-link:hover {
  background: rgba(168,85,247,.12);
  border-color: rgba(196,173,245,.2);
  color: #fff;
  padding-left: 1rem;
}

/* Active link (highlighted while reading) */
.bdtoc-link.bdtoc-active {
  background: linear-gradient(90deg, rgba(139,92,246,.2), rgba(192,38,211,.1));
  border-color: rgba(168,85,247,.4);
  color: var(--bd-lilac);
}

.bdtoc-link.bdtoc-active .bdtoc-num {
  background: linear-gradient(145deg, #8B5CF6, #A855F7);
  color: #fff;
  box-shadow: 0 0 12px -2px rgba(168,85,247,.8);
}

/* Number badge */
.bdtoc-num {
  font-family: 'DM Mono', monospace;
  font-size: .72rem;
  font-weight: 500;
  color: var(--bd-lilac);
  background: rgba(168,85,247,.12);
  border: 1px solid rgba(196,173,245,.2);
  border-radius: 6px;
  min-width: 24px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}

/* Empty num for h3 sub items */
.bdtoc-num:empty {
  background: none;
  border: none;
  min-width: 10px;
}

/* Sub-items (h3) */
.bdtoc-sub .bdtoc-link {
  padding-left: 2.1rem;
  font-size: .85rem;
  color: var(--bd-muted2);
}
.bdtoc-sub .bdtoc-link::before {
  content: '└';
  position: absolute;
  left: 1.2rem;
  color: rgba(196,173,245,.3);
  font-size: .75rem;
}
.bdtoc-sub .bdtoc-link:hover {
  padding-left: 2.4rem;
  color: var(--bd-muted);
}

/* ── Progress bar inside TOC ── */
.bdtoc-progress {
  height: 2px;
  background: rgba(255,255,255,.06);
  margin: 0 1.3rem .8rem;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.bdtoc-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8B5CF6, #C026D3);
  border-radius: 4px;
  transition: width .2s;
}

/* ── Reading progress label ── */
.bdtoc-footer {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.3rem .9rem;
  position: relative;
  z-index: 2;
}
.bdtoc-footer-txt {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bd-muted2);
}
.bdtoc-footer-pct {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  color: var(--bd-lilac);
  margin-left: auto;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .bdtoc {
    border-radius: 14px;
    margin: 1.5rem 0;
  }
  .bdtoc-link {
    font-size: .85rem;
  }
  .bdtoc-sub .bdtoc-link {
    font-size: .8rem;
  }
}