/* ===== TikZ.dev / lwarp TOC polish ===== */
@import url("lwarp.css") ;

/* ---------- Design tokens ---------- */
:root{
  --header-h: 56px;
  --radius: 12px;
  --ring: 2px;
  --gap: 14px;

  --bg: #ffffff;
  --fg: #1b1f24;
  --muted: #5b6472;
  --panel-bg: #f8f9fb;
  --panel-bd: #e8ebf0;
  --hover: #eef3ff;
  --accent: #2b6cf6;            /* tweak to your brand */
  --accent-weak: color-mix(in oklab, var(--accent) 22%, white);
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.08);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f1115;
    --fg: #e7ecf3;
    --muted: #9aa4b2;
    --panel-bg: #12151c;
    --panel-bd: #1e2430;
    --hover: #1a2234;
    --accent: #6da8ff;
    --accent-weak: color-mix(in oklab, var(--accent) 18%, black);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.32);
  }
}

/* Smooth scrolling to headings accounting for fixed header */
html{ scroll-behavior: smooth; }
:where(h1,h2,h3,h4,h5,h6)[id]{ scroll-margin-top: calc(var(--header-h) + 8px); }

/* Layout helpers for the two side TOCs */
.sidetoccontainer{
  position: sticky;
  top: var(--header-h);
  align-self: start;
  max-height: calc(100svh - var(--header-h));
  overflow: auto;
  padding: 0;
  z-index: 20;
  /* make iOS bounce less aggressive */
  overscroll-behavior: contain;
}

/* Card shell */
.sidetoc{
  background: var(--panel-bg);
  border: 1px solid var(--panel-bd);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: .95rem;
  line-height: 1.35;
}

/* Titles */
.sidetoctitle{
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 12px;
  margin: 0;
  background: linear-gradient(var(--panel-bg), color-mix(in oklab, var(--panel-bg) 80%, var(--bg)));
  border-bottom: 1px solid var(--panel-bd);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.sidetoctitle p{
  margin: 0;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .2px;
}
.sidetoctitle .sidetocthetitle{
  display: block;
  color: var(--fg);
  font-weight: 700;
}

/* Contents container */
.sidetoccontents{
  padding: 6px;
}

/* Reset lwarp’s paragraph wrappers to behave like a list */
.sidetoccontents p{
  margin: 0;
}

/* All TOC links share these styles */
.sidetoc a{
  display: block;
  padding: 8px 10px;
  margin: 2px 0;
  text-decoration: none;
  color: var(--fg);
  border-left: 2px solid transparent;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
}
.sidetoc a:hover{
  background: var(--hover);
  border-left-color: var(--accent-weak);
}
.sidetoc a:focus-visible{
  box-shadow: 0 0 0 var(--ring) color-mix(in oklab, var(--accent) 35%, transparent);
  background: color-mix(in oklab, var(--hover) 70%, transparent);
}

/* Hierarchy/indent per class emitted by lwarp */
.sidetoc a.linkintro{               /* “Introduction” link on chapter TOC */
  font-weight: 600;
}

.sidetoc a.tocpart{                 /* Top-level parts: Tutorials, tikz, gd, ... */
  font-weight: 600;
  padding-left: 12px;
  border-left-width: 3px;
}

.sidetoc a.tocchapter{
  padding-left: 18px;
  color: var(--fg);
}

.sidetoc a.tocsection{
  padding-left: 28px;
  color: var(--muted);
}

.sidetoc a.tocsubsection{
  padding-left: 38px;
  color: var(--muted);
  font-weight: 500;
}

/* Local “On this page” TOC uses .tocsubsection in your markup */
#local-toc-container .sidetoc a.tocsubsection{
  padding-left: 12px;
}

/* Current/active item (works with lwarp’s .current p wrapper or aria-current) */
.sidetoccontents p.current > a,
.sidetoc a[aria-current="true"]{
  font-weight: 700;
  background: color-mix(in oklab, var(--accent) 9%, var(--panel-bg));
  border-left-color: var(--accent);
}

/* Subtle divider between groups (optional – applied where p is empty in your HTML) */
.sidetoccontents p:has(> a):not(:first-child){
  border-top: 0;
}
.sidetoccontents p:empty{
  height: var(--gap);
}

/* Make long titles wrap nicely when container is narrow */
@container (max-width: 280px){
  .sidetoc a{
    white-space: normal;
  }
}

/* Compact the “On this page” TOC a bit */
#local-toc-container .sidetoc{
  font-size: .94rem;
}
#local-toc-container .sidetoctitle p{
  font-size: .92rem;
}

/* Scrollbar polish (safe to ignore where unsupported) */
.sidetoccontainer::-webkit-scrollbar{ width: 10px; height: 10px; }
.sidetoccontainer::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--fg) 18%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.sidetoccontainer:hover::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--fg) 28%, transparent);
}

/* ---------- Responsive behavior ---------- */

/* On narrow screens, slide the TOCs in from the left when a parent adds .nav-open.
   If your JS toggles a different class, swap .nav-open accordingly. */
@media (max-width: 1024px){
  .sidetoccontainer{
    position: fixed;
    inset: var(--header-h) auto 0 0;
    width: min(86vw, 340px);
    transform: translateX(-102%);
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
    box-shadow: var(--shadow);
  }
  /* Prioritize local TOC; stack chapter TOC beneath it */
  #chapter-toc-container{ top: calc(var(--header-h) + 8px); }
  body.nav-open #local-toc-container,
  .bodyandsidetoc.nav-open #local-toc-container{
    transform: translateX(0);
  }
  /* Show chapter TOC when a second class is present (optional pattern) */
  body.nav-open-chapter #chapter-toc-container,
  .bodyandsidetoc.nav-open-chapter #chapter-toc-container{
    transform: translateX(0);
  }

  /* Dim page when a TOC is open (requires an overlay element or :has()) */
  .bodyandsidetoc:has(#local-toc-container[style*="translateX(0)"]),
  .bodyandsidetoc:has(#chapter-toc-container[style*="translateX(0)"]){
    isolation: isolate;
  }
}

/* Allow the main body to breathe when both side TOCs are visible on wide screens.
   (Assumes a grid; if your grid already allocates space, you can remove this.) */
@media (min-width: 1200px){
  #local-toc-container{ margin-right: 10px; }
  #chapter-toc-container{ margin-right: 16px; }
}

/* ---------- Print ---------- */
@media print{
  .sidetoccontainer,
  #hamburger-button{ display: none !important; }
}

/* ---------- Small niceties ---------- */

/* Subtle section bullets using ::before without extra markup (only for deep levels) */
.sidetoc a.tocsection::before,
.sidetoc a.tocsubsection::before{
  content: "";
  display: inline-block;
  inline-size: .4em;
  block-size: .4em;
  margin-right: .55em;
  border-radius: 50%;
  background: color-mix(in oklab, var(--fg) 28%, transparent);
  translate: 0 -.05em;
}

/* Emphasize top-level parts with a left bar */
.sidetoc a.tocpart{
  border-left-color: var(--panel-bd);
}
.sidetoc a.tocpart:hover{
  border-left-color: var(--accent-weak);
}

/* Make the active item’s left bar slightly thicker for scanning */
.sidetoccontents p.current > a,
.sidetoc a[aria-current="true"]{
  border-left-width: 4px;
}

/* Bring the “Quick Links” block in line with the TOC styling (optional) */
.quicklinks{
  background: var(--panel-bg);
  border: 1px solid var(--panel-bd);
  border-radius: var(--radius);
  padding: 10px;
}
.quicklinks strong{ display:block; margin-bottom:6px; color:var(--muted); }
.quicklinks a{
  display:inline-block; margin: 3px 6px 3px 0; padding: 4px 8px;
  border-radius: 999px; background: var(--hover); text-decoration: none; color: var(--fg);
}
.quicklinks a:hover{ background: color-mix(in oklab, var(--accent) 12%, var(--hover)); }