/* The page-book reader (app/pagebook.js): one printed page at a time, lit like the other reader, turned by hand.
   The spine is on the right (an Arabic book): going forward, the page swings from left to right around it. */
.pb-stage{position:relative;min-height:0;container-type:size;user-select:none;-webkit-user-select:none}
.pb-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;display:grid;place-items:center;padding:12px;
  touch-action:pan-x pan-y pinch-zoom;cursor:pointer;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;overscroll-behavior:contain}
.pb-scroll.tall{align-items:start}
.pb-page{position:relative;max-width:100%;border-radius:12px;overflow:hidden;background:#fffdf5;
  box-shadow:0 0 0 1px rgb(0 0 0 / .15),0 26px 60px -22px var(--shade),0 0 70px -18px var(--glow)}
.pb-page img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.pb-page::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4%;pointer-events:none;
  background:linear-gradient(to left,rgb(60 40 20 / .16),transparent)}
.pb-page.in{animation:pb-in .55s ease both}
@keyframes pb-in{from{opacity:.35;filter:brightness(.8)}to{opacity:1;filter:none}}

/* the leaving page */
.pb-turn{position:absolute;inset:0;pointer-events:none;perspective:2400px;z-index:6}
.pb-leaf{position:absolute;border-radius:12px;overflow:hidden;backface-visibility:hidden;background:#fffdf5;
  box-shadow:0 20px 50px -20px rgb(0 0 0 / .7)}
.pb-leaf img{display:block;width:100%;height:100%;object-fit:contain}
.pb-leaf::after{content:"";position:absolute;inset:0;opacity:0;animation:pb-shade .62s ease-in forwards}
.pb-leaf.next{transform-origin:100% 50%;animation:pb-next .62s cubic-bezier(.45,.05,.4,1) forwards}
.pb-leaf.next::after{background:linear-gradient(to left,rgb(0 0 0 / .05),rgb(0 0 0 / .55))}
.pb-leaf.prev{transform-origin:0% 50%;animation:pb-prev .62s cubic-bezier(.45,.05,.4,1) forwards}
.pb-leaf.prev::after{background:linear-gradient(to right,rgb(0 0 0 / .05),rgb(0 0 0 / .55))}
@keyframes pb-next{from{transform:rotateY(0)}to{transform:rotateY(98deg)}}
@keyframes pb-prev{from{transform:rotateY(0)}to{transform:rotateY(-98deg)}}
@keyframes pb-shade{to{opacity:1}}

/* the arrows beside the page: next on the left, back on the right */
.pb-arrow{position:absolute;top:50%;translate:0 -50%;z-index:7;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgb(18 23 46 / .72);border:1px solid var(--rule);color:var(--ink);cursor:pointer;backdrop-filter:blur(4px);transition:opacity .2s,background .2s}
.pb-arrow:hover{background:var(--night-2)}
.pb-arrow svg{width:12px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pb-arrow.nx{inset-inline-end:8px}.pb-arrow.pv{inset-inline-start:8px}
.pb-arrow:disabled{opacity:0;pointer-events:none}
.pb-arrow.nx{background:var(--lamp);border-color:var(--lamp);color:var(--lamp-ink)}

/* first visit: what a tap on each half does */
.pb-zones{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;pointer-events:none;opacity:0;transition:opacity .5s;z-index:5}
.pb-zones div{display:grid;place-items:center;color:#fff;font-size:1.05rem;background:rgb(0 0 0 / .3);text-shadow:0 1px 3px #000}
.pb-zones div+div{background:rgb(0 0 0 / .18)}
.pb-stage.hint .pb-zones{opacity:1}

/* progress: one dot per page, the cover first (on the right) */
.pb-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:16px;align-items:center}
.pb-dots button{width:10px;height:10px;border-radius:5px;border:0;padding:0;background:var(--rule);cursor:pointer;transition:width .3s,background .3s}
.pb-dots button.done{background:var(--ink-dim)}
.pb-dots button.on{width:26px;background:var(--lamp)}
.pb .btns button.b.primary{min-width:7.5em}
.pb-end{border-radius:12px}

/* all pages: upright thumbnails */
.pb-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.pb-grid img{aspect-ratio:3/4;object-fit:contain;background:#fffdf5}

/* the library: a section for each shelf */
.lib .shelves{display:grid;gap:56px}
.lib .shelf-h{display:grid;justify-items:center;gap:4px;margin-block-end:28px;text-align:center}
.lib .shelf-h h3{margin:0;font-family:var(--f-round);font-weight:800;font-size:clamp(1.5rem,4vw,2.1rem);color:var(--cocoa);
  background:#fff8e6;border-radius:999px;padding:.15em .9em;box-shadow:0 4px 0 rgb(68 35 29 / .18)}
.lib .shelf-h p{margin:6px 0 0;color:var(--cocoa);font-weight:600;font-size:.95rem;opacity:.85}
.lib .shelf-g{scroll-margin-top:84px}

@media (max-width:600px){.pb-arrow{width:44px;height:44px}.pb-scroll{padding:8px}}
@media (prefers-reduced-motion:reduce){.pb-page.in,.pb-leaf{animation:none}}
.nofx .pb-page.in{animation:none}