/* ========================================================================
   Phase 4 Step 1 — Sidebar TOC card

   JS populates .cai-toc-target with a <ul> of links to h2/h3 anchors in
   the article body. This file styles that list.

   Distinct from the in-content .cai-toc list (style.css section 9).
   That one is a horizontal 2-column TOC inside the article. This sidebar
   TOC is a vertical sticky reference.
   ======================================================================== */

/* --- The list — flat <ul> of h2s; nested <ul> for h3s --- */
.cai-toc-target ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
}
.cai-toc-target li {
  margin: 0;
  padding: 0;
}
.cai-toc-target a {
  display: block;
  padding: 0.32rem 0 0.32rem 0.7rem;
  margin-left: -0.7rem;
  border-left: 2px solid transparent;
  color: var(--cai-text-secondary);
  text-decoration: none;
  line-height: 1.4;
  transition: color var(--cai-duration-fast) var(--cai-easing),
              border-color var(--cai-duration-fast) var(--cai-easing),
              background-color var(--cai-duration-fast) var(--cai-easing);
}
.cai-toc-target a:hover {
  color: var(--cai-text-strong);
  background: var(--cai-btn-ghost-hover-bg);
}

/* --- Active item (current viewport heading) — set by IntersectionObserver --- */
.cai-toc-target a.is-active {
  color: var(--cai-primary-dark);
  border-left-color: var(--cai-primary);
  font-weight: 500;
}

/* --- h3 indent (nested ul inside h2 li) --- */
.cai-toc-target ul ul {
  margin-top: 0;
}
.cai-toc-target ul ul a {
  padding-left: 1.4rem;
  font-size: 0.81rem;
  color: var(--cai-text-muted);
}
.cai-toc-target ul ul a:hover {
  color: var(--cai-text);
}
.cai-toc-target ul ul a.is-active {
  color: var(--cai-primary-dark);
}

/* --- Loading / empty state — JS removes the .is-loading class once
       headings are parsed. Empty target collapses sidebar via :has(). --- */
.cai-toc-target.is-loading::before {
  content: "";
  display: block;
  height: 1.4rem;
  background: linear-gradient(
    90deg,
    var(--cai-bg-muted) 0%,
    var(--cai-bg-subtle) 50%,
    var(--cai-bg-muted) 100%
  );
  border-radius: var(--cai-radius-sm);
  animation: caiTocShimmer 1.2s ease-in-out infinite;
}
@keyframes caiTocShimmer {
  0%   { opacity: 0.6; }
  50%  { opacity: 1.0; }
  100% { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .cai-toc-target.is-loading::before { animation: none; }
  .cai-toc-target a { transition: none; }
}