/* The card as a book. Pages are laid out at a fixed 480x640 and scaled to fit,
   so every device gets the same page breaks. */
.card-book { --page-w:480px; --page-h:640px; --paper:#fffdf9; --book-ink:#2b2440; --book-accent:#6C4CE0; --nav-gutter:62px;
  position:relative; width:100%; max-width:1040px; margin:18px auto 8px; }

/* Stage */
/* No panel behind the book: it sits on the page itself. The bottom padding leaves room for its shadow. */
.book-stage { position:relative; padding:4px 0 34px; }
.book-scale { position:relative; margin-inline:auto; }
.book-spread { position:absolute; top:0; inset-inline-start:0; display:flex; width:var(--page-w); height:var(--page-h);
  transform-origin:top left; filter:drop-shadow(0 18px 30px rgba(43,36,64,.18)); }
[dir="rtl"] .book-spread { transform-origin:top right; }
.card-book.is-spread .book-spread { width:calc(var(--page-w) * 2); }

/* Pages */
.book-page { position:relative; flex:0 0 var(--page-w); width:var(--page-w); height:var(--page-h); box-sizing:border-box;
  background:var(--paper); color:var(--book-ink); overflow:hidden; }
.card-book.is-spread .book-spread > .book-page:first-child { border-start-start-radius:6px; border-end-start-radius:6px; }
.card-book.is-spread .book-spread > .book-page:last-child { border-start-end-radius:6px; border-end-end-radius:6px; }
.card-book:not(.is-spread) .book-page { border-radius:6px; }
/* The fold: a soft shadow on each page along the spine. */
.card-book.is-spread .book-spread > .book-page:first-child::after,
.card-book.is-spread .book-spread > .book-page:last-child::before { content:""; position:absolute; top:0; bottom:0; width:46px; pointer-events:none; z-index:2; }
.card-book.is-spread .book-spread > .book-page:first-child::after { inset-inline-end:0; background:linear-gradient(to left, rgba(43,36,64,.13), rgba(43,36,64,0)); }
.card-book.is-spread .book-spread > .book-page:last-child::before { inset-inline-start:0; background:linear-gradient(to right, rgba(43,36,64,.10), rgba(43,36,64,0)); }
[dir="rtl"] .card-book.is-spread .book-spread > .book-page:first-child::after { background:linear-gradient(to right, rgba(43,36,64,.13), rgba(43,36,64,0)); }
[dir="rtl"] .card-book.is-spread .book-spread > .book-page:last-child::before { background:linear-gradient(to left, rgba(43,36,64,.10), rgba(43,36,64,0)); }

/* Cover: the whole design, never cropped, over a blurred copy of itself. */
.book-cover { background:var(--paper); display:flex; align-items:center; justify-content:center; }
.book-cover-fill { position:absolute; inset:-80px; width:calc(100% + 160px); height:calc(100% + 160px); max-width:none; object-fit:cover; filter:blur(30px) saturate(1.1); opacity:.55; }
.book-cover:has(.book-cover-live) { background:linear-gradient(#fff4e6, #ffe3ee 60%, #f3e3ff); }
.book-cover-live { aspect-ratio:3 / 4; border:0; }
.book-cover-live img { display:block; width:100%; height:auto; }
.book-cover-art { position:relative; display:block; width:100%; height:auto; box-shadow:0 12px 34px rgba(36,27,59,.22); }
.book-cover-plain { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; width:100%; height:100%; padding:40px; box-sizing:border-box;
  background:linear-gradient(160deg, #7b5cf0 0%, #e23b7a 100%); color:#fff; text-align:center; }
.book-cover-emoji { font-size:120px; line-height:1; }
.book-cover-title { margin:0; font-family:'Caveat', cursive; font-weight:700; font-size:58px; line-height:1.05; overflow-wrap:anywhere; }

/* Inside pages: messages are packed into two columns, like handwriting on a real card. */
.book-inner { padding:26px 22px 38px; }
.book-flow { height:calc(var(--page-h) - 26px - 38px); overflow:hidden; }
.book-flow.is-overfull { overflow:auto; }
.book-cols { display:flex; gap:10px; align-items:flex-start; }
.book-note.is-wide { margin:10px 0; }
.book-col { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:10px; }
.book-made { position:absolute; bottom:10px; inset-inline-end:22px; display:flex; align-items:center; gap:4px; white-space:nowrap;
  font-size:10.5px; line-height:1; color:#9a93ad; text-decoration:none; }
.book-made img { display:block; height:13px; width:auto; opacity:.85; }
.book-made:hover { color:#6b6580; }
.book-pageno { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); margin:0; text-align:center; font-size:11px; color:#9a93ad; letter-spacing:.06em; }

.book-intro { text-align:center; padding:0 0 10px; }
.book-dear { margin:0; font-family:'Dancing Script', 'Caveat', cursive; font-weight:700; font-size:46px; line-height:1.05; color:#3b2a86; overflow-wrap:anywhere; }
.book-lead { margin:4px 0 0; font-size:17px; line-height:1.35; color:#4E4463; overflow-wrap:anywhere; }
.book-sender { margin:2px 0 0; font-family:'Caveat', cursive; font-size:19px; color:#6b6580; }
.book-empty { margin:30px 0 0; text-align:center; color:#6b6580; font-size:17px; }
.book-empty p { margin:0 0 18px; }

.book-note { --hand:'Dancing Script', 'Kalam', 'Aref Ruqaa', 'Caveat', cursive;
  background:var(--note,#fff3bf); border-radius:10px; padding:8px 10px 6px; box-sizing:border-box; }
.book-note p { margin:0; }
.book-note-photo img { display:block; max-width:100%; max-height:150px; margin:0 auto 6px; border-radius:6px; object-fit:contain; }
.book-note-body { font-family:var(--hand); font-weight:500; font-size:17px; line-height:1.28; color:#2b2440; white-space:pre-line; overflow-wrap:anywhere; }
.book-note-sig img { display:block; height:30px; width:auto; max-width:100%; margin-top:3px; object-fit:contain; object-position:left; }
[dir="rtl"] .book-note-sig img { object-position:right; }
.book-note-author { margin-top:1px !important; font-family:var(--hand); font-weight:700; font-size:16px; line-height:1.2; color:#3b2a86; overflow-wrap:anywhere; }
.book-note-author::before { content:"– "; }
.book-note.is-small-photo .book-note-photo img { max-height:90px; }
.book-note.is-compact .book-note-body { font-size:14px; line-height:1.22; }
.book-note.is-compact .book-note-photo img { max-height:80px; }
.book-note.is-own { outline:3px solid var(--book-accent); outline-offset:2px; }
/* Without the book script (no JavaScript) the notes stay full width. */
.card-book:not(.is-ready) .book-note { max-width:560px; }

/* Sign page and back cover */
.book-sign-inner, .book-back-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; height:100%; padding:40px; box-sizing:border-box; text-align:center; }
.book-sign-btn { display:inline-flex; align-items:center; gap:10px; padding:16px 26px; border:2px dashed #b9a8f5; border-radius:14px; background:#fff;
  color:var(--book-accent); font:inherit; font-size:20px; font-weight:700; cursor:pointer; transition:transform .15s ease, border-color .15s ease; }
.book-sign-btn:hover { border-color:var(--book-accent); }
.book-sign-btn:active { transform:scale(.97); }
.book-sign-hint { margin:0; max-width:300px; color:#6b6580; font-size:15px; }
.book-back { background:#f7f4ff; }
.book-back-inner img { width:118px; height:auto; opacity:.8; }
.book-back-inner a { color:#6b6580; font-size:15px; text-decoration:none; }
.book-back-inner a:hover { text-decoration:underline; }
.book-blank { background:var(--paper); }

/* Navigation: corner tabs like a page you can lift. */
.book-nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:0; z-index:5;
  background:#fff; color:var(--book-accent); font-size:34px; line-height:1; cursor:pointer; box-shadow:0 6px 18px rgba(43,36,64,.18);
  display:flex; align-items:center; justify-content:center; padding:0 0 4px; transition:transform .15s ease, background .15s ease; }
.book-nav[hidden] { display:none; }
.book-nav:hover { background:var(--book-accent); color:#fff; }
.book-nav:active { transform:translateY(-50%) scale(.94); }
.book-prev { inset-inline-start:10px; }
.book-next { inset-inline-end:10px; }
[dir="rtl"] .book-nav span { display:inline-block; transform:scaleX(-1); }
.book-status { margin:10px 0 0; text-align:center; font-size:14px; color:#6b6580; min-height:1.4em; }

/* Page turn */
@keyframes book-in-next { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:none; } }
@keyframes book-in-prev { from { opacity:0; transform:translateX(-24px); } to { opacity:1; transform:none; } }
.book-spread.turn-next > .book-page { animation:book-in-next .28s ease-out both; }
.book-spread.turn-prev > .book-page { animation:book-in-prev .28s ease-out both; }
[dir="rtl"] .book-spread.turn-next > .book-page { animation-name:book-in-prev; }
[dir="rtl"] .book-spread.turn-prev > .book-page { animation-name:book-in-next; }
@media (prefers-reduced-motion: reduce) { .book-spread > .book-page { animation:none !important; } }

/* Before the script has built pages: show the cover, keep messages off screen for measuring.
   Without JavaScript the messages are a plain list under the cover. */
.card-book.is-js .book-source { position:absolute; top:0; left:0; width:var(--page-w); height:0; overflow:hidden; visibility:hidden; }
.card-book:not(.is-js) .book-scale { height:auto !important; }
.card-book:not(.is-js) .book-spread { position:static; margin-inline:auto; max-width:100%; height:auto; filter:none; }
.card-book:not(.is-js) .book-cover { height:auto; min-height:300px; }
.card-book:not(.is-js) .book-source { display:flex; flex-direction:column; gap:14px; margin-top:18px; }
.card-book.book-measure { position:fixed; top:0; left:0; width:var(--page-w); margin:0; visibility:hidden; pointer-events:none; z-index:-1; }

@media (max-width: 640px) {
  .card-book { --nav-gutter:0px; }
  .book-stage { padding:4px 0 64px; }
  .book-nav { top:auto; bottom:10px; transform:none; width:44px; height:44px; }
  .book-nav:active { transform:scale(.94); }
  .book-prev { inset-inline-start:calc(50% - 56px); }
  .book-next { inset-inline-end:calc(50% - 56px); }
}
@media print {
  .book-nav, .book-status { display:none !important; }
}

/* Page around the book */
.card-book-page .book-head { text-align:center; }
.card-book-page .book-head h1 { margin:6px 0 8px; font-size:clamp(26px, 5vw, 38px); overflow-wrap:anywhere; }
.card-book-page .book-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; margin:14px 0 26px; text-align:center; }
.card-book-page .book-actions .btn { font-size:17px; padding:13px 26px; }
.card-book-page .book-actions p { margin:0; }

/* Signing form as a dialog */
.sign-dialog { width:min(640px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border:0; border-radius:20px; background:transparent; overflow:auto; }
.sign-dialog::backdrop { background:rgba(36,27,59,.55); }
.sign-dialog .sign-panel { position:relative; margin:0; }
.sign-close { position:absolute; top:10px; inset-inline-end:10px; width:40px; height:40px; border:0; border-radius:50%; background:#f3f0fc;
  color:#241B3B; font-size:26px; line-height:1; cursor:pointer; }
.sign-close:hover { background:#e7e1fb; }
.sign-dialog h2 { padding-inline-end:48px; }
@media (prefers-reduced-motion: no-preference) {
  .sign-dialog[open] { animation:sign-pop .2s ease-out; }
  @keyframes sign-pop { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
}

/* Print layout (print.php): the open book, one spread under another, scaled down on narrow screens. */
.book-print { display:flex; flex-direction:column; align-items:center; gap:28px; padding:8px 0 24px; }
.book-print-sheet { width:calc(var(--page-w) * 2 * var(--print-scale, 1)); height:calc(var(--page-h) * var(--print-scale, 1)); flex:none; }
.book-print-spread { display:flex; width:max-content; transform:scale(var(--print-scale, 1)); transform-origin:top left;
  border-radius:6px; overflow:hidden; box-shadow:0 10px 30px rgba(43,36,64,.18); }
[dir="rtl"] .book-print-spread { transform-origin:top right; }
.book-print-sheet.is-single .book-print-spread { margin-inline:auto; transform-origin:top center; }
/* Spine: the same shading as the two-page viewer. */
.book-print-spread > .book-page:first-child:not(:last-child)::after,
.book-print-spread > .book-page:last-child:not(:first-child)::before { content:""; position:absolute; top:0; bottom:0; width:46px; pointer-events:none; z-index:2; }
.book-print-spread > .book-page:first-child:not(:last-child)::after { inset-inline-end:0; background:linear-gradient(to left, rgba(43,36,64,.13), rgba(43,36,64,0)); }
.book-print-spread > .book-page:last-child:not(:first-child)::before { inset-inline-start:0; background:linear-gradient(to right, rgba(43,36,64,.10), rgba(43,36,64,0)); }
[dir="rtl"] .book-print-spread > .book-page:first-child:not(:last-child)::after { background:linear-gradient(to right, rgba(43,36,64,.13), rgba(43,36,64,0)); }
[dir="rtl"] .book-print-spread > .book-page:last-child:not(:first-child)::before { background:linear-gradient(to left, rgba(43,36,64,.10), rgba(43,36,64,0)); }
.book-cover-fill.is-flat { inset:0; width:100%; height:100%; filter:none; object-fit:fill; }
/* While the PDF is captured: full size, square edges, no screen shadow. */
.card-book.is-capturing { --print-scale:1; }
.card-book.is-capturing .book-print-spread { box-shadow:none; border-radius:0; }
@media print {
  .book-print { display:block; padding:0; }
  .book-print-sheet { width:auto; height:auto; break-after:page; page-break-after:always; }
  .book-print-sheet:last-child { break-after:auto; page-break-after:auto; }
  .book-print-spread { transform:none; box-shadow:none; border-radius:0; }
}

/* Page turn (card-book.js turnPage): copies of the old pages laid over the new ones while one curls over.
   The turning page is a chain of hinged strips; each strip shows its own slice of the page. */
.book-flip { position:absolute; inset:0; z-index:4; pointer-events:none; perspective:1800px; }
.book-flip.is-clipped { overflow:hidden; }
.book-flip-under, .book-flip-leaf, .book-flip-cast { position:absolute; top:0; width:var(--page-w); height:var(--page-h); }
.book-flip-under > .book-page { position:absolute; inset:0; }
.book-flip-leaf, .book-flip-strip { transform-style:preserve-3d; will-change:transform; }
.book-flip-strip { position:absolute; top:0; height:100%; }
.book-flip-face { position:absolute; top:0; left:0; width:calc(100% + 1px); height:100%; overflow:hidden; background:var(--paper);
  backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.book-flip-face.is-back { transform:rotateY(180deg); }
.book-flip-face > .book-page { position:absolute; top:0; }
/* Registered so the shading can animate smoothly; browsers without @property simply step between values. */
@property --near { syntax:'<number>'; inherits:false; initial-value:0; }
@property --far { syntax:'<number>'; inherits:false; initial-value:0; }
.book-flip-shade { position:absolute; inset:0; --near:0; --far:0; }
.book-flip-shade.is-near-left { background:linear-gradient(to right, rgba(43,36,64,var(--near)), rgba(43,36,64,var(--far))); }
.book-flip-shade.is-near-right { background:linear-gradient(to left, rgba(43,36,64,var(--near)), rgba(43,36,64,var(--far))); }
.book-flip-cast { opacity:0; }
.book-flip-cast.is-from-left { background:linear-gradient(to right, rgba(43,36,64,.30), rgba(43,36,64,0) 55%); }
.book-flip-cast.is-from-right { background:linear-gradient(to left, rgba(43,36,64,.30), rgba(43,36,64,0) 55%); }