/* SiegePoint guide "booklet" layer — turns a long scroll into discrete paper sheets you
   page through. Reuses each guide's own CSS variables (with fallbacks) so it stays on-brand.
   Applied by booklet.js; if the script fails, none of this activates and the original page
   renders normally. */
body.bk-on { overflow: hidden !important; margin: 0 !important; }

.bk-stage {
  position: fixed !important; inset: 0 !important; z-index: 2 !important; display: block !important;
  overflow-y: auto !important; overscroll-behavior: contain;
  scroll-snap-type: y proximity; scroll-padding-top: 3.4vh; -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(120% 60% at 50% -12%, rgba(245,146,30,0.07), transparent 62%),
    var(--bg, #14181F);
  padding: 3.4vh 0 13vh;
}

/* A real page, sized by paper proportions (portrait ~ Letter), NOT the viewport — so large
   blocks (the title header, figures, tables) fit a page instead of each becoming its own. */
.bk-sheet {
  position: relative !important; box-sizing: border-box !important;
  width: min(92vw, 800px) !important; height: calc(min(92vw, 800px) * 1.294) !important;
  min-width: 0 !important; max-width: none !important; min-height: 0 !important; flex: 0 0 auto !important;
  margin: 0 auto 3.6vh !important; scroll-snap-align: start;
  background: var(--panel, #1B212B);
  border: 1px solid var(--line, #2E3745); border-radius: 5px;
  box-shadow: 0 26px 64px -16px rgba(0,0,0,0.62), 0 1px 0 rgba(255,255,255,0.03) inset;
  overflow: hidden !important; display: flex !important; flex-direction: column !important;
}
.bk-sheet::before {   /* a faint gilt edge — the "spine" */
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--signal, #F5921E), transparent); opacity: 0.55;
}
.bk-body { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; display: block !important; box-sizing: border-box !important; padding: 2.9rem 3.1rem 1.2rem !important; }
.bk-body > :first-child { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
.bk-body h2.sec { border-top: 0; padding-top: 0; }        /* section rule is redundant at a sheet top */
.bk-oversize .bk-body { overflow-y: auto; }               /* a single figure/table taller than a page scrolls in-place */

.bk-foot {
  flex: 0 0 auto; padding: 0 3.1rem 1.1rem; display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono, ui-monospace, monospace); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint, #6B7280);
}
.bk-foot .bk-brand { color: var(--dim, #99A0AD); }

/* floating pager */
.bk-pager {
  position: fixed; bottom: 2.4vh; left: 50%; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 0.15rem;
  background: rgba(17,20,27,0.97);
  border: 1px solid var(--line, #2E3745); border-radius: 999px; padding: 0.35rem 0.45rem;
  box-shadow: 0 10px 34px rgba(0,0,0,0.55);
}
.bk-btn {
  font: 600 1rem/1 var(--mono, monospace); color: var(--ink, #E6E3DA);
  background: transparent; border: 0; cursor: pointer; padding: 0.3rem 0.65rem; border-radius: 999px;
}
.bk-btn:hover:not([disabled]) { background: var(--panel-2, #212836); color: var(--signal, #F5921E); }
.bk-btn[disabled] { opacity: 0.28; cursor: default; }
.bk-count { font: 0.72rem/1 var(--mono, monospace); letter-spacing: 0.08em; color: var(--dim, #99A0AD); min-width: 4.4rem; text-align: center; }
.bk-toc-btn {
  font: 600 0.64rem/1 var(--mono, monospace); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim, #99A0AD); background: transparent; border: 0; border-left: 1px solid var(--line, #2E3745);
  cursor: pointer; padding: 0.4rem 0.85rem 0.4rem 0.8rem; margin-left: 0.2rem;
}
.bk-toc-btn:hover { color: var(--signal, #F5921E); }

/* contents flyout */
.bk-toc {
  position: fixed; bottom: 7.4vh; left: 50%; transform: translateX(-50%); z-index: 55;
  width: min(92vw, 480px); max-height: 62vh; overflow-y: auto; display: none;
  background: var(--panel, #1B212B); border: 1px solid var(--line, #2E3745); border-radius: 12px; padding: 0.55rem;
  box-shadow: 0 22px 54px rgba(0,0,0,0.62);
}
.bk-toc.open { display: block; }
.bk-toc a {
  display: flex; gap: 0.7rem; align-items: baseline; padding: 0.5rem 0.8rem; border-radius: 7px;
  color: var(--ink, #E6E3DA); font-size: 0.92rem; text-decoration: none;
}
.bk-toc a:hover { background: var(--panel-2, #212836); }
.bk-toc a.on { color: var(--signal, #F5921E); }
.bk-toc a .n { font: 0.7rem/1.4 var(--mono, monospace); color: var(--signal, #F5921E); white-space: nowrap; }

@media (max-width: 640px) {
  .bk-body { padding: 1.9rem 1.5rem 1rem; }
  .bk-foot { padding: 0 1.5rem 0.9rem; }
}
@media print {
  body.bk-on { overflow: visible; }
  .bk-pager, .bk-toc { display: none !important; }
  .bk-stage { position: static; overflow: visible; padding: 0; background: #fff; }
  .bk-sheet { height: auto; box-shadow: none; border: 0; margin: 0; page-break-after: always; break-after: page; }
}