/* Book viewer styles - loaded only when needed */
.book-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none; /* toggled to flex when opened */
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.book-overlay.open { display: flex; }

.book-modal {
  position: relative;
  width: 800px;
  height: 480px;
  background: #f9f6ef; /* paper-like */
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 2px #bca787;
  overflow: hidden;
  border: 8px solid #c8b796; /* book edges look */
}
/* Allow JS to set size via data attributes without inline style */
.book-modal[data-book-w] { width: attr(data-book-w px); }
.book-modal[data-book-h] { height: attr(data-book-h px); }

.book-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: linear-gradient(#e8dcc6, #dbc9a7);
  border-bottom: 1px solid #bca787;
}
.book-title { font-weight: 700; color: #5a4732; font-family: Merriweather, Georgia, serif; }
.book-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #5a4732;
  font-size: 18px;
}

.book-frame {
  position: absolute;
  top: 36px; /* below header */
  bottom: 56px; /* above a taller footer to avoid overlap */
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 0 20px; /* exactly 20px from page to frame edge */
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 3px
  );
}

.book-spread {
  position: relative;
  --book-gutter: 56px; /* fixed gutter */
  /* Fill the frame minus 20px padding on each side */
  width: calc(100% - 40px);
  height: 360px;
  display: grid;
  grid-template-columns: 1fr var(--book-gutter) 1fr; /* pages grow to fill available width evenly */
  grid-template-rows: 360px;
  gap: 0;
  position: relative;
  z-index: 1; /* keep page below gutter marker */
}
.book-spread { margin: 0 auto; }
.book-gutter {
  grid-column: 2;
  background: linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,.02));
  box-shadow: inset 0 0 12px rgba(0,0,0,.12);
  width: var(--book-gutter);
  position: relative;
  z-index: 3; /* above page drop shadows so the marker is visible */
}

.book-page {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  border-radius: 5px;
  padding: 16px 18px; /* base padding; overridden below to mirror sides */
  overflow: auto;
  font-family: Lato, Arial, sans-serif;
  color: #222;
  font-size: 11px; /* smaller overall font size */
  line-height: 1.5;
  position: relative;
  z-index: 1; /* ensure gutter (z=3) sits above */
  /* Create an inner gap near the gutter by shrinking page within its grid track */
  width: calc(100% - 16px) !important; /* leave 16px free on gutter side for clearer separation */
  box-sizing: border-box;
}
/* Set page size from data attributes if present */
.book-page[data-page-w] { width: attr(data-page-w px) !important; }
.book-page[data-page-h] { height: attr(data-page-h px) !important; }
.book-left { grid-column: 1; justify-self: start; margin-right: 0; }
.book-right { grid-column: 3; justify-self: end; margin-left: 0; }
/* Mirror paddings: slightly larger on the outer edge for balance */
.book-left { padding-left: 18px; padding-right: 16px; }
.book-right { padding-right: 18px; padding-left: 16px; }
/* Cast shadows outward only, to avoid bleeding into the gutter */
.book-left { box-shadow: -2px 2px 8px rgba(0,0,0,.12); }
.book-right { box-shadow: 2px 2px 8px rgba(0,0,0,.12); }
.book-page h2 { margin: 0 0 8px; font-family: Merriweather, Georgia, serif; font-size: 14px; color: #0a3d62; }
.book-page h2 { text-align: center; }
.book-page p { margin: 0 0 0.6em; }
.book-page ul, .book-page ol { margin: 0 0 0.6em 1.25em; padding: 0; }
.book-page li { margin: 0.2em 0; }

/* Code blocks and copy buttons inside book pages */
.book-page pre {
  background: #0b1020;
  color: #d8f6ff;
  padding: 8px 10px;
  border-radius: 6px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 10px;
  line-height: 1.45;
  border: 1px solid rgba(255,255,255,0.08);
  white-space: pre-wrap; /* allow long commands to wrap */
  word-break: break-word; /* prevent overflow on long tokens */
}
.book-copy-block { position: relative; margin: 6px 0 10px; }
.book-copy-btn {
  position: absolute;
  top: 6px; right: 6px;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid #0a84ff;
  background: #0a84ff;
  color: #fff;
  cursor: pointer;
}
.book-copy-btn.copied { background: #17b26a; border-color: #17b26a; }
.book-hint { color: #445; font-size: 10px; margin: 4px 0 4px; }

.book-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px; /* a bit taller to sit below the pages comfortably */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}

.book-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #0a84ff;
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: transform .08s ease, opacity .2s ease, background .2s ease;
}
.book-arrow.fast { background: #e11d48; }
.book-arrow:hover { transform: scale(1.06); }
.book-arrow:disabled {
  opacity: .35;
  cursor: not-allowed;
  background: #6ea8ff;
}
.book-page-num {
  font-size: 12px;
  color: #5a4732;
  opacity: .8;
}

/* Optional: small screens - allow scroll while preserving size */
@media (max-width: 650px) {
  .book-modal { width: 95vw; height: 70vh; }
  /* Single-page layout on mobile: hide gutter and right page, let left page fill */
  .book-spread {
    width: calc(100% - 40px);
    height: 360px;
    grid-template-columns: 1fr; /* single column */
    grid-template-rows: 360px;
  }
  .book-gutter, .book-right { display: none !important; }
  .book-left { grid-column: 1; }
  .book-page { width: auto !important; height: 360px !important; }
}

/* Screen-reader only utility */
.sr-only {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Bright orange background for pages 50–55 */
.page-orange { background: #ffe0b3 !important; }
/* Bright red for pages 56–65 */
.page-red { background: #ffb3b4 !important; }
/* Bright blue for pages 66–72 */
.page-blue { background: #b3d4ff !important; }
/* Bright green for pages 73–98 */
.page-green { background: #b9f2ee !important; }
/* Bright violet for pages 99–105 */
.page-violet { background: #d6c5f3 !important; }
/* Bright yellow for pages 106–114 */
.page-yellow { background: #fff2b3 !important; }
/* Bright black (deep dark) for pages 115–127 */
.page-black { background: #2b2b2b !important; }

/* Shared readable styles for any dark page variant */
.page-dark { color: #f5f5f5 !important; }
.page-dark h2 { color: #ffe58f !important; }
.page-dark pre { background: #000 !important; color: #d8f6ff !important; border-color: rgba(255,255,255,0.15) !important; }

/* Additional unique bright colors for extended ranges */
.page-pink { background: #ffc2de !important; }
.page-cyan { background: #b3e7ff !important; }
.page-lime { background: #d6f5a3 !important; }
.page-gold { background: #ffd9a6 !important; }
.page-indigo { background: #c7d1ff !important; }
.page-royal { background: #d3b8ff !important; }
.page-forest { background: #b9f6ca !important; }
.page-volcano { background: #ffc7b3 !important; }
.page-magenta { background: #f9c2df !important; }
.page-blue2 { background: #c6e0ff !important; }
.page-amber2 { background: #ffd1a6 !important; }
.page-olive { background: #d7edb0 !important; }
.page-brown { background: #e6c8b3 !important; }
.page-teal { background: #b7efe9 !important; }
.page-rose { background: #ffc2cd !important; }
.page-mint { background: #c6f5e0 !important; }
.page-azure { background: #bfe1ff !important; }
.page-amber { background: #ffe8a6 !important; }
.page-sky { background: #b2ecf2 !important; }
.page-navy { background: #c3d2e6 !important; }
.page-emerald { background: #c3f0d6 !important; }
.page-coral { background: #ffd0c1 !important; }
.page-sun { background: #fff2b3 !important; }
.page-lightindigo { background: #d7e1ff !important; }

/* Pastel green for Installation & Requirements (1–49) */
.page-sage { background: #d6f5e1 !important; }