/* ==================== TABLE OF CONTENTS ==================== */
/* Shared sticky, collapsible TOC component (guide + modlist).
   Load AFTER the page stylesheet: page-wide link and list rules (e.g. in guide.css)
   have the same specificity and must not override the TOC.
   Pages may set the --toc-* tokens (defaults in the var() fallbacks below) and add
   their own margin, transition and link layout. */

.guide-toc {
  /* Glass rim like the cyan note boxes, but quieter: a faint outer and inner glow
     keeps the TOC visible against the background without competing with content */
  border: 1px solid rgba(95, 208, 255, 0.32);
  border-radius: var(--toc-radius, 10px);
  box-shadow:
    0 0 6px rgba(95, 208, 255, 0.10),
    inset 0 0 14px rgba(95, 208, 255, 0.06);

  background: linear-gradient(180deg, var(--bg1), var(--bg2));

  position: sticky;
  top: var(--toc-sticky-top, 10px);
  z-index: 10;

  overflow: hidden;
}

/* Floating over the text: slightly stronger rim and glow, plus the lift shadow */
.guide-toc.compact {
  border-color: rgba(95, 208, 255, 0.40);
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.18),
    0 0 8px rgba(95, 208, 255, 0.14),
    inset 0 0 14px rgba(95, 208, 255, 0.07);
}

/* TOGGLE */

.guide-toc-toggle {
  width: 100%;
  text-align: left;
  padding: 6px 18px;

  background: none;
  border: none;

  color: var(--accent);
  cursor: pointer;

  font-size: 1.1rem;
  font-weight: 500;

  display: flex;
  align-items: center;
  justify-content: space-between;

  text-shadow:
    0 0 6px rgba(95, 208, 255, 0.25);

  transition:
    background 0.2s ease,
    text-shadow 0.2s ease;
}

.guide-toc-toggle:hover {
  background: rgba(255, 255, 255, 0.02);
  text-shadow:
    0 0 8px rgba(95, 208, 255, 0.4);
}

.guide-toc-toggle::after {
  content: "+";
  font-size: 1.6rem;
  line-height: 1;
}

.guide-toc.open .guide-toc-toggle::after {
  content: "−";
}

/* CONTENT */

.guide-toc-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 18px;

  transition:
    max-height .28s cubic-bezier(0.22, 1, 0.36, 1),
    padding .28s cubic-bezier(0.22, 1, 0.36, 1);
}

.guide-toc.open .guide-toc-content {
  max-height: min(var(--toc-open-max, 560px), 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 18px 14px;
}

.guide-toc.open.compact .guide-toc-content {
  min-height: var(--toc-compact-min, 250px);
  max-height: var(--toc-compact-max, 20vh);
  overflow-y: auto;
}

/* SCROLLBAR STYLING */

.guide-toc-content::-webkit-scrollbar {
  width: 4px;
}

.guide-toc-content::-webkit-scrollbar-track {
  background: transparent;
}

.guide-toc-content::-webkit-scrollbar-thumb {
  background: rgba(95, 208, 255, 0);
  border-radius: 2px;
  transition: background 0.3s ease;
}

/* Show scrollbar only in compact mode when hovering TOC */
.guide-toc.compact:hover .guide-toc-content::-webkit-scrollbar-thumb {
  background: rgba(95, 208, 255, 0.25);
}

.guide-toc.compact .guide-toc-content::-webkit-scrollbar-thumb:hover {
  background: rgba(95, 208, 255, 0.45);
}

/* Firefox scrollbar - hidden by default, visible on compact hover */
.guide-toc-content {
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: auto;
}

.guide-toc.compact:hover .guide-toc-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 208, 255, 0.25) transparent;
}

/* Fade the end of the open list; only when open, since the collapsed compact TOC
   is barely taller than the fade and it would darken the toggle text */
.guide-toc.open.compact::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;

  background: linear-gradient(to bottom, transparent, var(--bg2));
  pointer-events: none;
}

/* LISTS */

.guide-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.guide-toc li {
  margin: 2px 0;
  border-bottom: none;
  position: relative;
}

.guide-toc li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(95, 208, 255, 0.18), transparent);
}

.guide-toc li:last-child::after {
  display: none;
}

/* LINKS */

/* border-radius is set per page: the guide's .toc-row links use their own corners */
.guide-toc a {
  border-bottom: none;

  color: var(--muted);
  text-decoration: none;
}

.guide-toc a:hover {
  color: var(--accent);
}