/* The book is a full-height spread with controls floating over its top edge. */
#reader-dialog.book-reader[open] {
  position: fixed; inset: 0; margin: 0; padding: 0;
  width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh;
  border: 0; border-radius: 0; background: #05090d; box-shadow: none;
  overflow: hidden;
}
#reader-dialog.book-reader::before,
#reader-dialog.book-reader::after,
#reader-dialog.book-reader > .reader-tabs,
#reader-dialog.book-reader > .reader-footer,
#reader-dialog.book-reader > .book-context,
#reader-dialog.book-reader .dialog-top > .eyebrow,
#reader-dialog.book-reader #book-zoom-in,
#reader-dialog.book-reader #book-zoom-out,
#reader-dialog.book-reader .book-controls-divider { display: none; }
#reader-dialog.book-reader > .dialog-top {
  position: absolute; right: 8px; top: 8px; padding: 0; z-index: 4;
  background: #06121de8; border-radius: 8px;
}
#reader-dialog.book-reader > .book-controls {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  max-width: calc(100% - 170px); padding: 5px 8px; gap: 8px;
  background: #06121de8; border: 0; border-radius: 8px;
  display: flex; flex-wrap: wrap; align-items: center;
}
#reader-dialog.book-reader #reader-scroll {
  display: block; width: 100%; height: 100%; min-height: 0;
  padding: 0; margin: 0; overflow: hidden;
}
#reader-dialog.book-reader #reader-content {
  width: 100%; height: 100%; overflow: hidden; padding: 0; margin: 0;
}
#reader-dialog.book-reader #reader-body {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; gap: 2px; padding: 0; margin: 0;
}
#reader-dialog.book-reader .book-page-image {
  flex: 0 1 auto; width: auto; height: 100%; max-height: 100%;
  max-width: calc(50% - 1px); min-width: 0; object-fit: contain;
  margin: 0; border-radius: 0; box-shadow: none; background: transparent;
}
#reader-dialog.book-reader .book-page-image:only-child { max-width: 100%; }
#reader-dialog.book-reader #book-sidebar { display: none; }
#reader-dialog.book-reader .book-control,
#reader-dialog.book-reader .book-context-back { min-height: 40px; color: #e8cd93; }

/* Enlarged spreads remain scrollable; 100% is the complete two-page fit. */
#reader-dialog.book-reader #reader-content { overflow: auto; }

/* A dedicated gutter keeps the binding clear of the printed page artwork. */
#reader-dialog.book-reader #reader-body {
  position: relative; gap: 32px; perspective: 1800px;
}
#reader-dialog.book-reader .book-page-image {
  max-width: calc(50% - 24px);
  backface-visibility: hidden;
}
#reader-dialog.book-reader #reader-body:has(.book-page-image:nth-child(2))::after {
  content: ''; position: absolute; z-index: 5;
  top: 2%; bottom: 2%; left: calc(50% - 24px); width: 48px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 28 28' preserveAspectRatio='none'%3E%3Cellipse cx='4' cy='18' rx='4' ry='3.2' fill='%23100d12' stroke='%23c7ac79' stroke-opacity='.65' stroke-width='.8'/%3E%3Cellipse cx='24' cy='10' rx='3.5' ry='3' fill='%23100d12' stroke='%23c7ac79' stroke-opacity='.65' stroke-width='.8'/%3E%3Cpath d='M4 18 C-2 4 22 0 24 10' fill='none' stroke='%23241b12' stroke-width='5'/%3E%3Cpath d='M4 18 C-2 4 22 0 24 10' fill='none' stroke='%23b89a62' stroke-width='3'/%3E%3Cpath d='M4 16 C1 6 20 3 23 10' fill='none' stroke='%23f0dfb8' stroke-width='1'/%3E%3C/svg%3E") center top / 48px 28px no-repeat round;
  filter: drop-shadow(2px 2px 2px #000b);
}
/* The outgoing right leaf folds left, revealing its reverse and the next spread. */
.book-turn-layer { position: absolute; inset: 0; pointer-events: none; perspective: 1800px; z-index: 6; }
.book-turn-leaf { transform-style: preserve-3d; }
.book-turn-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; backface-visibility: hidden; }
.book-turn-face.back { transform: rotateY(180deg); }

/* Blend the facing paper edges beneath the exposed wire arcs. */
#reader-dialog.book-reader #reader-body:has(.book-page-image:nth-child(2))::before {
  content: ''; position: absolute; left: calc(50% - 17px); width: 34px;
  height: var(--book-gutter-height, 100%); pointer-events: none;
  background: var(--book-gutter-image, linear-gradient(90deg, #81999b, #b1b6a4));
  background-size: 100% 100%;
}