<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Favicons -->
  <link rel="icon" href="/assets/favicon.ico" type="image/x-icon" sizes="any">
  <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
  <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon">
  <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
  <link rel="mask-icon" href="/assets/logo.svg" color="#000000">
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">

  <title>{{ page_title }} · {{ book_title }}</title>

  <!-- Bulma CSS (vendored locally so it works offline) -->
  <link rel="stylesheet" href="/assets/bulma.min.css">

  <!-- Phosphor Icons -->
  <link rel="stylesheet" href="/assets/css/phosphor.css">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="/assets/main.css">

  <!-- Syntax highlighting CSS -->
  <link rel="stylesheet" href="/assets/css/syntax.css">

  <!-- Learn-code (annotated code blocks) CSS -->
  <link rel="stylesheet" href="/assets/css/learn-code.css">

  <!-- Fonts, all vendored locally so the reader works fully offline. -->
  <link rel="stylesheet" href="/assets/css/fonts.css">

  <style>
    @font-face { font-family: 'Space Mono'; font-weight: 400; font-style: normal;
      src: url('/assets/fonts/SpaceMono-Regular.ttf') format('truetype'); font-display: swap; }
    @font-face { font-family: 'Space Mono'; font-weight: 700; font-style: normal;
      src: url('/assets/fonts/SpaceMono-Bold.ttf') format('truetype'); font-display: swap; }
    @font-face { font-family: 'Space Mono'; font-weight: 400; font-style: italic;
      src: url('/assets/fonts/SpaceMono-Italic.ttf') format('truetype'); font-display: swap; }
    /* Library card: a .box div with an inner link + a corner remove button. */
    .library-card { position: relative; height: 100%; }
    .library-card__link {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      color: inherit;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
    }
    .library-card__link:focus, .library-card__link:focus-visible, .library-card__link:active { outline: none; }
    .library-card__cover {
      width: 96px;
      flex: 0 0 96px;
      border-radius: 6px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    }
    /* Kebab (⋯) options menu on the library card. */
    .library-card__menu { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 3; }
    .library-card__menu-btn {
      border: none;
      background: transparent;
      cursor: pointer;
      color: #b0b7c3;
      font-size: 1.3rem;
      line-height: 1;
      padding: 0.2rem 0.4rem;
      border-radius: 6px;
      transition: color 0.15s ease, background-color 0.15s ease;
    }
    .library-card__menu-btn:hover { color: #4a5568; background: rgba(10, 10, 10, 0.05); }
    .library-card__menu-list {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 0.3rem;
      min-width: 148px;
      background: #fff;
      border: 1px solid rgba(10, 10, 10, 0.08);
      border-radius: 10px;
      box-shadow: 0 8px 28px rgba(10, 10, 10, 0.16);
      padding: 0.35rem;
    }
    .library-card__menu-list[hidden] { display: none; }
    .library-card__menu-item {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      width: 100%;
      border: none;
      background: transparent;
      cursor: pointer;
      padding: 0.55rem 0.65rem;
      border-radius: 7px;
      font: inherit;
      font-size: 0.9rem;
      color: #e03131;
      text-align: left;
    }
    .library-card__menu-item:hover { background: rgba(224, 49, 49, 0.1); }
    :root.night-shift .library-card__menu-btn { color: #6b7280; }
    :root.night-shift .library-card__menu-btn:hover { color: #cbd5e0; background: rgba(255, 255, 255, 0.06); }
    :root.night-shift .library-card__menu-list { background: #1f2430; border-color: rgba(255, 255, 255, 0.1); }
    :root.night-shift .library-card__menu-item { color: #ff6b6b; }
    :root.night-shift .library-card__menu-item:hover { background: rgba(255, 107, 107, 0.12); }

    /* Book header: title block on the left, version button aligned top-right. */
    .book-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
    .book-header__main { min-width: 0; }
    .book-header__aside { flex: 0 0 auto; padding-top: 0.15rem; }
    @media (max-width: 768px) {
      .book-header { flex-direction: column; gap: 0.75rem; }
      .book-header__aside { padding-top: 0; }
    }

    /* Chapter cards: drop Bulma/browser focus ring on the whole clickable card. */
    a.book-chapter-card-link { -webkit-tap-highlight-color: transparent; }
    a.book-chapter-card-link:hover,
    a.book-chapter-card-link:focus,
    a.book-chapter-card-link:focus-within,
    a.book-chapter-card-link:focus-visible,
    a.book-chapter-card-link:active {
      outline: none !important;
      box-shadow: none !important;
    }

    /* Version button + modal on the book page. */
    .book-version-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.1rem; }
    .version-btn { font-weight: 600; }
    .version-modal { position: relative; margin: 0 auto; padding: 2.5rem 2.75rem 2.25rem; }
    .version-modal__title {
      font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
      font-weight: 700; opacity: 0.55; margin-bottom: 1rem;
    }
    .version-list { list-style: none; margin: 0; padding: 0; }
    .version-item {
      display: flex; align-items: center; gap: 0.5rem;
      border-radius: 8px; padding: 0.15rem 0.15rem 0.15rem 0.15rem;
    }
    .version-item + .version-item { margin-top: 0.25rem; }
    .version-item.is-current { background: rgba(10, 10, 10, 0.05); }
    :root.night-shift .version-item.is-current { background: rgba(255, 255, 255, 0.07); }
    .version-item__link {
      flex: 1; display: flex; align-items: center; justify-content: space-between;
      gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 8px;
      color: inherit; text-decoration: none;
    }
    .version-item__link:hover { background: rgba(10, 10, 10, 0.04); }
    :root.night-shift .version-item__link:hover { background: rgba(255, 255, 255, 0.05); }
    .version-item__name { font-weight: 700; }
    .version-item__badge {
      font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
      padding: 0.12rem 0.5rem; border-radius: 999px; margin-left: 0.35rem;
      background: rgba(10, 10, 10, 0.08); opacity: 0.8;
    }
    .version-item__badge.is-current-badge { background: rgba(72, 199, 116, 0.18); color: #2b8a5a; }
    .version-item__badge.is-toonew-badge { background: rgba(224, 143, 49, 0.18); color: #b46a12; }
    .version-item__link--disabled { cursor: default; opacity: 0.7; }
    .version-modal__note { margin-top: 0.9rem; font-size: 0.8rem; opacity: 0.7; line-height: 1.5; }
    .version-modal__note code { background: rgba(10, 10, 10, 0.08); padding: 0.1rem 0.35rem; border-radius: 5px; }
    :root.night-shift .version-modal__note code { background: rgba(255, 255, 255, 0.12); }
    .version-item__remove {
      border: none; background: transparent; cursor: pointer;
      color: #b0b7c3; font-size: 1rem; padding: 0.4rem; border-radius: 6px;
      transition: color 0.15s ease, background-color 0.15s ease;
    }
    .version-item__remove:hover { color: #e03131; background: rgba(224, 49, 49, 0.1); }

    /* Incompatible book: card badge + modal. */
    .library-card--incompatible .library-card__link { opacity: 0.85; }
    .library-card__cover--placeholder {
      width: 96px; height: 132px; flex: 0 0 96px;
      border-radius: 6px; display: flex; align-items: center; justify-content: center;
      background: rgba(10, 10, 10, 0.05); color: #b0b7c3; font-size: 1.8rem;
    }
    :root.night-shift .library-card__cover--placeholder { background: rgba(255, 255, 255, 0.06); color: #6b7280; }
    .library-card__warn {
      position: absolute; bottom: 0.6rem; right: 0.6rem; z-index: 3;
      border: none; background: transparent; cursor: pointer;
      color: #e08f31; font-size: 1.4rem; line-height: 1;
      padding: 0.2rem; border-radius: 6px;
      transition: background-color 0.15s ease;
    }
    .library-card__warn:hover { background: rgba(224, 143, 49, 0.14); }

    /* Shared modal sizing + in-box close button (version + update modals). */
    .aibodh-modal-content { max-width: 760px; width: 92%; }
    .aibodh-modal__close {
      position: absolute; top: 1rem; right: 1rem;
      border: none; background: transparent; cursor: pointer;
      color: #9aa1ac; font-size: 1.4rem; line-height: 1;
      padding: 0.3rem; border-radius: 8px;
      transition: color 0.15s ease, background-color 0.15s ease;
    }
    .aibodh-modal__close:hover { color: #4a5568; background: rgba(10, 10, 10, 0.06); }
    :root.night-shift .aibodh-modal__close:hover { color: #cbd5e0; background: rgba(255, 255, 255, 0.08); }
    .incompat-modal { position: relative; margin: 0 auto; padding: 2.75rem 3rem 2.5rem; }
    .incompat-modal__title { font-weight: 700; display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1.1rem; font-size: 1.25rem; }
    .incompat-modal__title .icon { color: #e08f31; }
    .incompat-modal__body { margin-bottom: 1.5rem; font-size: 1.05rem; line-height: 1.65; }
    .incompat-modal__hint { font-size: 0.9rem; opacity: 0.7; margin-bottom: 0.55rem; }

    /* Library header: "Your Library" eyebrow left, Discord CTA aligned top-right. */
    .library-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
    .library-discord {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-size: 0.82rem; font-weight: 600; color: #5865f2;
      transition: opacity 0.15s ease;
    }
    .library-discord:hover { opacity: 0.75; }
    .library-discord .icon { font-size: 1rem; }

    .update-notice__cmd { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
    .update-notice__cmd code {
      background: rgba(10, 10, 10, 0.85);
      color: #f5f5f5;
      padding: 0.55rem 0.85rem;
      border-radius: 8px;
      font-size: 0.85rem;
    }
    .update-notice__copy {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(10, 10, 10, 0.2);
      background: transparent;
      cursor: pointer;
      padding: 0.5rem 0.6rem;
      border-radius: 8px;
      color: inherit;
      font-size: 1.05rem;
      line-height: 1;
    }
    .update-notice__copy:hover { background: rgba(10, 10, 10, 0.05); }
    :root.night-shift .update-notice__copy { border-color: rgba(255, 255, 255, 0.22); }
    :root.night-shift .update-notice__copy:hover { background: rgba(255, 255, 255, 0.08); }
    :root.night-shift .update-notice__copy { border-color: rgba(255, 255, 255, 0.25); color: #cbd5e0; }

    /* "Add a book" card: clicking opens the file dialog (hidden input inside). */
    .add-book-form { height: 100%; }
    .add-book-card {
      display: flex;
      align-items: center;
      gap: 1rem;
      height: 100%;
      min-height: 118px;
      cursor: pointer;
      color: inherit;
      border: 2px dashed rgba(10, 10, 10, 0.18) !important;
      box-shadow: none !important;
      transition: border-color 0.15s ease, background-color 0.15s ease;
    }
    .add-book-card:hover { border-color: rgba(10, 10, 10, 0.4) !important; background: rgba(10, 10, 10, 0.015); }
    .add-book-plus {
      font-size: 1.5rem;
      width: 2.6rem;
      height: 2.6rem;
      flex: 0 0 2.6rem;
      border-radius: 50%;
      background: rgba(10, 10, 10, 0.06);
      color: #4a5568;
    }
    :root.night-shift .add-book-card { border-color: rgba(255, 255, 255, 0.2) !important; }
    :root.night-shift .add-book-card:hover { border-color: rgba(255, 255, 255, 0.42) !important; background: rgba(255, 255, 255, 0.04); }
    :root.night-shift .add-book-plus { background: rgba(255, 255, 255, 0.1); color: #cbd5e0; }

    /* Icon-only "back to chapters" button inside a chapter. */
    .chapter-back {
      margin-bottom: 1.25rem;
      color: #4a5568;
    }
    :root.night-shift .chapter-back { color: #cbd5e0; }

    /* Prev / next chapter navigation at the end of a chapter. */
    .chapter-nav {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      margin-top: 3.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(10, 10, 10, 0.08);
    }
    .chapter-nav__link {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      max-width: 48%;
      padding: 0.65rem 1rem;
      border: 1px solid rgba(10, 10, 10, 0.12);
      border-radius: 8px;
      color: inherit;
      transition: border-color 0.15s ease, transform 0.15s ease;
    }
    .chapter-nav__link:hover { border-color: rgba(10, 10, 10, 0.28); transform: translateY(-1px); }
    .chapter-nav__link--next { text-align: right; margin-left: auto; }
    .chapter-nav__dir { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; }
    .chapter-nav__title { font-weight: 700; }
    :root.night-shift .chapter-nav { border-top-color: rgba(255, 255, 255, 0.12); }
    :root.night-shift .chapter-nav__link { border-color: rgba(255, 255, 255, 0.16); }
    :root.night-shift .chapter-nav__link:hover { border-color: rgba(255, 255, 255, 0.36); }
  </style>

  <!-- Bulma JavaScript -->
  <script src="/assets/js/bulma.js"></script>
  <!-- Image Popup JavaScript -->
  <script src="/assets/js/image-popup.js"></script>
  <!-- Table of Contents JavaScript -->
  <script src="/assets/js/post-toc.js"></script>
  <!-- D3 Print Snapshot JavaScript -->
  <script src="/assets/js/d3-print-frames.js"></script>
  <!-- Night Shift Toggle JavaScript -->
  <script src="/assets/js/night-shift.js"></script>
  <!-- External Links Handler JavaScript -->
  <script src="/assets/js/external-links.js"></script>
  <!-- Learn-code (annotated code blocks) JavaScript -->
  <script src="/assets/js/learn-code.js"></script>
  <!-- Safari GIF Fix JavaScript -->
  <script src="/assets/js/safari-gif-fix.js"></script>
</head>

<body>

  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <img src="/assets/logo.png" alt="AIBodh" class="site-logo site-logo-light">
        <img src="/assets/logo_white.png" alt="AIBodh" class="site-logo site-logo-dark">
      </a>

      <!-- Night Shift Toggle - Always visible on mobile -->
      <div class="navbar-item is-hidden-desktop">
        <button id="nightShiftToggle" class="night-shift-toggle" aria-label="Toggle dark mode" title="Toggle dark mode">
          <i class="ph ph-sun night-shift-icon night-shift-icon-sun" style="font-size: 20px;"></i>
          <i class="ph ph-moon night-shift-icon night-shift-icon-moon" style="font-size: 20px;"></i>
        </button>
      </div>

      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div id="navbarMenu" class="navbar-menu">
      <div class="navbar-end">
        <a class="navbar-item" href="/">Library</a>
        <a class="navbar-item" href="https://discord.com/invite/cD9qEsSjUH" target="_blank" rel="noopener"
           aria-label="Join the community on Discord" title="Join the community on Discord">
          <i class="ph ph-discord-logo" style="font-size: 20px;"></i>
        </a>
        <!-- Night Shift Toggle - Desktop version -->
        <div class="navbar-item is-hidden-mobile">
          <button id="nightShiftToggleDesktop" class="night-shift-toggle" aria-label="Toggle dark mode" title="Toggle dark mode">
            <i class="ph ph-sun night-shift-icon night-shift-icon-sun" style="font-size: 20px;"></i>
            <i class="ph ph-moon night-shift-icon night-shift-icon-moon" style="font-size: 20px;"></i>
          </button>
        </div>
      </div>
    </div>
  </nav>

  <main class="page-content" aria-label="Content">
    {{ content|safe }}
  </main>

  <footer class="site-footer" style="border-top: none !important; padding: 1rem 0; text-align: center; color: #666; font-size: 0.875rem; margin-top: 2rem;">
    <p style="margin: 0;">&copy; AIBodh. All rights reserved.</p>
  </footer>

</body>

</html>
