/* ============================================================
   Table of contents (TOC)
   ============================================================ */
.toc {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 6px;
  margin-block: var(--space-section);
  max-width: var(--content-max);
}
.toc[hidden] { display: none; }

.toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  color: var(--color-gold);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  font-size: var(--fs-h2);
}
.toc__arrow svg { width: 22px; height: 22px; transition: transform var(--transition); }
.toc__toggle[aria-expanded="false"] .toc__arrow svg { transform: rotate(-90deg); }

.toc__panel {
  overflow: hidden;
  transition: height var(--transition-slow);
}
.toc__panel[hidden] { display: none; }

.toc__panel ol {
  display: flex;
  flex-direction: column;   /* one item per line, not a grid */
  gap: 2px;
  padding: 4px 8px 12px;
  counter-reset: toc;
}
.toc__panel li { display: block; }
.toc__panel a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-white);
  transition: color var(--transition), background-color var(--transition);
}
.toc__panel a::before {
  counter-increment: toc;
  content: counter(toc) ". ";
  color: var(--color-gold);
  font-weight: var(--fw-semibold);
}
.toc__panel a:hover { color: var(--color-gold); background: rgba(255,255,255,.03); }