{{-- Fullscreen modal for info pages opened from the sidebar footer (see /s/js/page-modal.js) --}}
<div id="page-modal" style="display: none;" role="dialog" aria-modal="true">
  <div class="pgm-header">
    <h3 class="pgm-title"></h3>
    <div class="pgm-actions">
      <button type="button" class="pgm-close" title="Close" aria-label="Close">&times;</button>
    </div>
  </div>
  <div class="pgm-body" tabindex="-1"></div>
</div>
<style>
  #page-modal {
    /* Covers only the content area: below the navbar, between the sidebars (page-modal.js sets the insets).
       Just below the sidebar drag handles (899) and sidebars (900) so they keep working while it's open. */
    position: fixed; z-index: 895;
    top: var(--pgm-top, 0px); right: var(--pgm-right, 0px); bottom: 0; left: var(--pgm-left, 0px);
    flex-direction: column;
    background: var(--bg); color: var(--text-color, #fff);
  }
  /* The Onara viewer (10050) lifts the sidebar (10060) and its drag zone (10059) above itself; keep the same
     order: page over Onara, still under the sidebar controls and the navbar (10070) */
  body.onara-modal-open #page-modal { z-index: 10055; }
  #page-modal .pgm-header {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 20px; border-bottom: 1px solid var(--accent);
  }
  /* Height matched to the sidebar tab row (page-modal.js measures it); the close button scales with it */
  #page-modal.pgm-header-synced .pgm-header {
    box-sizing: border-box; height: var(--pgm-header-h); padding-top: 0; padding-bottom: 0;
  }
  #page-modal.pgm-header-synced .pgm-close {
    width: calc(var(--pgm-header-h) - 12px); height: calc(var(--pgm-header-h) - 12px);
    font-size: 1.3em;
  }
  #page-modal .pgm-title {
    margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 1em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  }
  #page-modal .pgm-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  #page-modal .pgm-close {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    margin: 0; padding: 0; background: none; border: 1px solid transparent; border-radius: 0;
    color: var(--text-color, #fff); font-size: 1em; line-height: 1; cursor: pointer; text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
  }
  #page-modal .pgm-close { font-size: 1.6em; border-color: rgba(255, 255, 255, 0.25); }
  #page-modal .pgm-close:hover { color: var(--accent); border-color: var(--accent); }
  #page-modal .pgm-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* Scrollbar hidden, scrolling kept (wheel, touch, keyboard). Firefox only honours scrollbar-width;
       !important so a site-wide scrollbar style can't bring it back */
    scrollbar-width: none !important;
    -ms-overflow-style: none;
  }
  #page-modal .pgm-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
  /* Focusable so arrow keys / PageUp / PageDown / Space scroll it once clicked into, without an outline */
  #page-modal .pgm-body:focus { outline: none; }
  #page-modal .pgm-loading { padding: 60px 20px; text-align: center; color: var(--text-muted, #aaa); }
  #page-modal .pgm-loading a { color: var(--accent); }
</style>
<script src="/s/js/page-modal.js?v={{ ts }}"></script>