/* Page turns for REAL books (turn.js) and the page-turn picker. Everything is scoped to #book.turn-on or to the picker,
   which exist only in a delivered/preview book: the landing sample book (StPageFlip) is not touched by this file. */

/* The book itself takes the drag; vertical pans stay with the browser so a caption that has to scroll still can. */
/* --turn-css is read by turn.js: without this file it falls back to StPageFlip instead of showing a broken book. */
#book.turn-on { --turn-css: 1; overscroll-behavior-x: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
/* A 3D turn rises toward the viewer and looks bigger than the page: it may overshoot the page a little on a desktop
   (there is room above and below, see TURN_HEADROOM) and not at all on a phone, where the page is as tall as the screen
   allows and the top bar and the page controls sit right next to it. Sideways it is free (the page curls off the screen). */
#book.turn-on { clip-path: inset(-26px -100vw -26px -100vw); }
#book.turn-on.is-single { clip-path: inset(0 -100vw 0 -100vw); }
#book.turn-on:active { cursor: grabbing; }
#book.turn-on .turn-store { display: none; }
#book.turn-on .turn-shift { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
#book.turn-on .layer { position: absolute; inset: 0; transform-style: preserve-3d; }
#book.turn-on .turn-shift .page { position: absolute; top: 0; }
#book.turn-on .page-blank { background: var(--paper); }
#book.turn-on .page-blank .ghost { position: absolute; inset: 0; transform: scaleX(-1); opacity: .07; filter: grayscale(.4); pointer-events: none; }

/* Gutter: a soft fold shadow on both pages next to the spine, so a spread reads as one book, not two cards. */
#book.turn-on .gutter { position: absolute; top: 0; bottom: 0; width: 14%; pointer-events: none; z-index: 3; }
#book.turn-on .gutter-l { right: 0; background: linear-gradient(to left, rgba(60, 40, 25, .16), rgba(60, 40, 25, .05) 35%, rgba(60, 40, 25, 0)); }
#book.turn-on .gutter-r { left: 0; background: linear-gradient(to right, rgba(60, 40, 25, .16), rgba(60, 40, 25, .05) 35%, rgba(60, 40, 25, 0)); }

/* Curl / hardcover: the turning leaf. */
#book.turn-on .leaf { position: absolute; top: 0; left: 0; transform-style: preserve-3d; pointer-events: none; z-index: 10; }
#book.turn-on .strip { position: absolute; left: 0; top: 0; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
#book.turn-on .face { position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#book.turn-on .face.back { transform: rotateY(180deg); }
#book.turn-on .face > .page { top: 0; }
#book.turn-on .face .tone, #book.turn-on .face .gloss { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#book.turn-on .face .tone { background: rgb(52, 36, 24); opacity: 0; }
#book.turn-on .face .gloss { background: rgb(255, 251, 242); opacity: 0; }
#book.turn-on .cast { position: absolute; top: 0; height: 100%; pointer-events: none; z-index: 8; opacity: 0; }
#book.turn-on .cast-r { background: linear-gradient(to right, rgba(40, 26, 14, .42), rgba(40, 26, 14, .14) 35%, rgba(40, 26, 14, 0)); }
#book.turn-on .cast-l { background: linear-gradient(to left, rgba(40, 26, 14, .42), rgba(40, 26, 14, .14) 35%, rgba(40, 26, 14, 0)); }
#book.turn-on .under-dim { position: absolute; top: 0; height: 100%; background: rgb(40, 26, 14); pointer-events: none; z-index: 7; opacity: 0; }

/* Page-block edges outside the spread: thicker on the side with more pages (read on the left, to come on the right). */
#book.turn-on .stack { position: absolute; top: 2px; bottom: 2px; pointer-events: none;
  background: repeating-linear-gradient(to right, #e9e3d8 0 1px, #fbf8f1 1px 2px); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
#book.turn-on .stack-l { right: 100%; }
#book.turn-on .stack-r { left: calc(var(--pw) * 2); }
html[data-theme="dark"] #book.turn-on .stack { background: repeating-linear-gradient(to right, #4a4256 0 1px, #2c2635 1px 2px); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
html[data-theme="dark"] #book.turn-on .gutter-l { background: linear-gradient(to left, rgba(0, 0, 0, .32), rgba(0, 0, 0, .1) 35%, rgba(0, 0, 0, 0)); }
html[data-theme="dark"] #book.turn-on .gutter-r { background: linear-gradient(to right, rgba(0, 0, 0, .32), rgba(0, 0, 0, .1) 35%, rgba(0, 0, 0, 0)); }

html[data-theme="dark"] #book.turn-on .board-edge { background: repeating-linear-gradient(to right, #4a4256 0 1px, #2c2635 1px 2px); }

/* Hardcover: board edge and sheen on the rigid page. */
#book.turn-on .board-edge { position: absolute; top: 0; height: 100%; transform-origin: 0 50%; transform: rotateY(90deg);
  background: repeating-linear-gradient(to right, #e4dccd 0 1px, #f6f1e7 1px 2px); }
#book.turn-on .sheen { position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: 0; }
#book.turn-on .sheen-front { background: linear-gradient(to right, rgba(40, 26, 14, .20), rgba(40, 26, 14, 0) 22%, rgba(255, 252, 245, .10) 62%, rgba(255, 252, 245, 0) 85%); }
#book.turn-on .sheen-back { background: linear-gradient(to left, rgba(40, 26, 14, .20), rgba(40, 26, 14, 0) 22%, rgba(255, 252, 245, .10) 62%, rgba(255, 252, 245, 0) 85%); }

/* Slide: the later page lies on top and slides in. On a phone the receding page is cut at the book's left edge (it
   used to leave a 15-20 px sliver of the old page beside the new one); the new page still comes in from the screen edge. */
#book.turn-on.is-single.turn-slide { clip-path: inset(0 -100vw 0 0); }
#book.turn-on .slide-layer { transform-origin: 50% 50%; will-change: transform; }
/* UB-READER-1022: phone leaf = its own 3D scene above the flat page under it. */
/* The lifting page rises toward the eye: while a phone page turns, it may rise over the title and the page buttons a little. */
#book.turn-on.is-single.is-turning { clip-path: inset(-56px -100vw -56px -100vw); }
#book.turn-on .leaf.leaf-phone { z-index: 10; }
#book.turn-on .leaf-phone .face { transform: translateZ(0.1px); }
#book.turn-on .leaf-phone .face.back { transform: rotateY(180deg) translateZ(0.1px); }
/* UB-READER-1023: phone flip (turn.js phoneFlip) = one rigid card turning about the spine (its left edge) over the flat
   next page. will-change lives on the card, which exists only while a page turns. Clipping only on the faces. */
#book.turn-on .flip-scene { position: absolute; top: 0; left: 0; z-index: 10; pointer-events: none; perspective-origin: 0 50%; }
#book.turn-on .flip-card { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
#book.turn-on .flip-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#book.turn-on .flip-face > .page { top: 0; }
/* UB-READER-1022: explicit order of the two pages of a slide; the turning layers never take a tap (the book host does). */
#book.turn-on .slide-under { z-index: 1; pointer-events: none; }
#book.turn-on .slide-top { z-index: 2; pointer-events: none; }
#book.turn-on .slide-dim { position: absolute; inset: 0; background: rgb(30, 22, 16); opacity: 0; pointer-events: none; z-index: 9; }
#book.turn-on .slide-edge { position: absolute; top: 0; height: 100%; width: 34px; transform: translateX(-100%); pointer-events: none;
  background: linear-gradient(to left, rgba(30, 22, 16, .22), rgba(30, 22, 16, 0)); }
#book.turn-on .slide-layer .page-illustration-fg { will-change: transform; }

/* ---------- page-turn picker (a delivered book's options row) ---------- */
.toolsel { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 4px 0 10px; border: 1px solid #cbc2d2; border-radius: 6px; background: transparent; color: var(--ink); font: 500 13px/1.2 system-ui, sans-serif; }
.toolsel:hover { background: #ded8e4; }
.toolsel:focus-within { outline: 3px solid #765598; outline-offset: 3px; }
.toolsel .lbl { white-space: nowrap; }
.toolsel select { appearance: auto; min-height: 36px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; padding: 0 2px; cursor: pointer; }
.toolsel select:focus-visible { outline: none; }
.toolsel option { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .toolsel { border-color: #4a4256; }
html[data-theme="dark"] .toolsel:hover { background: #2c2635; }
html[data-theme="dark"] .toolsel:focus-within { outline-color: #b79be0; }
/* Phone: the select alone is the control (its text names the style); the label stays for screen readers. */
@media (max-width: 520px) {
  .toolsel { gap: 0; padding: 0 2px 0 8px; }
  .toolsel .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 760px) and (min-height: 600px) { .toolsel { min-height: 38px; } .toolsel select { min-height: 34px; } }
@media (max-height: 400px) {
  .toolsel { min-height: 34px; padding: 0 2px 0 6px; }
  .toolsel .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* No arrow, the text names the style: the row must not run under the Next button. */
  .toolsel { padding: 0 2px; }
  .toolsel select { appearance: none; -webkit-appearance: none; min-height: 30px; padding: 0 8px; text-align: center; }
}
/* Short landscape phone: the options row sits at the right end of the page-turn row and the picker makes it too wide on
   narrow screens (it would run under the Next button). There the picker is left out; the saved choice still applies. */
@media (max-height: 400px) and (max-width: 849px) { #turnPicker { display: none; } }
/* UB-1020 (phone check 20.10): the picker keeps the width of its select. As a shrinking flex item the pill got narrower than its
   select on Android 360 and the select with its arrow stood 13 px outside it; the row gets its room from tighter gaps instead. */
.manifest-mode #readerTools .toolsel { flex: 0 0 auto; }
@media (max-width: 400px) {
  .manifest-mode #readerTools { gap: 6px; }
  .manifest-mode #readerTools .toolbtn { padding-left: 10px; padding-right: 10px; }
  .manifest-mode #readerTools .toolsel { padding: 0 2px 0 10px; }
}
/* UB-1020 round 2 (review m1): below 360 px (iPhone SE 1st gen 320, Galaxy Fold cover 344, and 345-358 in WebKit) the row above still did not fit: "Auto-play" ran 10 px
   past its pill. Same row, tighter: side margin 2, gap 3, button padding 6, icon gap 4, 14 px type, the speed button 44 px wide (it had 52);
   the buttons no longer shrink (they used to give up their padding first). Every control stays 44 px high. */
@media (max-width: 359px) {
  .manifest-mode #readerTools { gap: 3px; padding-left: 2px; padding-right: 2px; }
  .manifest-mode #readerTools .toolbtn { flex: 0 0 auto; padding-left: 6px; padding-right: 6px; gap: 4px; font-size: 14px; }
  .manifest-mode #readerTools #btnSpeed { min-width: 44px; }
  .manifest-mode #readerTools .toolsel { padding-left: 8px; }
}

/* UB-READER-1022 v4: phone page curl (StPageFlip, viewer.js). In portrait mode the library draws the turning flap with a
   copy of the page it turns, appended after its shadow layers; that copy is the BACK of the paper, so it shows plain paper
   with the faintest mirrored show-through of the print, never a second readable text over the page. */
#book.is-single .stf__block > .stf__innerShadow ~ .stf__item { background: var(--bd-paper, #fbf6ec) !important; }
#book.is-single .stf__block > .stf__innerShadow ~ .stf__item > * { opacity: .08; filter: grayscale(.5); transform: scaleX(-1); }