{% extends "base.html" %}

{#- The section nav is merged into the header (see partials/header.html),
    so suppress the separate tabs bar. -#}
{% block tabs %}{% endblock %}

{#- Left sidebar: Wikipedia-style vertical logo banner above the nav -#}
{% block site_nav %}
  {% if nav %}
    {% if page.meta and page.meta.hide %}
      {% set hidden = "hidden" if "navigation" in page.meta.hide %}
    {% endif %}
    <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" {{ hidden }}>
      <div class="md-sidebar__scrollwrap">
        <div class="md-sidebar__inner">

          {#- Vertical logo banner (emblem + wordmark beneath it) -#}
          <div class="pycauset-logo-banner">
            <a href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}">
              {% if config.theme.logo %}
                <img src="{{ config.theme.logo | url }}" alt="PyCauset logo" class="pycauset-logo-banner__emblem">
              {% endif %}
            </a>
            {% if config.extra.logo_text %}
              <img src="{{ config.extra.logo_text | url }}" alt="PyCauset" class="pycauset-logo-banner__wordmark">
            {% endif %}
          </div>

          {% include "partials/nav.html" %}
        </div>
      </div>
    </div>
    {% if "toc.integrate" not in features %}
      {% if page.meta and page.meta.hide %}
        {% set hidden = "hidden" if "toc" in page.meta.hide %}
      {% endif %}
      <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" {{ hidden }}>
        <div class="md-sidebar__scrollwrap">
          <div class="md-sidebar__inner">
            {% include "partials/toc.html" %}
          </div>
        </div>
      </div>
    {% endif %}
  {% endif %}
{% endblock %}

{% block extrahead %}
  {{ super() }}

  <style>
    /*
      PyCauset docs skin
      - stays within Material theme variables
      - “physics notebook / cosmic grid” vibe without sacrificing readability
    */

    /* Slightly narrower, more readable measure on wide screens */
    .md-grid {
      max-width: 72rem;
    }

    /* Branded header gradient */
    .md-header {
      /* Fallback gradient */
      background: linear-gradient(90deg, var(--md-primary-fg-color), var(--md-accent-fg-color));
      background:
        linear-gradient(
          90deg,
          color-mix(in srgb, var(--md-primary-fg-color) 92%, black),
          color-mix(in srgb, var(--md-accent-fg-color) 60%, var(--md-primary-fg-color))
        );
    }

    .md-header__title {
      letter-spacing: 0.02em;
    }

    /* The static site-name topic is redundant with the sidebar logo banner
       on wide screens; keep only the current page title there. */
    @media (min-width: 76.25em) {
      .pycauset-title .md-header__topic:not([data-md-component="header-topic"]) {
        display: none;
      }
    }

    /* ============================================================
       Header: title + inline section nav pills in one bar.
       The recognizable logo lives in the left sidebar banner below.
       ============================================================ */

    /* Inline section nav (formerly the .md-tabs bar) */
    .pycauset-nav {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      list-style: none;
      margin: 0 0 0 0.5rem;
      padding: 0;
      flex-wrap: wrap;
    }

    .pycauset-nav__item {
      margin: 0;
    }

    .pycauset-nav__link {
      display: inline-block;
      padding: 0.35rem 0.75rem;
      border-radius: 2rem;
      color: var(--md-primary-bg-color);
      font-size: 0.8rem;
      font-weight: 500;
      opacity: 0.85;
      transition: opacity 0.15s ease, background 0.15s ease;
      white-space: nowrap;
    }

    .pycauset-nav__link:hover,
    .pycauset-nav__item--active .pycauset-nav__link {
      opacity: 1;
      background: rgba(255, 255, 255, 0.14);
    }

    /* Push the palette/search/source controls to the right */
    .md-header__option,
    .md-search,
    .md-header__source {
      margin-left: auto;
    }

    .md-header__option + .md-search,
    .md-search + .md-header__source {
      margin-left: 0;
    }

    /* Hide the inline nav on narrow screens (the drawer sidebar takes over) */
    @media (max-width: 76.1875em) {
      .pycauset-nav {
        display: none;
      }
    }

    /* ============================================================
       Left sidebar: Wikipedia-style vertical logo banner
       ============================================================ */

    .pycauset-logo-banner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.6rem;
      padding: 1.5rem 1rem 1.25rem;
      text-align: center;
    }

    .pycauset-logo-banner a {
      display: block;
      line-height: 0;
    }

    .pycauset-logo-banner__emblem {
      height: 187px;
      width: auto;
      display: block;
      filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28));
    }

    .pycauset-logo-banner__wordmark {
      height: auto;
      width: 350px;
      max-width: 100%;
      display: block;
      margin: 0 auto;
    }

    /* When the nav drawer is used (mobile), collapse the banner */
    @media (max-width: 76.1875em) {
      .pycauset-logo-banner {
        padding: 1rem 1rem 0.75rem;
      }
      .pycauset-logo-banner__emblem {
        height: 130px;
      }
      .pycauset-logo-banner__wordmark {
        width: 270px;
      }
    }

    /* Distinctive h1/h2 underline, still theme-driven */
    .md-typeset h1,
    .md-typeset h2 {
      position: relative;
    }

    .md-typeset h1::after,
    .md-typeset h2::after {
      content: "";
      display: block;
      height: 2px;
      width: min(18rem, 60%);
      margin-top: 0.35rem;
      background: linear-gradient(90deg, var(--md-accent-fg-color), transparent);
      opacity: 0.9;
    }

    /* Links: gentle underline-on-hover */
    .md-typeset a {
      text-underline-offset: 0.18em;
      text-decoration-thickness: 0.08em;
    }

    .md-typeset a:hover {
      text-decoration-thickness: 0.14em;
    }

    /* Code blocks: subtle border for separation */
    .md-typeset pre {
      border: 1px solid rgba(127, 127, 127, 0.22);
      border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 14%, transparent);
      border-radius: 0.35rem;
    }

    /* Mermaid: keep diagrams crisp */
    .mermaid {
      overflow-x: auto;
    }

    /* ============================================================
       PyCauset "pizzazz" layer
       Theme-variable driven, so light/dark both look intentional.
       ============================================================ */

    /* --- Header: slow-drifting aurora gradient + logo glow --- */
    .md-header {
      background-size: 200% 200%;
      animation: pycauset-aurora 24s ease-in-out infinite;
    }

    @keyframes pycauset-aurora {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .md-header__logo img {
      filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
      border-radius: 4px;
    }

    /* --- Home hero --- */
    .pycauset-hero {
      text-align: center;
      padding: 2.5rem 1rem 1.5rem;
      margin-bottom: 1rem;
      position: relative;
      border-radius: 0.75rem;
    }

    /* Soft "spacetime glow" behind the hero */
    .pycauset-hero::before {
      content: "";
      position: absolute;
      inset: -1rem -2rem;
      z-index: -1;
      background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--md-accent-fg-color) 22%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at 15% 100%, color-mix(in srgb, var(--md-primary-fg-color) 16%, transparent) 0%, transparent 55%);
    }

    .pycauset-hero__logos {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
      margin: 0 auto 1rem;
    }

    .pycauset-hero__logo {
      width: 190px;
      height: auto;
      filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25));
    }

    .pycauset-hero__text {
      width: 400px;
      height: auto;
    }

    .pycauset-hero h1 {
      margin: 0 0 0.5rem;
      font-size: 2.6rem;
      letter-spacing: -0.02em;
      background: linear-gradient(
        120deg,
        var(--md-primary-fg-color),
        var(--md-accent-fg-color)
      );
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    .pycauset-hero h1::after {
      display: none;
    }

    .pycauset-hero__tagline {
      font-size: 1.15rem;
      line-height: 1.55;
      max-width: 44rem;
      margin: 0 auto 1.4rem;
      opacity: 0.85;
    }

    .pycauset-hero__cta {
      display: flex;
      gap: 0.6rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    .pycauset-hero__cta .md-button {
      border-radius: 2rem;
      padding: 0.55em 1.6em;
    }

    .pycauset-hero__cta .md-button--primary {
      background: linear-gradient(120deg, var(--md-primary-fg-color), var(--md-accent-fg-color));
      border-color: transparent;
      box-shadow: 0 4px 14px color-mix(in srgb, var(--md-accent-fg-color) 35%, transparent);
    }

    /* --- Doc-section cards (Material `.grid.cards`) --- */
    .md-typeset .grid.cards > ul > li {
      border-radius: 0.7rem;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .md-typeset .grid.cards > ul > li:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px color-mix(in srgb, var(--md-default-fg-color) 18%, transparent);
    }

    .md-typeset .grid.cards > ul > li hr {
      margin: 0.6em 0;
    }

    /* --- Back to top: gradient pill --- */
    .md-top {
      background: linear-gradient(120deg, var(--md-primary-fg-color), var(--md-accent-fg-color));
      color: var(--md-primary-bg-color);
      border-radius: 2rem;
      box-shadow: 0 4px 14px color-mix(in srgb, var(--md-primary-fg-color) 30%, transparent);
    }

    /* --- Selection: brand-tinted --- */
    ::selection {
      background: color-mix(in srgb, var(--md-accent-fg-color) 30%, transparent);
    }

    /* --- Scrollbar: subtle, theme-aware --- */
    @media (min-width: 76.25em) {
      ::-webkit-scrollbar { width: 10px; height: 10px; }
      ::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--md-default-fg-color) 22%, transparent);
        border-radius: 5px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--md-accent-fg-color) 45%, transparent);
      }
    }

    /* --- Code blocks: gradient accent bar on top --- */
    .md-typeset pre {
      position: relative;
      overflow: hidden;
    }

    .md-typeset pre::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--md-accent-fg-color), transparent);
    }

    /* --- Data tables: gentle row hover --- */
    .md-typeset table tbody tr:hover {
      background: color-mix(in srgb, var(--md-accent-fg-color) 6%, transparent);
    }

    /* --- Screen-reader-only utility (e.g. hero h1) --- */
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }

    /* --- Announcement bar --- */
    .md-banner {
      background: linear-gradient(120deg, var(--md-primary-fg-color), var(--md-accent-fg-color));
      color: var(--md-primary-bg-color);
      font-size: 0.72rem;
    }

    .md-banner a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 0.15em;
    }

    /* ============================================================
       Animated causal-set background ("spacetime diagram")
       ============================================================ */

    /* Canvas layer: fixed, behind content but above the page colour */
    #pycauset-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* Frosted card behind the article column: fairly translucent so the
       animated causal-set background shows through, blurred for readability. */
    .md-content {
      position: relative;
      z-index: 1;
      background: color-mix(in srgb, var(--md-default-bg-color) 62%, transparent);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      border-radius: 0.75rem;
      border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 10%, transparent);
      box-shadow: 0 10px 34px color-mix(in srgb, var(--md-default-fg-color) 9%, transparent);
      margin: 0.6rem 0.25rem;
      padding: 0.15rem 0.75rem;
    }

    @media (max-width: 76.1875em) {
      /* Single column: card should hug the viewport, not float */
      .md-content {
        margin: 0.6rem 0;
        border-radius: 0.5rem;
        padding: 0.15rem 0.6rem;
      }
    }
  </style>

  <script>
    // MathJax configuration must run before the MathJax script loads.
    window.MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        displayMath: [['$$', '$$'], ['\\[', '\\]']],
        processEscapes: true,
        processEnvironments: true
      },
      options: {
        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
    };
  </script>
  <script defer src="https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js"></script>
{% endblock %}

{% block scripts %}
  {{ super() }}

  <script>
    // Re-typeset math after MkDocs Material's `navigation.instant` swaps page
    // content in place. Instant navigation loads new articles over fetch and
    // replaces the DOM, but MathJax only typesets on the initial page load.
    //
    // Robustness notes (this has broken repeatedly):
    // - Material's instant navigation REPLACES the <main> element (and with it
    //   .md-content) with the fetched document's node. An observer attached to
    //   .md-content is therefore observing a detached node after the first
    //   navigation and silently stops firing — math breaks on every page after
    //   the first navigation. We observe document.body, which Material never
    //   replaces, so the observer survives all navigations.
    // - MathJax may still be loading when the first content swap happens; if
    //   typesetPromise is unavailable we queue the typeset until the startup
    //   promise resolves instead of dropping it.
    (function () {
      const scheduleTypeset = () => {
        const mj = window.MathJax;
        if (!mj) return;
        clearTimeout(scheduleTypeset._t);
        scheduleTypeset._t = setTimeout(() => {
          const run = () => mj.typesetPromise && mj.typesetPromise().catch(() => {});
          // Wait for MathJax to finish loading if it hasn't yet.
          const startup = mj.startup && mj.startup.promise;
          if (startup && startup.state === 'pending') {
            startup.then(run);
          } else {
            run();
          }
        }, 60);
      };

      const hasMath = (node) => {
        if (node.nodeType !== 1) return false;
        if (node.matches && node.matches('.arithmatex')) return true;
        return !!(node.querySelector && node.querySelector('.arithmatex'));
      };

      const watch = (root) => {
        if (!root) return;
        const observer = new MutationObserver((mutations) => {
          for (const m of mutations) {
            if (m.type !== 'childList') continue;
            for (const node of m.addedNodes) {
              if (hasMath(node)) {
                scheduleTypeset();
                return;
              }
            }
          }
        });
        observer.observe(root, { childList: true, subtree: true });
      };

      // document.body is never replaced by instant navigation, so this
      // observer survives every page swap.
      watch(document.body);
    })();
  </script>

  <script defer src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
  <script>
    // Initialize Mermaid in a way that plays nicely with MkDocs Material.
    // If the user toggles light/dark mode, we re-render Mermaid with the new theme.
    (function () {
      function currentMermaidTheme() {
        const scheme = document.body.getAttribute('data-md-color-scheme');
        return scheme === 'slate' ? 'dark' : 'default';
      }

      function renderMermaid() {
        if (!window.mermaid) return;

        const theme = currentMermaidTheme();

        window.mermaid.initialize({
          startOnLoad: false,
          theme: theme,
          securityLevel: 'strict'
        });

        document.querySelectorAll('.mermaid').forEach((el) => {
          const source = el.textContent;
          el.removeAttribute('data-processed');
          el.innerHTML = source;
        });

        window.mermaid.run({ querySelector: '.mermaid' });
      }

      document.addEventListener('DOMContentLoaded', renderMermaid);

      const obs = new MutationObserver((mutations) => {
        for (const m of mutations) {
          if (m.type === 'attributes' && m.attributeName === 'data-md-color-scheme') {
            renderMermaid();
            break;
          }
        }
      });

      document.addEventListener('DOMContentLoaded', () => {
        obs.observe(document.body, { attributes: true });
      });
    })();
  </script>

  <script>
    // ============================================================
    // Animated causal-set background ("spacetime diagram")
    // - nodes float slowly across the screen (drift + gentle wiggle)
    // - links are drawn between near neighbours, fading with distance
    // - colours come from Material CSS vars, so light/dark both work
    // - respects prefers-reduced-motion (renders a static frame)
    // ============================================================
    (function () {
      const canvas = document.createElement('canvas');
      canvas.id = 'pycauset-bg';
      canvas.setAttribute('aria-hidden', 'true');
      document.body.appendChild(canvas);
      const ctx = canvas.getContext('2d');

      const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      // Reduced-motion users still get a living background, just gentler:
      // motion intensity is scaled down instead of frozen entirely.
      const motionScale = reduceMotion ? 0.35 : 1;
      const LINK_DIST = 180;   // px — max link length

      let W = 0, H = 0, DPR = 1;
      let nodes = [];
      let prim = [94, 53, 177];   // deep purple fallback
      let acc = [0, 150, 136];    // teal fallback

      function parseHex(v) {
        const m = /^#?([0-9a-f]{6})$/i.exec(String(v).trim());
        if (!m) return null;
        const n = parseInt(m[1], 16);
        return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
      }

      // Blend a color toward white. Used to lift the node/link colours in
      // dark mode, where the theme's deep purple is nearly invisible.
      function lighten(c, amount) {
        return [
          Math.round(c[0] + (255 - c[0]) * amount),
          Math.round(c[1] + (255 - c[1]) * amount),
          Math.round(c[2] + (255 - c[2]) * amount)
        ];
      }

      function isDark() {
        const scheme = document.body.getAttribute('data-md-color-scheme');
        return scheme === 'slate';
      }

      function readColors() {
        const cs = getComputedStyle(document.documentElement);
        const p = parseHex(cs.getPropertyValue('--md-primary-fg-color'));
        const a = parseHex(cs.getPropertyValue('--md-accent-fg-color'));
        if (p) prim = p;
        if (a) acc = a;

        // In dark mode the deep-purple/teal theme colours are too dim
        // against the near-black background; lighten them substantially.
        if (isDark()) {
          prim = lighten(prim, 0.55);
          acc = lighten(acc, 0.35);
        }
      }

      function rgba(c, alpha) {
        return 'rgba(' + c[0] + ',' + c[1] + ',' + c[2] + ',' + alpha + ')';
      }

      function spawnNodes() {
        // density scales with viewport area
        const count = Math.max(30, Math.min(110, Math.round((W * H) / 26000)));
        nodes = [];
        for (let i = 0; i < count; i++) {
          // Each node drifts (floats) with its own slow velocity and
          // wiggles around wherever it currently is.
          const angle = Math.random() * Math.PI * 2;
          const drift = (0.08 + Math.random() * 0.18) * motionScale; // px per frame
          nodes.push({
            bx: Math.random() * W,
            by: Math.random() * H,
            vx: Math.cos(angle) * drift,
            vy: Math.sin(angle) * drift,
            r: 1.2 + Math.random() * 1.8,
            phase: Math.random() * Math.PI * 2,
            // faster wiggle so motion is clearly visible (~2-5s per cycle)
            speed: (0.0014 + Math.random() * 0.0016) * motionScale,
            amp: (3 + Math.random() * 6) * motionScale,
            x: 0, y: 0
          });
        }
      }

      function resize() {
        DPR = Math.min(window.devicePixelRatio || 1, 2);
        W = window.innerWidth;
        H = window.innerHeight;
        canvas.width = Math.round(W * DPR);
        canvas.height = Math.round(H * DPR);
        canvas.style.width = W + 'px';
        canvas.style.height = H + 'px';
        ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
        spawnNodes();
      }

      function draw(t) {
        ctx.clearRect(0, 0, W, H);

        // Dark mode: lift opacities as well as colours so the causets
        // read clearly against the near-black background.
        const nodeAlpha = isDark() ? 0.7 : 0.5;
        const linkAlpha = isDark() ? 0.45 : 0.30;

        // advance drift (float) and wrap at the edges
        for (let i = 0; i < nodes.length; i++) {
          const n = nodes[i];
          n.bx += n.vx;
          n.by += n.vy;
          const m = 40; // margin so nodes fade out smoothly
          if (n.bx < -m) n.bx = W + m;
          if (n.bx > W + m) n.bx = -m;
          if (n.by < -m) n.by = H + m;
          if (n.by > H + m) n.by = -m;
        }

        // gentle wiggle around base positions
        for (let i = 0; i < nodes.length; i++) {
          const n = nodes[i];
          n.x = n.bx + Math.sin(t * n.speed + n.phase) * n.amp;
          n.y = n.by + Math.cos(t * n.speed * 0.8 + n.phase * 1.3) * n.amp;
        }

        // links between near neighbours (fade with distance)
        ctx.lineWidth = 1;
        for (let i = 0; i < nodes.length; i++) {
          const a = nodes[i];
          for (let j = i + 1; j < nodes.length; j++) {
            const b = nodes[j];
            const dx = a.x - b.x, dy = a.y - b.y;
            const d2 = dx * dx + dy * dy;
            if (d2 > LINK_DIST * LINK_DIST) continue;
            const d = Math.sqrt(d2);
            const alpha = (1 - d / LINK_DIST) * linkAlpha;
            ctx.strokeStyle = rgba(acc, alpha);
            ctx.beginPath();
            ctx.moveTo(a.x, a.y);
            ctx.lineTo(b.x, b.y);
            ctx.stroke();
          }
        }

        // nodes
        for (let i = 0; i < nodes.length; i++) {
          const n = nodes[i];
          ctx.fillStyle = rgba(prim, nodeAlpha);
          ctx.beginPath();
          ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
          ctx.fill();
        }
      }

      function loop(t) {
        draw(t);
        requestAnimationFrame(loop);
      }

      readColors();
      resize();

      // Always animate: reduced-motion users get a gentler version via
      // motionScale instead of a frozen canvas.
      requestAnimationFrame(loop);

      window.addEventListener('resize', resize);

      // Re-read colours when the visitor toggles light/dark
      const obs = new MutationObserver(() => readColors());
      document.addEventListener('DOMContentLoaded', () => {
        obs.observe(document.body, { attributes: true, attributeFilter: ['data-md-color-scheme'] });
      });
    })();
  </script>
{% endblock %}