/* =========================================================================
   SCREEN PREVIEW
   ========================================================================= */

body {
  background: #1a1a1a;
  margin: 0;
  padding: 4rem 0 2rem;
}

.pagedjs_pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.pagedjs_page {
  background: #fbf7ec;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Fallback: if Paged.js fails or hasn't run yet, still show the raw page on
   a cream sheet so the user sees something instead of a black screen.
   Layout (centered, max-width, padding, shadow) applies in any mode; the
   cream-paper colors are scoped to NOT(.dark) so dark mode can override. */
body:not(.pagedjs_running):not([data-pagedjs]) .book,
body:not(.pagedjs_running):not([data-pagedjs]) .prophetic-intro,
body:not(.pagedjs_running):not([data-pagedjs]) .panorama,
body:not(.pagedjs_running):not([data-pagedjs]) .chapter-panorama,
body:not(.pagedjs_running):not([data-pagedjs]) .book-index,
body:not(.pagedjs_running):not([data-pagedjs]) .solar-key-index,
body:not(.pagedjs_running):not([data-pagedjs]) .master-timeline,
body:not(.pagedjs_running):not([data-pagedjs]) .how-to-read,
body:not(.pagedjs_running):not([data-pagedjs]) .editorial-position,
body:not(.pagedjs_running):not([data-pagedjs]) .drp-chart,
body:not(.pagedjs_running):not([data-pagedjs]) .fc-chart,
body:not(.pagedjs_running):not([data-pagedjs]) .pc-chart,
body:not(.pagedjs_running):not([data-pagedjs]) .hg-study {
  display: block;
  width: 8.5in;
  max-width: calc(100vw - 2rem);
  margin: 1rem auto;
  /* Symmetric on screen since there's no binding gutter here. Real print
     margins are 0.40 outer / 0.75 gutter alternating per spread. */
  padding: 0.40in 0.40in 0.35in 0.40in;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
}

/* Light theme: cream paper. */
body:not(.pagedjs_running):not([data-pagedjs]):not(.dark) .book,
body:not(.pagedjs_running):not([data-pagedjs]):not(.dark) .prophetic-intro,
body:not(.pagedjs_running):not([data-pagedjs]):not(.dark) .panorama,
body:not(.pagedjs_running):not([data-pagedjs]):not(.dark) .chapter-panorama,
body:not(.pagedjs_running):not([data-pagedjs]):not(.dark) .book-index,
body:not(.pagedjs_running):not([data-pagedjs]):not(.dark) .solar-key-index,
body:not(.pagedjs_running):not([data-pagedjs]):not(.dark) .master-timeline,
body:not(.pagedjs_running):not([data-pagedjs]):not(.dark) .how-to-read,
body:not(.pagedjs_running):not([data-pagedjs]):not(.dark) .editorial-position,
body:not(.pagedjs_running):not([data-pagedjs]):not(.dark) .drp-chart,
body:not(.pagedjs_running):not([data-pagedjs]):not(.dark) .fc-chart,
body:not(.pagedjs_running):not([data-pagedjs]):not(.dark) .pc-chart,
body:not(.pagedjs_running):not([data-pagedjs]):not(.dark) .hg-study {
  background: #fbf7ec;
  color: #1a1a1a;
}

/* Dark theme: deep ink paper. */
body.dark:not(.pagedjs_running):not([data-pagedjs]) .book,
body.dark:not(.pagedjs_running):not([data-pagedjs]) .prophetic-intro,
body.dark:not(.pagedjs_running):not([data-pagedjs]) .panorama,
body.dark:not(.pagedjs_running):not([data-pagedjs]) .chapter-panorama,
body.dark:not(.pagedjs_running):not([data-pagedjs]) .book-index,
body.dark:not(.pagedjs_running):not([data-pagedjs]) .solar-key-index,
body.dark:not(.pagedjs_running):not([data-pagedjs]) .master-timeline,
body.dark:not(.pagedjs_running):not([data-pagedjs]) .how-to-read {
  background: #11141b;
  color: #e2dec8;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85), 0 0 0 1px #2a3040;
}

/* Paged.js's page-break-before has no meaning in screen view; reset so
   sections sit naturally one after another. */
body:not(.pagedjs_running):not([data-pagedjs]) .prophetic-intro,
body:not(.pagedjs_running):not([data-pagedjs]) .epistle-header,
body:not(.pagedjs_running):not([data-pagedjs]) .chapter-panorama {
  page-break-before: auto;
  page-break-after: auto;
}

/* =========================================================================
   SPINE TAB (vertical rotated section label, like Fresh Look's outer edge)
   Fixed to the right side of the viewport in screen view. Color cycles
   through the entity palette per canonical section so the reader always
   knows which division of scripture they're in.
   ========================================================================= */
.spine-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #fff;
  padding: 1.4em 0.55em;
  z-index: 50;
  border-radius: 4px 0 0 4px;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.35);
  user-select: none;
  pointer-events: none;
}
.spine-tab[data-section="torah"]            { background: #b9591f; }
.spine-tab[data-section="former_prophets"]  { background: #2876a8; }
.spine-tab[data-section="latter_prophets"]  { background: #6e2e8b; }
.spine-tab[data-section="writings"]         { background: #2c8a8a; }
.spine-tab[data-section="nt"]               { background: #8a3d4a; }
.spine-tab[data-section="apocrypha"]        { background: #4d8b5f; }

body.dark .spine-tab {
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.7);
}

/* Hide the spine tab in print preview - the running header at the top of
   the page already names the book, and a fixed-position element doesn't
   make sense across paginated pages. */
@media print {
  .spine-tab { display: none; }
}
.pagedjs_running .spine-tab,
[data-pagedjs] .spine-tab { display: none; }

/* =========================================================================
   FLOATING SITE TOOLBAR (screen only; hidden in print)
   ========================================================================= */
.site-toolbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2.6rem;
  background: rgba(14, 26, 46, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #2a4a78;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1rem;
  z-index: 1000;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  color: #ddd;
}
.site-toolbar .tb-link {
  color: #d8c894;
  text-decoration: none;
  padding: 0.25rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 2px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.site-toolbar .tb-link:hover {
  background: rgba(216, 200, 148, 0.12);
  border-color: #d8c894;
}
.site-toolbar .tb-current {
  color: #fefcf6;
  font-weight: 600;
  letter-spacing: 0.05em;
  flex: 1;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-toolbar .tb-jump {
  background: #1a2a48;
  border: 1px solid #2a4a78;
  border-radius: 2px;
  color: #ddd;
  padding: 0.25rem 0.45rem;
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  max-width: 9rem;
}
.site-toolbar .tb-jump:hover { border-color: #d8c894; }
.site-toolbar .tb-btn {
  background: #1a2a48;
  border: 1px solid #2a4a78;
  border-radius: 2px;
  color: #d8c894;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.site-toolbar .tb-btn:hover {
  background: #2a3f6e;
  border-color: #d8c894;
}

/* Hide toolbar in print and inside pagedjs paginated view */
@media print {
  .site-toolbar { display: none; }
}
.pagedjs_running .site-toolbar,
[data-pagedjs] .site-toolbar { display: none; }

/* Toast notification (verse link copied) */
#toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(0.5rem);
  background: #1a2a48;
  border: 1px solid #d8c894;
  color: #fefcf6;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.95rem;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1001;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Responsive: tablet */
@media (max-width: 1024px) {
  body:not(.pagedjs_running):not([data-pagedjs]) .book {
    max-width: 100%;
    margin: 0 auto;
    padding: 0.7in;
  }
  body:not(.pagedjs_running):not([data-pagedjs]) .panorama {
    padding: 0.5in;
  }
  body:not(.pagedjs_running):not([data-pagedjs]) .panorama .grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5in;
  }
  body:not(.pagedjs_running):not([data-pagedjs]) .book-intro {
    padding: 0.4in 0.5in;
  }
}

/* Responsive: phone */
@media (max-width: 720px) {
  body:not(.pagedjs_running):not([data-pagedjs]) {
    background: #1a1a1a;
  }
  body:not(.pagedjs_running):not([data-pagedjs]) .book,
  body:not(.pagedjs_running):not([data-pagedjs]) .panorama,
  body:not(.pagedjs_running):not([data-pagedjs]) .book-intro,
  body:not(.pagedjs_running):not([data-pagedjs]) .book-index {
    max-width: 100%;
    margin: 0;
    padding: 1rem 1.1rem;
    box-shadow: none;
    background: #fbf7ec;
    box-sizing: border-box;
  }
  body:not(.pagedjs_running):not([data-pagedjs]) .panorama .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  body:not(.pagedjs_running):not([data-pagedjs]) .panorama h1 {
    font-size: 2rem;
  }
  body:not(.pagedjs_running):not([data-pagedjs]) p {
    font-size: 11pt;
    line-height: 1.55;
  }
  body:not(.pagedjs_running):not([data-pagedjs]) .chapter-num {
    font-size: 2.4rem;
  }
  body:not(.pagedjs_running):not([data-pagedjs]) .study-band {
    padding: 0.7rem;
    font-size: 10pt;
  }
  .site-toolbar {
    flex-wrap: wrap;
    height: auto;
    padding: 0.4rem 0.6rem;
    gap: 0.3rem;
    font-size: 0.72rem;
  }
  .site-toolbar .tb-current { order: -1; flex-basis: 100%; padding: 0.2rem 0; }
  body { padding-top: 5rem; }
}

@media (max-width: 480px) {
  body:not(.pagedjs_running):not([data-pagedjs]) p {
    font-size: 10.5pt;
  }
  body:not(.pagedjs_running):not([data-pagedjs]) .panorama {
    padding: 0.7rem;
  }
  body:not(.pagedjs_running):not([data-pagedjs]) .accent-strips,
  body:not(.pagedjs_running):not([data-pagedjs]) .triple-stamp,
  body:not(.pagedjs_running):not([data-pagedjs]) .timeline-ribbon {
    display: none;
  }
}

[data-no-print] { /* utility hook */ }