/* ============================================================
   Smart Table of Contents — smart-toc.css
   ============================================================ */

/* ── CSS Custom Properties (defaults, overridden inline) ─── */
.smart-toc {
  --stoc-accent:    #4f46e5;
  --stoc-text:      #1f2937;
  --stoc-bg:        #f9fafb;
  --stoc-border:    #e5e7eb;
  --stoc-hover-bg:  rgba(79,70,229,.07);
  --stoc-active-bg: rgba(79,70,229,.12);
  --stoc-radius:    12px;
  --stoc-font-size: 14px;
  --stoc-shadow:    0 2px 12px rgba(0,0,0,.08);
}

/* ── Base Container ─────────────────────────────────────────── */
.smart-toc {
  background:    var(--stoc-bg);
  border:        1px solid var(--stoc-border);
  border-radius: var(--stoc-radius);
  box-shadow:    var(--stoc-shadow);
  color:         var(--stoc-text);
  font-size:     var(--stoc-font-size);
  line-height:   1.6;
  margin:        1.8em 0;
  padding:       0;
  max-width:     380px;
  width:         100%;
  transition:    box-shadow .25s;
  scroll-margin-top: 80px;
}

.smart-toc:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
}

/* ── Header ─────────────────────────────────────────────────── */
.stoc-header {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       14px 18px;
  border-bottom: 1px solid var(--stoc-border);
  background:    linear-gradient(135deg, var(--stoc-accent) 0%, color-mix(in srgb, var(--stoc-accent) 75%, #7c3aed) 100%);
  border-radius: var(--stoc-radius) var(--stoc-radius) 0 0;
}

.stoc-icon {
  font-size: 1.1em;
}

.stoc-title {
  flex:        1;
  font-weight: 700;
  font-size:   1em;
  color:       #fff;
  letter-spacing: .02em;
}

.stoc-toggle {
  background:  rgba(255,255,255,.2);
  border:      1px solid rgba(255,255,255,.35);
  border-radius: 4px;
  color:       #fff;
  cursor:      pointer;
  font-size:   .78em;
  padding:     2px 9px;
  transition:  background .2s;
}
.stoc-toggle:hover {
  background: rgba(255,255,255,.35);
}

/* ── Body / List ─────────────────────────────────────────────── */
.stoc-body {
  padding: 14px 18px;
}

.stoc-list,
.stoc-sublist {
  list-style: none;
  margin:     0;
  padding:    0;
}

.stoc-numbered.stoc-list,
.stoc-numbered .stoc-sublist {
  list-style: decimal;
  padding-left: 18px;
}

.stoc-item {
  margin: 3px 0;
}

.stoc-sublist {
  padding-left: 16px;
  margin-top:   3px;
}

/* ── Links ───────────────────────────────────────────────────── */
.stoc-link {
  color:           var(--stoc-text);
  text-decoration: none;
  display:         block;
  padding:         4px 8px;
  border-radius:   6px;
  transition:      background .18s, color .18s, padding-left .18s;
  border-left:     2px solid transparent;
  word-break:      break-word;
}

.stoc-link:hover {
  background:   var(--stoc-hover-bg);
  color:        var(--stoc-accent);
  padding-left: 12px;
  border-left-color: var(--stoc-accent);
}

.stoc-link.stoc-active {
  background:       var(--stoc-active-bg);
  color:            var(--stoc-accent);
  font-weight:      600;
  border-left-color: var(--stoc-accent);
  padding-left:     12px;
}

/* ── Level indentation ────────────────────────────────────────── */
.stoc-level-3 .stoc-link { padding-left: 12px; font-size: .95em; }
.stoc-level-4 .stoc-link { padding-left: 20px; font-size: .90em; opacity: .85; }
.stoc-level-5 .stoc-link { padding-left: 28px; font-size: .85em; opacity: .75; }
.stoc-level-6 .stoc-link { padding-left: 36px; font-size: .82em; opacity: .70; }

/* ── Sticky ───────────────────────────────────────────────────── */
.stoc-sticky {
  position: sticky;
  top: 20px;
  align-self: start;
}

/* ── Themes ───────────────────────────────────────────────────── */

/* Dark */
.stoc-theme-dark {
  --stoc-bg:       #1e1e2e;
  --stoc-text:     #cdd6f4;
  --stoc-border:   #313244;
  --stoc-hover-bg: rgba(137,180,250,.1);
  --stoc-active-bg:rgba(137,180,250,.18);
  --stoc-shadow:   0 4px 20px rgba(0,0,0,.4);
}

/* Minimal */
.stoc-theme-minimal {
  --stoc-bg:     transparent;
  --stoc-shadow: none;
  border-color:  var(--stoc-accent);
  border-left-width: 3px;
  border-radius: 0;
}
.stoc-theme-minimal .stoc-header {
  background:    transparent;
  border-radius: 0;
}
.stoc-theme-minimal .stoc-title { color: var(--stoc-accent); }
.stoc-theme-minimal .stoc-toggle { color: var(--stoc-accent); background: transparent; border-color: var(--stoc-accent); }

/* Bordered */
.stoc-theme-bordered {
  --stoc-bg:    #fff;
  --stoc-shadow:none;
  border:       2px solid var(--stoc-accent);
}

/* ── Reading Progress Bar ─────────────────────────────────────── */
#stoc-progress-bar {
  position:   fixed;
  top:        0;
  left:       0;
  height:     3px;
  width:      0%;
  background: linear-gradient(90deg, var(--stoc-accent, #4f46e5), #7c3aed);
  z-index:    99999;
  transition: width .1s linear;
}

/* ── Back to Top Button ───────────────────────────────────────── */
#stoc-back-top {
  position:      fixed;
  bottom:        28px;
  right:         28px;
  width:         44px;
  height:        44px;
  border-radius: 50%;
  background:    var(--stoc-accent, #4f46e5);
  color:         #fff;
  border:        none;
  cursor:        pointer;
  font-size:     20px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  box-shadow:    0 4px 14px rgba(0,0,0,.2);
  opacity:       0;
  transform:     translateY(12px);
  transition:    opacity .3s, transform .3s;
  z-index:       9999;
}
#stoc-back-top.visible {
  opacity:   1;
  transform: translateY(0);
}
#stoc-back-top:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

/* ── Collapsed ───────────────────────────────────────────────── */
.smart-toc.stoc-collapsed .stoc-header {
  border-radius: var(--stoc-radius);
}

/* ── Scroll anchor spacing ────────────────────────────────────── */
[id] {
  scroll-margin-top: 90px;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .smart-toc { max-width: 100%; }
  .stoc-sticky { position: static; }
}

/* ── Fade-in animation ────────────────────────────────────────── */
@keyframes stocFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);     }
}

.smart-toc {
  animation: stocFadeIn .4s ease;
}