/* ===========================
   TOC — Editorial Tabs (Pinterest / 2026)
   Visual only. Keeps swiper + .is-active logic.
=========================== */

:root{
  --tocMaxWidth: 1160px;

  --toc-ink: rgba(18,25,33,.92);
  --toc-muted: rgba(18,25,33,.62);

  --toc-pill-bg: rgba(255,255,255,.86);
  --toc-pill-bg2: rgba(255,255,255,.70);
  --toc-hairline: rgba(16,24,40,.10);
  --toc-hairline2: rgba(16,24,40,.14);

  --toc-shadow-soft: 0 10px 28px rgba(16,24,40,.06);
  --toc-shadow-active: 0 14px 40px rgba(16,24,40,.10);

  /* uses your global accents: --a --b --c */
  --toc-glow: radial-gradient(circle at 30% 30%, rgba(43,110,243,.22), transparent 55%),
              radial-gradient(circle at 70% 70%, rgba(255,77,141,.18), transparent 58%),
              radial-gradient(circle at 55% 35%, rgba(122,92,255,.14), transparent 60%);
  --toc-grad: linear-gradient(90deg, var(--a), var(--c), var(--b));
}

/* Wrapper */
.toc{ background: transparent; }

.toc.wrapper{
  width: min(var(--tocMaxWidth), 92vw);
  margin-inline:auto;
  padding-left:0 !important;
  padding-right:0 !important;
}

.toc .swiper{
  padding: 0 16px 14px !important;
  padding-top: 0 !important;
}

.toc .swiper-wrapper{
  padding-top: 10px;
  padding-bottom: 12px;
  justify-content:flex-start;
}

.toc .swiper-slide{ width: fit-content; }

/* =======================
   Tabs
======================= */

.toc a{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space: nowrap;

  height: 40px;
  padding: 0 18px;
  border-radius: 999px;

  text-decoration:none;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;

  color: var(--toc-ink);
  background: linear-gradient(180deg, var(--toc-pill-bg), var(--toc-pill-bg2));
  border: 1px solid var(--toc-hairline);

  /* “editorial” feel: no jumpy motion */
  box-shadow: none;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    filter .18s ease,
    transform .18s ease;
}

/* subtle underline track (always present, like iOS tabs) */
.toc a::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: -7px;
  height: 2px;
  border-radius: 999px;
  background: rgba(16,24,40,.10);
  opacity: .0;           /* hidden by default */
  transform: scaleX(.72);
  transform-origin: center;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
  pointer-events:none;
}

/* hover: clean highlight, no “lift” */
.toc a:hover,
.toc a:focus{
  border-color: var(--toc-hairline2);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  filter: saturate(1.02);
  transform: translateY(-1px);  /* tiny, premium */
}

.toc a:hover::after,
.toc a:focus::after{
  opacity: .75;
  transform: scaleX(.92);
}

/* Active = white chip + glow behind + gradient underline */
.toc a.is-active{
  background: rgba(255,255,255,.92);
  border-color: rgba(16,24,40,.14);
  color: var(--toc-ink);
  box-shadow: var(--toc-shadow-active);
  transform: translateY(-1px);
}

/* glow behind active (not filling the chip) */
.toc a.is-active::before{
  content:"";
  position:absolute;
  inset:-18px -22px;
  border-radius: 999px;
  background: var(--toc-glow);
  opacity: .75;
  filter: blur(10px);
  z-index: -1;
  pointer-events:none;
}

/* active underline indicator */
.toc a.is-active::after{
  opacity: 1;
  transform: scaleX(1);
  background: var(--toc-grad);
}

/* keep compatibility for .is-active--cyan */
.toc a.is-active--cyan{
  background: rgba(255,255,255,.92);
  border-color: rgba(16,24,40,.14);
  color: var(--toc-ink);
}
.toc a.is-active--cyan::before{
  content:"";
  position:absolute;
  inset:-18px -22px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 40%, rgba(43,110,243,.26), transparent 58%),
              radial-gradient(circle at 70% 60%, rgba(122,92,255,.18), transparent 62%);
  opacity: .8;
  filter: blur(10px);
  z-index: -1;
  pointer-events:none;
}
.toc a.is-active--cyan::after{
  opacity: 1;
  transform: scaleX(1);
  background: var(--toc-grad);
}

/* Press */
.toc a:active{
  transform: translateY(0);
}

/* =======================
   Scrollbar — minimal
======================= */

.toc-swiper{
  max-width: var(--tocMaxWidth);
  margin-inline:auto;
}

.toc-swiper .swiper-scrollbar{
  background: rgba(16,24,40,.08);
  height: 2px;
  border-radius: 999px;
}

.toc-swiper .swiper-scrollbar-drag{
  background: rgba(16,24,40,.28);
  border-radius: 999px;
}

/* full width */
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal{
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* =======================
   Mobile
======================= */
@media (max-width: 750px){
  .toc.wrapper{ width: min(100vw, 92vw); }

  .swiper-horizontal > .swiper-scrollbar,
  .swiper-scrollbar.swiper-scrollbar-horizontal{
    width: 92% !important;
    margin: 0 auto;
  }

  .toc .swiper-wrapper{
    padding-top: 8px;
    padding-bottom: 10px;
  }

  .toc a{
    height: 36px;
    padding: 0 16px;
    font-size: 10.5px;
    letter-spacing: .11em;
  }

  .toc a::after{
    bottom: -6px;
  }
}