<?php declare(strict_types=1); ?>
<!-- ═══════════════════════════════════════════════════════════════════
     Build & Deploy — in-app Guide
     Self-contained (own markup + styles + open/close/scrollspy script).
     Opened by any element with [data-fin-help-open].
     ══════════════════════════════════════════════════════════════════ -->
<style>
    .finh-scrim { position:fixed; inset:0; z-index:11000; background:rgba(15,23,42,.55);
        backdrop-filter:blur(3px); display:none; opacity:0; transition:opacity .18s; }
    .finh-scrim.open { display:block; opacity:1; }
    .finh-modal { position:fixed; z-index:11001; top:3vh; bottom:3vh; left:50%;
        width:min(1060px, 94vw); transform:translateX(-50%) translateY(14px);
        background:var(--pp-surface, #fff); color:var(--pp-text, #1e293b);
        border-radius:16px; box-shadow:0 32px 80px rgba(2,6,23,.5);
        display:flex; flex-direction:column; overflow:hidden; opacity:0;
        transition:transform .2s, opacity .2s; }
    .finh-scrim.open .finh-modal { transform:translateX(-50%) translateY(0); opacity:1; }

    .finh-head { flex:0 0 auto; display:flex; align-items:center; gap:14px;
        padding:16px 22px; border-bottom:1px solid var(--pp-border, #e2e8f0);
        background:linear-gradient(120deg,#065f46,#059669 60%,#0d9488); color:#fff; }
    .finh-head .finh-badge { width:40px; height:40px; border-radius:11px; flex:0 0 40px;
        display:flex; align-items:center; justify-content:center; font-size:20px;
        background:rgba(255,255,255,.16); }
    .finh-head h2 { margin:0; font-size:17px; font-weight:800; letter-spacing:-.01em; }
    .finh-head p  { margin:2px 0 0; font-size:12px; opacity:.85; }
    .finh-close { margin-left:auto; width:34px; height:34px; border-radius:9px; border:0;
        background:rgba(255,255,255,.14); color:#fff; font-size:18px; cursor:pointer;
        display:flex; align-items:center; justify-content:center; transition:.15s; }
    .finh-close:hover { background:rgba(255,255,255,.28); }

    .finh-body { flex:1; min-height:0; display:grid; grid-template-columns:236px 1fr; }
    .finh-toc { border-right:1px solid var(--pp-border, #e2e8f0); background:var(--pp-surface-soft, #f8fafc);
        overflow-y:auto; padding:14px 8px 24px; }
    .finh-toc-group { font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
        color:var(--pp-text-muted, #94a3b8); padding:14px 14px 5px; }
    .finh-toc a { display:flex; align-items:center; gap:9px; padding:7px 14px; border-radius:8px;
        margin:1px 6px; font-size:12.5px; color:var(--pp-text-muted, #475569); text-decoration:none;
        cursor:pointer; border-left:3px solid transparent; }
    .finh-toc a:hover,
    .finh-toc a.active { background:color-mix(in srgb, var(--pp-accent, #059669) 14%, var(--pp-surface, #fff));
        color:var(--pp-accent, #047857); }
    .finh-toc a.active { font-weight:700; border-left-color:var(--pp-accent, #059669); }
    .finh-toc a i { font-size:14px; width:16px; flex:0 0 16px; color:var(--pp-accent, #34d399); }

    .finh-content { position:relative; overflow-y:auto; padding:8px 40px 80px; scroll-behavior:smooth;
        background:var(--pp-surface, #fff); color:var(--pp-text, #1e293b); }
    .finh-content section { padding-top:26px; }
    .finh-content h3 { font-size:21px; font-weight:800; letter-spacing:-.02em; margin:6px 0 4px;
        color:var(--pp-text, #0f172a); display:flex; align-items:center; gap:10px; }
    .finh-content h3 .num { font-size:12px; font-weight:800; color:var(--pp-accent, #047857);
        background:color-mix(in srgb, var(--pp-accent, #059669) 15%, var(--pp-surface, #fff));
        border-radius:8px; padding:3px 9px; }
    .finh-content h3 .finh-pill { font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
        color:#fff; background:var(--pp-accent, #059669); border-radius:999px; padding:2px 9px; }
    .finh-content h4 { font-size:14.5px; font-weight:800; margin:22px 0 6px; color:var(--pp-accent, #065f46); }
    .finh-content p  { font-size:13.5px; line-height:1.66; color:var(--pp-text, #334155); margin:8px 0; }
    .finh-content ul, .finh-content ol { font-size:13.5px; line-height:1.66; color:var(--pp-text, #334155);
        margin:8px 0; padding-left:22px; }
    .finh-content li { margin:4px 0; }
    .finh-content b, .finh-content strong { color:var(--pp-text, #0f172a); }
    .finh-lead { font-size:15px; line-height:1.65; color:var(--pp-text-muted, #475569); }
    .finh-content kbd { background:var(--pp-surface-muted, #f1f5f9); color:var(--pp-text, #0f172a);
        border-radius:4px; padding:1px 5px; font-size:11px; }
    .finh-content code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px;
        background:color-mix(in srgb, var(--pp-accent, #059669) 14%, var(--pp-surface, #fff));
        color:var(--pp-accent, #047857); padding:1.5px 6px; border-radius:5px; }

    /* Callouts tint the current surface, so they stay readable in every theme. */
    .finh-callout { display:flex; gap:12px; padding:13px 16px; border-radius:11px; margin:14px 0;
        font-size:13px; line-height:1.6; color:var(--pp-text, #334155); border:1px solid transparent; }
    .finh-callout i { font-size:17px; flex:0 0 auto; margin-top:1px; }
    .finh-callout.tip  { background:color-mix(in srgb, #10b981 13%, var(--pp-surface, #fff));
        border-color:color-mix(in srgb, #10b981 28%, transparent); }
    .finh-callout.tip i { color:#10b981; }
    .finh-callout.warn { background:color-mix(in srgb, #f59e0b 13%, var(--pp-surface, #fff));
        border-color:color-mix(in srgb, #f59e0b 28%, transparent); }
    .finh-callout.warn i { color:#f59e0b; }
    .finh-callout.info { background:color-mix(in srgb, #3b82f6 13%, var(--pp-surface, #fff));
        border-color:color-mix(in srgb, #3b82f6 28%, transparent); }
    .finh-callout.info i { color:#3b82f6; }

    .finh-table { width:100%; border-collapse:collapse; margin:12px 0; font-size:12.5px; }
    .finh-table th { text-align:left; font-weight:800; color:var(--pp-text-muted, #475569);
        background:var(--pp-surface-soft, #f8fafc); padding:8px 11px;
        border-bottom:2px solid var(--pp-border, #e2e8f0); font-size:11px; text-transform:uppercase;
        letter-spacing:.03em; }
    .finh-table td { padding:8px 11px; border-bottom:1px solid var(--pp-border, #f1f5f9);
        vertical-align:top; color:var(--pp-text, #334155); }
    .finh-table tr:hover td { background:var(--pp-surface-soft, #f6fffb); }

    .finh-foot { margin-top:34px; padding-top:16px; border-top:1px solid var(--pp-border, #e2e8f0);
        font-size:12px; color:var(--pp-text-muted, #94a3b8); }

    @media (max-width:760px) {
        .finh-body { grid-template-columns:1fr; }
        .finh-toc { display:none; }
        .finh-content { padding:8px 20px 60px; }
    }
</style>

<div class="finh-scrim" id="finHelpScrim" aria-hidden="true">
  <div class="finh-modal pp-legacy-guide" role="dialog" aria-modal="true" aria-label="Build and Deploy guide">
    <div class="finh-head">
      <div class="finh-badge"><i class="bi bi-check2-circle"></i></div>
      <div>
        <h2>Build &amp; Deploy — Guide</h2>
        <p>Turn your project into a real application, then get it online.</p>
      </div>
      <button class="finh-close" id="finHelpClose" title="Close (Esc)" aria-label="Close"><i class="bi bi-x-lg" aria-hidden="true"></i></button>
    </div>

    <div class="finh-body">
      <nav class="finh-toc" id="finHelpToc">
        <div class="finh-toc-group">Start here</div>
        <a data-goto="f-what"><i class="bi bi-stars"></i> What this screen does</a>
        <a data-goto="f-flow"><i class="bi bi-signpost-2"></i> The typical flow</a>

        <div class="finh-toc-group">Build &amp; check</div>
        <a data-goto="f-build"><i class="bi bi-hammer"></i> Build Now</a>
        <a data-goto="f-preview"><i class="bi bi-eye"></i> Preview in Browser</a>
        <a data-goto="f-health"><i class="bi bi-heart-pulse"></i> Health Check</a>

        <div class="finh-toc-group">Get it online</div>
        <a data-goto="f-deploy-package"><i class="bi bi-box-seam"></i> Deployment Package</a>
        <a data-goto="f-ftp"><i class="bi bi-cloud-arrow-up"></i> Deploy via FTP</a>
        <a data-goto="f-demo"><i class="bi bi-globe"></i> Deploy to Demo</a>

        <div class="finh-toc-group">Take it with you</div>
        <a data-goto="f-zip"><i class="bi bi-file-zip"></i> Package as ZIP</a>
        <a data-goto="f-sql"><i class="bi bi-database-gear"></i> Generate SQL Script</a>
        <a data-goto="f-folder"><i class="bi bi-folder2-open"></i> Open Output Folder</a>
        <a data-goto="f-git"><i class="bi bi-git"></i> Git Commit</a>

        <div class="finh-toc-group">Reference</div>
        <a data-goto="f-panels"><i class="bi bi-clock-history"></i> History &amp; Health panels</a>
        <a data-goto="f-faq"><i class="bi bi-question-circle"></i> FAQ</a>
      </nav>

      <div class="finh-content" id="finHelpContent">

        <section id="f-what">
          <h3><span class="num">01</span> What this screen does</h3>
          <p class="finh-lead">Everything before this screen is <b>design</b>. This screen is where your project becomes a
          <b>real, working application</b> — and where you send it out into the world.</p>
          <p>The cards at the top are one-click actions. The numbers below the banner always describe your
          <b>most recent build</b>: when it ran, how many files it produced, how long it took, and how big it is.</p>
          <div class="finh-callout info"><i class="bi bi-info-circle-fill"></i>
            <div>Nothing here changes your design. If a build looks wrong, go back to the other screens, fix it, and
            simply build again — you can also step back with <b>Version History</b> in the top bar.</div></div>
        </section>

        <section id="f-flow">
          <h3><span class="num">02</span> The typical flow</h3>
          <ol>
            <li><b>Build Now</b> — generate the application.</li>
            <li><b>Preview in Browser</b> — click through it and make sure it looks right.</li>
            <li><b>Get it online</b> — for a <b>first go-live</b> or <b>shared hosting</b> (cPanel/DirectAdmin), use
              <b>Deployment Package</b> — a self-installing bundle that sets up the database and admin for you. For a
              server you publish to <b>regularly</b>, use <b>Deploy via FTP</b>.</li>
          </ol>
          <p>That's it. The other cards are there when you need them — a ZIP backup, a database script, a demo publish,
          or a health check when something misbehaves.</p>
          <div class="finh-callout tip"><i class="bi bi-lightbulb-fill"></i>
            <div>Made a change on any screen? <b>Build again</b> before previewing or deploying — otherwise you'll be
            looking at the previous version.</div></div>
        </section>

        <section id="f-build">
          <h3><span class="num">03</span> Build Now</h3>
          <p>Turns everything you designed — tables, pages, fields, styling, events — into a complete PHP application
          written to your <b>output folder</b> (set in <b>Output → Output Directory</b>).</p>
          <p>When it finishes you'll see the file count, duration and size in the stat tiles, and a new entry in
          <b>Build History</b>. Each build also saves a restorable <b>Checkpoint</b> in Version History.</p>
          <div class="finh-callout warn"><i class="bi bi-exclamation-triangle-fill"></i>
            <div>Build is the step people forget. Preview, ZIP, and Deploy all work from the <b>last build</b> — not
            from your unsaved design.</div></div>

          <h4 style="margin-top:1.1rem"><i class="bi bi-shield-check"></i> Safe &amp; fast — how a build protects your app</h4>
          <p>A build never puts your app at risk, even if something goes wrong halfway:</p>
          <ul>
            <li><b>Crash-safe by design.</b> The new app is assembled and <b>fully verified off to the side first</b>,
              then swapped into place in a single instant step. Your <b>current app keeps running untouched</b> the
              whole time — so a power cut, a timeout, or a full disk can never leave a half-built app.</li>
            <li><b>Automatic rollback.</b> The previous build is kept as a safety copy; if the final swap can't complete,
              your last working app is restored automatically.</li>
            <li><b>Every file checked.</b> The finished app is verified against a signed checksum list before it goes
              live; if even one file doesn't match, nothing is shipped and your existing app stays in place.</li>
          </ul>
          <p>On a <b>licensed copy</b>, the heavy work runs on the <b>build server</b>: your design is sent up, assembled
          and verified there, and only the finished files land in your local output folder — with your data staying
          entirely local. Repeat builds are <b>near-instant</b> because only the files that actually changed are sent
          (a delta), and shared assets you already have are reused.</p>
          <div class="finh-callout tip"><i class="bi bi-hourglass-split"></i>
            <div>While a build runs, the screen shows a live <b>progress panel</b> and stays <b>locked</b> — that's on
            purpose, so a stray double-click or navigating away can't interrupt it. It clears itself the moment the
            finished app lands.</div></div>
          <div class="finh-callout"><i class="bi bi-wifi-off"></i>
            <div><b>If the network drops mid-build</b> (licensed copies), nothing is half-written: the reply is verified
            before a single file is touched, so you simply get a clear message and your existing app is unchanged —
            just build again.</div></div>
        </section>

        <section id="f-preview">
          <h3><span class="num">04</span> Preview in Browser</h3>
          <p>Opens your built app in a <b>new tab</b> so you can click through it like a real user.</p>
          <table class="finh-table">
            <thead><tr><th>Your setup</th><th>What happens</th></tr></thead>
            <tbody>
              <tr><td>You set <b>Output → Preview URL</b></td><td>That address opens. This is the recommended setup and works everywhere.</td></tr>
              <tr><td><?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?> on your own computer</td><td>A small test server starts automatically and the tab opens on it.</td></tr>
              <tr><td><?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?> on a hosted server</td><td>You'll be asked to set a Preview URL — a test server on the host wouldn't be reachable from your browser.</td></tr>
            </tbody>
          </table>
          <div class="finh-callout tip"><i class="bi bi-lightbulb-fill"></i>
            <div>If your browser blocks the new tab, allow pop-ups for <?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?> — the preview opens in a fresh tab by design.</div></div>
        </section>

        <section id="f-health">
          <h3><span class="num">05</span> Health Check</h3>
          <p>Checks that the machine running <?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?> has everything your app needs: a supported PHP version, the database
          driver, ZIP support, and a writable output folder. Results appear in the <b>System Health</b> panel.</p>
          <p>Run it first whenever a build or upload behaves oddly — it usually explains why in one line.</p>
        </section>

        <section id="f-deploy-package">
          <h3><span class="num">06</span> Deployment Package <span class="finh-pill">recommended</span></h3>
          <p class="finh-lead">The reliable, one-click way to put your app on a fresh server — especially shared hosting
          (cPanel / DirectAdmin). It builds a <b>self-installing bundle</b> and downloads it to you.</p>
          <p>Inside the ZIP is your complete app plus a small <b>setup wizard</b> (<code>install.php</code>) and three
          SQL files. Crucially, it carries <b>no database password</b> and no admin account — you create those safely on
          the server during setup.</p>

          <p><b>How to use it — four steps:</b></p>
          <ol>
            <li><b>Download</b> the package here, then <b>upload &amp; unzip</b> it into your site's folder
              (e.g. <code>public_html</code>).</li>
            <li>In your hosting panel, <b>create an empty database</b> and a database user (note the name, user and
              password — on shared hosting the name is usually prefixed, like <code>myaccount_legalcms</code>).</li>
            <li><b>Open your site in a browser.</b> The wizard starts automatically. It:
              <ul>
                <li>tests your <b>database connection</b> and saves it,</li>
                <li>imports the <b>schema</b> (all tables <i>and</i> views) and the <b>data</b>,</li>
                <li>lets you <b>create your administrator</b> account.</li>
              </ul>
            </li>
            <li>The wizard <b>locks itself</b> and offers to delete <code>install.php</code>. Sign in — you're live.</li>
          </ol>

          <div class="finh-callout tip"><i class="bi bi-lightbulb-fill"></i>
            <div>This is the surest fix for the classic <b>"dashboard charts are blank after deploy"</b> problem: the
            package recreates your report <b>views</b> (which a plain table-only import misses) and makes them portable,
            so they work no matter what your live database is named.</div></div>

          <p><b>The three SQL files</b> (also handy for a manual import):</p>
          <table class="finh-table">
            <thead><tr><th>File</th><th>Contains</th></tr></thead>
            <tbody>
              <tr><td><code>schema.sql</code></td><td>All tables <b>and views</b> — portable, imports into <i>any</i> database name.</td></tr>
              <tr><td><code>seed.sql</code></td><td>Your data (run <b>after</b> <code>schema.sql</code>).</td></tr>
              <tr><td><code>database.sql</code></td><td>Both combined, plus a <code>CREATE DATABASE</code> — for a one-shot <code>mysql&nbsp;&lt;&nbsp;database.sql</code>.</td></tr>
            </tbody>
          </table>
          <div class="finh-callout info"><i class="bi bi-info-circle-fill"></i>
            <div>Importing by hand in <b>phpMyAdmin</b>? Select your database, then import <code>schema.sql</code>, then
            <code>seed.sql</code>. Avoid <code>database.sql</code> there — its <code>CREATE DATABASE</code>/<code>USE</code>
            line targets a fixed name and would import into the wrong database.</div></div>
        </section>

        <section id="f-ftp">
          <h3><span class="num">07</span> Deploy via FTP</h3>
          <p>Opens the full <b>Deploy</b> client: save server connections, browse the remote site, choose a live database,
          and upload — including <b>changed files only</b> so repeat uploads are fast.</p>
          <p>This is the right choice for a server you publish to regularly. It uploads the built files; if your live
          database isn't set up yet, run the <b>Deployment Package</b> wizard once (or import <code>schema.sql</code> +
          <code>seed.sql</code>) to create the tables, views and data first.</p>
        </section>

        <section id="f-demo">
          <h3><span class="num">08</span> Deploy to Demo</h3>
          <p>A quick, one-off publish — ideal for showing work to a client on a temporary host. You'll be asked for the
          server's details each time:</p>
          <ul>
            <li><b>Host</b> — e.g. <code>demo.example.com</code></li>
            <li><b>Type &amp; Port</b> — FTP, FTPS or SFTP (the port fills in automatically)</li>
            <li><b>Username</b> and <b>Password</b></li>
            <li><b>Folder on the server</b> — e.g. <code>/public_html/demo</code></li>
          </ul>
          <div class="finh-callout info"><i class="bi bi-info-circle-fill"></i>
            <div>These details are used for that single upload and are <b>not saved</b>. If you publish to the same place
            often, save a connection in <b>Deploy via FTP</b> instead.</div></div>
        </section>

        <section id="f-zip">
          <h3><span class="num">09</span> Package as ZIP</h3>
          <p>Zips your latest build and <b>downloads it to your computer</b> — perfect for a backup, or for hosts where
          you upload a ZIP by hand through a control panel.</p>
          <p>The archive is created, sent to you, and then <b>deleted from the server</b>, so nothing is left behind.</p>
        </section>

        <section id="f-sql">
          <h3><span class="num">10</span> Generate SQL Script</h3>
          <p>Downloads a <code>.sql</code> file describing your database <b>structure</b> — every table <b>and view</b>.
          Import it on another server (phpMyAdmin or your host's import tool) to recreate them. Views are made
          <b>portable</b> (the server-specific owner is stripped) so they import cleanly anywhere.</p>
          <p>Like the ZIP, the file is downloaded immediately and then removed from the server.</p>
          <div class="finh-callout info"><i class="bi bi-info-circle-fill"></i>
            <div>This card is the <b>structure only</b>. To move structure <b>and</b> data <b>and</b> get an automatic
            setup wizard, use <b>Deployment Package</b> instead — it bundles <code>schema.sql</code> + <code>seed.sql</code>
            + <code>install.php</code>.</div></div>
        </section>

        <section id="f-folder">
          <h3><span class="num">11</span> Open Output Folder</h3>
          <p>Opens the folder of generated files so you can look at them directly.</p>
          <div class="finh-callout warn"><i class="bi bi-exclamation-triangle-fill"></i>
            <div>This only works when <?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?> runs on <b>your own computer</b>. On a hosted server the files live on the
            server, not your machine — use <b>Package as ZIP</b> to bring them to you, or <b>Deploy via FTP</b> to
            browse them remotely.</div></div>
        </section>

        <section id="f-git">
          <h3><span class="num">12</span> Git Commit</h3>
          <p>Saves a <b>snapshot of your generated files</b> into a local Git history inside the output folder, so you can
          see what changed between builds. The message tells you the snapshot reference and where it lives.</p>
          <div class="finh-callout warn"><i class="bi bi-exclamation-triangle-fill"></i>
            <div><b>Nothing is pushed to GitHub</b> or any other remote — this is a local history on the machine running
            <?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?>. It's a developer convenience; if you just want to step back through your work, use
            <b>Version History</b> in the top bar instead.</div></div>
        </section>

        <section id="f-panels">
          <h3><span class="num">13</span> History &amp; Health panels</h3>
          <ul>
            <li><b>Build History</b> — every build and publish, with status, time and duration. Click a row for details;
              the <i class="bi bi-trash3"></i> button clears the list.</li>
            <li><b>System Health</b> — the results of your last Health Check.</li>
          </ul>
          <p>Both panels collapse from their headers if you want more room.</p>
        </section>

        <section id="f-faq">
          <h3><span class="num">14</span> FAQ</h3>
          <h4>I changed something but the app looks the same.</h4>
          <p>Build again. Preview always shows the last build.</p>
          <h4>Where did my app actually go?</h4>
          <p>Into the output folder from <b>Output → Output Directory</b>. The exact path is shown after each build and
          in the Output screen's Build Information.</p>
          <h4>Which should I use — Deploy via FTP or Deploy to Demo?</h4>
          <p>Use <b>Deploy via FTP</b> for servers you publish to regularly (it remembers connections and uploads only
          what changed). Use <b>Deploy to Demo</b> for a quick one-off. For a <b>brand-new</b> live site — especially
          shared hosting — reach for the <b>Deployment Package</b> first; it sets up the database and admin for you.</p>
          <h4>I deployed, but the dashboard charts / analytics are blank.</h4>
          <p>Almost always a missing database <b>view</b>. Charts often read from a report view, and a plain
          table-only import skips views (or your host rejects them because of a server-specific owner). Re-deploy with the
          <b>Deployment Package</b> (it recreates views, portably), or import the fresh <code>schema.sql</code> which now
          includes them.</p>
          <h4>Do I have to edit <code>config/database.php</code> by hand?</h4>
          <p>Not with the <b>Deployment Package</b> — the setup wizard writes it for you from the details you type in, so
          no password is ever baked into the download. (Editing it by hand still works if you prefer.)</p>
          <h4>Is my download kept on the server?</h4>
          <p>No. Deployment Package, ZIP and SQL files are sent to you and deleted immediately. The package also never
          includes a saved database password or admin account.</p>
          <div class="finh-foot"><?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?> Build &amp; Deploy — design it, build it, ship it.
          Press <kbd>Esc</kbd> or click outside to close.</div>
        </section>

      </div>
    </div>
  </div>
</div>

<script>
(function () {
    var scrim   = document.getElementById('finHelpScrim');
    var closeB  = document.getElementById('finHelpClose');
    var toc     = document.getElementById('finHelpToc');
    var content = document.getElementById('finHelpContent');
    if (!scrim) return;

    function open()  { scrim.classList.add('open'); scrim.setAttribute('aria-hidden', 'false');
                       document.body.style.overflow = 'hidden'; }
    function close() { scrim.classList.remove('open'); scrim.setAttribute('aria-hidden', 'true');
                       document.body.style.overflow = ''; }

    document.addEventListener('click', function (e) {
        if (e.target.closest('[data-fin-help-open]')) { e.preventDefault(); open(); }
    });
    closeB.addEventListener('click', close);
    scrim.addEventListener('click', function (e) { if (e.target === scrim) close(); });
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && scrim.classList.contains('open')) { e.stopPropagation(); close(); }
    });

    var links = Array.prototype.slice.call(toc.querySelectorAll('a[data-goto]'));
    function setActive(id) {
        links.forEach(function (a) { a.classList.toggle('active', a.dataset.goto === id); });
    }
    function goTo(id) {
        var el = document.getElementById(id);
        if (el) { content.scrollTo({ top: el.offsetTop - 8, behavior: 'smooth' }); setActive(id); }
    }
    links.forEach(function (a) { a.addEventListener('click', function () { goTo(a.dataset.goto); }); });

    var sections = links.map(function (a) { return document.getElementById(a.dataset.goto); }).filter(Boolean);
    function spy() {
        if (content.scrollTop + content.clientHeight >= content.scrollHeight - 4) {
            setActive(sections[sections.length - 1].id); return;
        }
        var y = content.scrollTop + 80, cur = sections[0];
        for (var i = 0; i < sections.length; i++) { if (sections[i].offsetTop <= y) cur = sections[i]; }
        if (cur) setActive(cur.id);
    }
    content.addEventListener('scroll', spy);
    spy();

    window.PpFinishedHelp = { open: open, close: close };
})();
</script>
