/**
 * ourboox-reader.css
 * Ourboox · Reader Stylesheet
 * Page presentation, layout, shadows, covers, endpapers.
 *
 * Loaded only on the reader page (OurbooxReaderV2.php).
 * Depends on ourboox-book.css being loaded first (shared tokens).
 *
 * Sections:
 *  01 Reader tokens  — geometry, title page, cover & endpaper custom properties
 *  02 Scale overrides — Real3D renders pages at 1000px; scale tokens to match
 *  08 Book page
 *  09 Title page
 *  10 Open spread
 *  11 Cover
 *  12 Inside cover / endpaper
 *  13 Blank page
 *  14 Canonical page content classes  (.obx-page-embed / -image / -blank)
 */


/* ==========================================================================
   01 READER TOKENS
   ========================================================================== */

:root {
  /* --- Page geometry --- */
  --book-page-size:   600px;
  --book-page-pad:    56px;
  --book-page-radius: 4px;

  /* --- Title page --- */
  --tp-title-size:  60px;
  --tp-author-size: 22px;
  --tp-label-size:  13px;
  --tp-mark-size:   12px;

  /* --- Cover & endpaper --- */
  --book-cover-dark:     #0B1B2E;
  --book-cover-mid:      #122339;
  --book-cover-light:    #1F3554;
  --book-cover-ink:      #FBFAF6;
  --book-endpaper-light: #F2EBD7;
  --book-endpaper-dark:  #E8DEC2;
  --book-page-bg:        #FAFAF9;
}


/* ==========================================================================
   02 SCALE OVERRIDES
   Real3D renders page HTML into a 1000×1000 container while the book design
   tokens are authored at 600px. Override all size tokens so the content fills
   the canvas correctly without any manual unit changes in the markup.
   ========================================================================== */

.obx-reader-flipbook-el .flipbook-page-html {
  --book-scale: calc(1000 / 600);

  --book-h1-size:      calc(36px * var(--book-scale));
  --book-h2-size:      calc(26px * var(--book-scale));
  --book-h3-size:      calc(19px * var(--book-scale));
  --book-body-size:    calc(17px * var(--book-scale));
  --book-lead-size:    calc(19px * var(--book-scale));
  --book-caption-size: calc(14px * var(--book-scale));
  --book-pull-size:    calc(22px * var(--book-scale));
  --book-page-pad:     calc(56px * var(--book-scale));
  --tp-title-size:     calc(60px * var(--book-scale));
  --tp-author-size:    calc(22px * var(--book-scale));
  --tp-label-size:     calc(13px * var(--book-scale));
  --tp-mark-size:      calc(12px * var(--book-scale));
}


/* ==========================================================================
   08 BOOK PAGE — the 600 × 600 canvas
   ========================================================================== */

.obx-book-content .book-page {
  width: var(--book-page-size);         /* 600px */
  height: var(--book-page-size);
  background: var(--book-page-bg);
  border: 1px solid var(--book-rule);
  border-radius: var(--book-page-radius);
  box-shadow:
          0 1px 2px rgba(17, 24, 39, 0.04),
          0 20px 40px -12px rgba(17, 24, 39, 0.10),
          0 8px 16px -8px rgba(17, 24, 39, 0.06);
  padding: var(--book-page-pad);        /* 56px */
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}


/* ==========================================================================
   09 TITLE PAGE — 600 × 600
   ========================================================================== */

.obx-page--title-page {
  width: 100%;
  height: 100%;
  background: var(--book-page-bg);
  border: 1px solid #E8E2D2;
  /*border-radius: var(--book-page-radius);*/
  /*box-shadow:*/
  /*        0 1px 2px rgba(17, 24, 39, 0.04),*/
  /*        0 30px 50px -16px rgba(17, 24, 39, 0.22),*/
  /*        0 12px 24px -10px rgba(17, 24, 39, 0.10);*/
  padding: 80px 72px;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 1fr auto auto;
  text-align: center;
  font-family: var(--book-font);
  color: var(--book-fg);
}

/* Title — vertically centered in the remaining space */
.obx-page--title-page .tp-main {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.obx-page--title-page .tp-title {
  font-family: var(--book-font);
  font-size: var(--tp-title-size);
  font-weight: 600;
  line-height: 1.05;
  color: var(--book-fg-strong);
  letter-spacing: -0.015em;
  margin: 0;
}

/* Author */
.obx-page--title-page .tp-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
}

.obx-page--title-page .tp-author .by {
  font-family: var(--book-font);
  font-size: var(--tp-label-size);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--book-fg-soft);
}

.obx-page--title-page .tp-author .name {
  font-family: var(--book-font);
  font-size: var(--tp-author-size);
  font-weight: 500;
  color: var(--book-fg-strong);
}

/* Publisher mark + year */
.obx-page--title-page .tp-pub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
}

.obx-page--title-page .tp-pub .mark {
  font-family: 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--tp-mark-size);
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--book-accent);
}

.obx-page--title-page .tp-pub .place {
  font-family: var(--book-font);
  font-size: var(--tp-mark-size);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--book-fg-soft);
}


/* ==========================================================================
   10 OPEN SPREAD — two facing pages with realistic shadows
   ========================================================================== */

/*.obx-book-content .book-spread {*/
/*  position: relative;*/
/*  display: inline-flex;*/
/*  filter: drop-shadow(0 24px 28px rgba(15, 23, 42, 0.16));*/
/*}*/

.obx-book-content.book-spread-page {
  padding: 44px 40px;
  box-sizing: border-box;
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAF8 100%);
  color: var(--book-fg);
  overflow: hidden;
  font-family: var(--book-font);
}

.obx-book-content.book-spread-page--left {
  border-radius: 3px 0 0 3px;
  box-shadow:
          inset -28px 0 30px -24px rgba(17, 24, 39, 0.28),
          inset -1px 0 0 rgba(17, 24, 39, 0.05),
          -1px 0 0 #F1EFEA,
          -2px 0 0 #E8E5DE,
          -3px 0 0 #F1EFEA,
          -4px 0 0 #DEDAD0,
          -5px 0 0 #E8E5DE;
}

/* Spine line down the centre */
/*.obx-book-content.book-spread-page--left:before {*/
/*  content: '';*/
/*  position: absolute;*/
/*  top: 0;*/
/*  bottom: 0;*/
/*  right: 0;*/
/*  width: 2px;*/
/*  background: rgba(17, 24, 39, 0.14);*/
/*  z-index: 10;*/
/*  transform: translateX(-0.5px);*/
/*}*/

.obx-book-content.book-spread-page--right {
  border-radius: 0 3px 3px 0;
  box-shadow:
          inset 28px 0 30px -24px rgba(17, 24, 39, 0.28),
          inset 1px 0 0 rgba(17, 24, 39, 0.05),
          1px 0 0 #F1EFEA,
          2px 0 0 #E8E5DE,
          3px 0 0 #F1EFEA,
          4px 0 0 #DEDAD0,
          5px 0 0 #E8E5DE;
}

/*.obx-book-content.book-spread-page--right:before {*/
/*  content: '';*/
/*  position: absolute;*/
/*  top: 0;*/
/*  bottom: 0;*/
/*  left: 0;*/
/*  width: 2px;*/
/*  background: rgba(17, 24, 39, 0.14);*/
/*  z-index: 10;*/
/*  transform: translateX(-0.5px);*/
/*}*/

/* Spine line down the centre */
/*.obx-book-content.book-spread::before {*/
/*  content: '';*/
/*  position: absolute;*/
/*  top: 0;*/
/*  bottom: 0;*/
/*  left: 50%;*/
/*  width: 1px;*/
/*  background: rgba(17, 24, 39, 0.14);*/
/*  z-index: 10;*/
/*  transform: translateX(-0.5px);*/
/*}*/

/* Soft sheen along the gutter */
/*.obx-book-content.book-spread::after {*/
/*  content: '';*/
/*  position: absolute;*/
/*  top: 8px;*/
/*  bottom: 8px;*/
/*  left: 50%;*/
/*  width: 6px;*/
/*  transform: translateX(-50%);*/
/*  background: linear-gradient(90deg,*/
/*  rgba(255, 255, 255, 0) 0%,*/
/*  rgba(255, 255, 255, 0.35) 50%,*/
/*  rgba(255, 255, 255, 0) 100%);*/
/*  z-index: 9;*/
/*  pointer-events: none;*/
/*  filter: blur(1px);*/
/*}*/

/*.obx-book-content.book-spread-page .running-head {*/
/*  font-family: var(--book-font);*/
/*  font-size: 11px;*/
/*  letter-spacing: 2.5px;*/
/*  text-transform: uppercase;*/
/*  color: var(--book-fg-soft);*/
/*  text-align: center;*/
/*  margin-bottom: 24px;*/
/*}*/

.obx-book-content.book-spread-page--left .pageno-corner,
.obx-book-content.book-spread-page--right .pageno-corner {
  position: absolute;
  bottom: 18px;
  font-family: var(--book-font);
  font-size: 24px;
  color: var(--book-fg-soft);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

.obx-book-content.book-spread-page--left .pageno-corner  { left: calc(50% - 10px); }
.obx-book-content.book-spread-page--right .pageno-corner { right: calc(50% - 10px); }


/* ==========================================================================
   11 COVER — closed front face
   ========================================================================== */

.obx-book-content .book-cover {
  width: 460px;
  height: 460px;
  border-radius: 3px 6px 6px 3px;
  position: relative;
  overflow: hidden;
  background:
          radial-gradient(ellipse at 30% 30%,
          var(--book-cover-light) 0%,
          var(--book-cover-mid)   60%,
          var(--book-cover-dark)  100%);
  box-shadow:
          inset 6px 0 0 rgba(255, 255, 255, 0.04),
          inset -1px 0 0 rgba(0, 0, 0, 0.35);
  filter: drop-shadow(0 36px 40px rgba(15, 23, 42, 0.32));
  padding: 56px 48px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--book-cover-ink);
}

.obx-book-content .book-cover::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.obx-book-content .book-cover .cover-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.obx-book-content .book-cover .cover-rule {
  width: 60px;
  height: 1px;
  background: rgba(251, 250, 246, 0.55);
}

.obx-book-content .book-cover .cover-eyebrow {
  font-family: var(--book-font);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(251, 250, 246, 0.70);
}

.obx-book-content .book-cover .cover-art {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
}

.obx-book-content .book-cover .cover-art svg {
  width: 180px;
  height: 180px;
  color: rgba(251, 250, 246, 0.85);
}

.obx-book-content .book-cover .cover-title {
  font-family: var(--book-font);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.05;
  text-align: center;
  color: var(--book-cover-ink);
  margin: 0;
  letter-spacing: -0.015em;
}

.obx-book-content .book-cover .cover-subtitle {
  font-family: var(--book-font);
  font-size: 14px;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
  color: rgba(251, 250, 246, 0.78);
  margin: 8px 0 0 0;
}

.obx-book-content .book-cover .cover-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.obx-book-content .book-cover .cover-author {
  font-family: var(--book-font);
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(251, 250, 246, 0.85);
}

.obx-book-content .book-cover .cover-mark {
  font-family: 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(251, 250, 246, 0.55);
  font-weight: 800;
}


/* ==========================================================================
   12 INSIDE COVER — turn-in + endpaper
   ========================================================================== */

.obx-book-content .book-cover-spread {
  position: relative;
  display: inline-flex;
  filter: drop-shadow(0 36px 40px rgba(15, 23, 42, 0.28));
}

.obx-book-content .book-cover-inside {
  width: 460px;
  height: 460px;
  border-radius: 3px 0 0 3px;
  position: relative;
  overflow: hidden;
  display: flex;
  background:
          radial-gradient(ellipse at 30% 30%,
          var(--book-cover-light) 0%,
          var(--book-cover-mid)   60%,
          var(--book-cover-dark)  100%);
  box-shadow: inset -32px 0 38px -28px rgba(17, 24, 39, 0.55);
}

.obx-book-content .book-cover-inside .endpaper {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 14px;
  right: 0;
  background:
          radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 50%),
          linear-gradient(180deg,
          var(--book-endpaper-light) 0%,
          var(--book-endpaper-dark)  100%);
  box-shadow:
          0 0 0 1px rgba(17, 24, 39, 0.10),
          inset 0 2px 4px rgba(17, 24, 39, 0.10);
  padding: 42px 36px 42px 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--book-fg);
  font-family: var(--book-font);
}

.obx-book-content .book-cover-inside .endpaper::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: 0;
  height: 6px;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.18) 0%, rgba(17,24,39,0) 100%);
  pointer-events: none;
}

.obx-book-content .book-cover-inside .endpaper::after {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 6px;
  background: linear-gradient(90deg, rgba(17, 24, 39, 0.18) 0%, rgba(17,24,39,0) 100%);
  pointer-events: none;
}

.obx-book-content .book-cover-inside .endpaper .ex-libris {
  border: 1px solid rgba(17, 24, 39, 0.30);
  padding: 28px 36px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 280px;
}

.obx-book-content .book-cover-inside .endpaper .ex-libris .label {
  font-family: var(--book-font);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--book-fg-soft);
}

.obx-book-content .book-cover-inside .endpaper .ex-libris .name {
  font-family: var(--book-font);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: var(--book-fg-strong);
  line-height: 1.2;
}

.obx-book-content .book-cover-inside .endpaper .ex-libris .meta {
  font-family: var(--book-font);
  font-size: 11px;
  color: var(--book-fg-soft);
  letter-spacing: 1px;
}

.obx-book-content .book-cover-inside .endpaper .mini-mark {
  margin-top: 18px;
  width: 38px;
  height: 1px;
  background: rgba(17, 24, 39, 0.25);
}

.obx-book-content .book-cover-spread .obx-page--title-page--right {
  width: 460px;
  height: 460px;
  border-radius: 0 3px 3px 0;
  padding: 56px 48px;
  box-shadow: inset 32px 0 38px -28px rgba(17, 24, 39, 0.50);
}

.obx-book-content .book-cover-spread .obx-page--title-page--right .tp-title        { font-size: 44px; }
.obx-book-content .book-cover-spread .obx-page--title-page--right .tp-subtitle     { font-size: 15px; max-width: 280px; }
.obx-book-content .book-cover-spread .obx-page--title-page--right .tp-author .name { font-size: 18px; }
.obx-book-content .book-cover-spread .obx-page--title-page--right .tp-pub          { margin-top: 18px; }

.obx-book-content .book-cover-spread::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(17, 24, 39, 0.25);
  z-index: 10;
  transform: translateX(-0.5px);
}


/* ==========================================================================
   13 BLANK PAGE
   ========================================================================== */

.obx-page--blank-page {
  background: var(--book-page-bg);
}


/* ==========================================================================
   14 CANONICAL PAGE CONTENT CLASSES
   Shared between editor page components (Embed.vue etc.) and reader
   buildPages(). Define the layout contract once here so both contexts
   render identically.
   ========================================================================== */

/* Page content areas — shared between editor and reader */

.obx-page-embed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.obx-page-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: none;
  max-width: 100%;
}

.obx-page-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--book-page-bg);
  overflow: hidden;
}

.obx-page-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.obx-page-blank {
  width: 100%;
  height: 100%;
  background: var(--book-page-bg);
}

.obx-book-content {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}