/* =============================================================================
   TABLE OF CONTENTS — Sticky collapsible bar
   ============================================================================= */

.toc {
  position: sticky;
  top: calc(var(--header-height) + var(--space-3));
  z-index: var(--z-raised);
  margin-block: var(--space-3);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base), top var(--transition-base);
}

/* When header shrinks on scroll, adjust sticky top */
.is-scrolled ~ * .toc,
body:has(.site-header.is-scrolled) .toc {
  top: calc(var(--header-height-scroll) + var(--space-2));
}

.toc:has(.toc__panel.is-open) {
  box-shadow: var(--shadow-xl);
}

/* Hide entirely if JS finds no headings */
.toc.toc--empty {
  display: none;
}

/* ---------------------------------------------------------------------------
   TRIGGER BUTTON
--------------------------------------------------------------------------- */

.toc__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-align: left;
  transition: background var(--transition-fast);
}

.toc__trigger:hover {
  background: var(--color-bg-secondary);
}

.toc__trigger-icon {
  color: var(--color-brand);
  flex-shrink: 0;
}

.toc__trigger-label {
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* Active heading title — scrolls in */
.toc__trigger-current {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-brand-text);
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-border);
  margin-left: var(--space-1);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.toc__trigger-current.is-visible {
  opacity: 1;
}

/* Chevron rotates when open */
.toc__trigger-chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition-base);
  margin-left: auto;
}

.toc__trigger[aria-expanded="true"] .toc__trigger-chevron {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   PANEL — slide open/close
--------------------------------------------------------------------------- */

.toc__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms cubic-bezier(0.4, 0, 0.2, 1);
  border-top: 0px solid var(--color-border);
}

.toc__panel.is-open {
  max-height: 60vh;
  border-top-width: 1px;
}

.toc__list {
  overflow-y: auto;
  max-height: calc(60vh - 2px);
}

/* ---------------------------------------------------------------------------
   LIST
--------------------------------------------------------------------------- */

.toc__list {
  list-style: none;
  margin: 0;
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  max-height: calc(60vh - 2px);
}

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

/* h3 indent */
.toc__item--h3 {
  padding-left: var(--space-5);
}

.toc__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  line-height: 1.4;
  transition: background var(--transition-fast), color var(--transition-fast),
              padding-left var(--transition-fast);
  border-left: 2px solid transparent;
}

.toc__num {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand);
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
}

.toc__item--h3 .toc__link {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.toc__link:hover {
  background: var(--color-brand-subtle);
  color: var(--color-brand-text);
  padding-left: var(--space-4);
}

/* Active — currently in view */
.toc__item.is-active > .toc__link {
  background: var(--color-brand-subtle);
  color: var(--color-brand-text);
  font-weight: var(--font-semibold);
  border-left-color: var(--color-brand);
  padding-left: var(--space-4);
}

/* ---------------------------------------------------------------------------
   DARK MODE
--------------------------------------------------------------------------- */

html[data-theme="dark"] .toc,
@media (prefers-color-scheme: dark) {
  .toc {
    background: var(--color-surface);
    border-color: var(--color-border);
  }
}

/* ---------------------------------------------------------------------------
   HEADING HIGHLIGHT — blink/flash when jumped to via TOC link
--------------------------------------------------------------------------- */

@keyframes toc-heading-flash {
  0%   { background-color: transparent; }
  25%  { background-color: var(--color-brand-subtle); }
  75%  { background-color: var(--color-brand-subtle); }
  100% { background-color: transparent; }
}

.toc-heading-highlight {
  animation: toc-heading-flash 1.2s ease-out;
  border-radius: var(--radius-sm);
  padding-inline: var(--space-1);
  margin-inline: calc(-1 * var(--space-1));
}