/* ---------- Flipbook viewer page ---------- */

.flip-body {
  background: var(--color-surface-container-low);
  min-height: 100vh;
}

.flip-header {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px var(--margin-desktop) 0;
  text-align: center;
}
/* Smaller than the site's default h1 — this page is about the book, not
   the headline, so the title cedes as much vertical space as it can. */
.flip-header h1 {
  font-size: 1.5rem;
  margin-bottom: 4px;
}
.flip-header p { color: var(--color-on-surface-variant); max-width: 640px; margin: 0 auto; font-size: 0.95rem; }

.flip-viewer-wrap {
  max-width: 1320px;
  margin: 12px auto 0;
  padding: 0 var(--margin-desktop);
}

/* -----------------------------------------------------------------------
   The viewer

   .flip-viewer is the element handed to the Fullscreen API, so everything
   the reader needs while expanded (stage, page nav, toolbar) lives inside
   it. When the browser refuses element fullscreen — iOS Safari only allows
   it on <video> — JS falls back to .is-pseudo-fullscreen, which pins the
   same element over the viewport with plain CSS.
   ----------------------------------------------------------------------- */

.flip-viewer {
  position: relative;
  background: #241726;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.flip-stage {
  position: relative;
  /* Tall enough to read on a laptop without pushing the toolbar off-screen.
     JS sizes the book itself to whatever box this ends up being. */
  height: min(72vh, 760px);
  perspective: 2600px;
  perspective-origin: 50% 50%;
  overflow: hidden;
  touch-action: pan-y;
}

.flip-viewer:fullscreen,
.flip-viewer.is-pseudo-fullscreen {
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.flip-viewer:fullscreen .flip-stage,
.flip-viewer.is-pseudo-fullscreen .flip-stage {
  flex: 1 1 auto;
  height: auto;
}

.flip-viewer.is-pseudo-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1200;
  margin: 0;
  max-width: none;
}

/* Pan surface — only scrollable once the reader has zoomed in. */
.flip-pan {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.flip-pan.is-zoomed { cursor: grab; }
.flip-pan.is-panning { cursor: grabbing; }

.flip-zoom {
  transform-origin: center center;
  transition: transform 0.2s ease;
  will-change: transform;
}

/* -----------------------------------------------------------------------
   The book

   Two-page spread model: each .flip-leaf is one physical sheet, with the
   odd page on its front face and the following even page on its back. In
   double-page mode the leaves occupy the right half of the book, hinged at
   the spine, so an unflipped stack shows the cover alone on the right and
   a fully flipped stack shows the final page alone on the left — exactly
   how a real book opens and closes. Narrow screens collapse to one leaf
   per page (single mode) where the hinge is the left edge of the page.
   ----------------------------------------------------------------------- */

.flip-book {
  position: relative;
  width: var(--flip-book-w, 600px);
  height: var(--flip-book-h, 780px);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.flip-leaf {
  position: absolute;
  top: 0;
  height: 100%;
  width: var(--flip-page-w, 300px);
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 0.62s cubic-bezier(0.42, 0.02, 0.32, 1);
  will-change: transform;
}
.flip-book[data-mode="double"] .flip-leaf { left: 50%; }
.flip-book[data-mode="single"] .flip-leaf { left: 0; }

.flip-leaf.is-flipped { transform: rotateY(-180deg); }

.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.flip-face-front { transform: rotateY(0deg); }
.flip-face-back { transform: rotateY(180deg); }

.flip-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
  -webkit-user-drag: none;
  user-select: none;
}

/* Spine shading — a soft gradient on the inner edge of each face so the
   spread reads as a bound book rather than two flat rectangles. */
.flip-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.flip-face-front::after {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 9%);
}
.flip-face-back::after {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 9%);
}
.flip-book[data-mode="single"] .flip-face::after { opacity: 0.5; }

/* Blank backing sheet — single-page mode, and the back of a final odd page. */
.flip-face-blank {
  background: linear-gradient(135deg, #f6f2f4, #e9e2e7);
}

.flip-page-num {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* -----------------------------------------------------------------------
   Page navigation arrows
   ----------------------------------------------------------------------- */

.flip-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
  z-index: 5;
}
.flip-nav:hover { background: rgba(255, 255, 255, 0.3); }
.flip-nav-prev { left: 10px; }
.flip-nav-next { right: 10px; }
.flip-nav:disabled { opacity: 0.25; cursor: default; }
.flip-nav:disabled:hover { background: rgba(255, 255, 255, 0.16); }

/* -----------------------------------------------------------------------
   Toolbar
   ----------------------------------------------------------------------- */

.flip-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.28);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.flip-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.flip-tool:hover { background: rgba(255, 255, 255, 0.16); }
.flip-tool:disabled { opacity: 0.35; cursor: default; }
.flip-tool:disabled:hover { background: transparent; }
.flip-tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.flip-tool-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.22);
  margin: 0 4px;
}

.flip-zoom-level {
  font-family: var(--font-label);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  min-width: 52px;
  text-align: center;
}

.flip-page-count {
  font-family: var(--font-label);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  min-width: 92px;
  text-align: center;
}

/* -----------------------------------------------------------------------
   Actions under the viewer
   ----------------------------------------------------------------------- */

.flip-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px auto 8px;
}
.flip-actions .btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flip-footnote {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-on-surface-variant);
  margin: 8px auto 48px;
}

/* No-JS fallback: a plain vertical list of the page images. */
.flip-fallback {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 720px;
}
.flip-fallback li { margin-bottom: 16px; }
.flip-fallback img { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }

/* -----------------------------------------------------------------------
   Share side panel
   ----------------------------------------------------------------------- */

.flip-share-scrim {
  position: fixed;
  inset: 0;
  background: rgba(36, 23, 38, 0.45);
  z-index: 1300;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.flip-share-scrim.is-open { opacity: 1; }
.flip-share-scrim[hidden] { display: none; }

.flip-share-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 100%);
  background: var(--color-surface-container-lowest);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.28);
  z-index: 1310;
  padding: 28px 24px 32px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.flip-share-panel.is-open { transform: translateX(0); }
.flip-share-panel[hidden] { display: none; }
.flip-share-panel h2 { font-size: 1.4rem; margin-bottom: 0.2em; }
.flip-share-panel .flip-share-lede {
  color: var(--color-on-surface-variant);
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.flip-share-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.flip-share-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-pill);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.flip-share-btn:hover { transform: translateY(-1px); border-color: var(--color-primary); }
.flip-share-btn svg { width: 22px; height: 22px; flex: 0 0 22px; }

.flip-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  color: #fff;
}
.flip-share-icon svg { width: 18px; height: 18px; fill: currentColor; }
.flip-share-icon[data-network="facebook"] { background: #1877f2; }
.flip-share-icon[data-network="x"] { background: #000; }
.flip-share-icon[data-network="linkedin"] { background: #0a66c2; }
.flip-share-icon[data-network="pinterest"] { background: #e60023; }
.flip-share-icon[data-network="email"] { background: var(--color-primary); }
.flip-share-icon[data-network="copy"] { background: var(--color-tertiary-container); }

.flip-share-divider {
  border: none;
  border-top: 1px solid var(--color-outline-variant);
  margin: 24px 0;
}

.flip-email-form .form-row { margin-bottom: 14px; }
.flip-email-form label {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 6px;
}
.flip-email-form input[type="email"],
.flip-email-form input[type="text"],
.flip-email-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
}
.flip-email-form textarea { min-height: 120px; resize: vertical; }
.flip-email-form .btn { width: 100%; }
.flip-email-hint {
  font-size: 0.8rem;
  color: var(--color-on-surface-variant);
  margin-top: 10px;
  text-align: center;
}

/* -----------------------------------------------------------------------
   Toast
   ----------------------------------------------------------------------- */

.flip-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  background: #241726;
  color: #fff;
  font-family: var(--font-label);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1400;
}
.flip-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Email gate ---------- */

.flip-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  text-align: left;
}
.flip-checkbox-row input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}
.flip-checkbox-row label { font-size: 0.9rem; }

.flip-gate-status {
  min-height: 1.2em;
  font-size: 0.9rem;
  margin-top: 8px;
}
.flip-gate-status[data-state="error"] { color: var(--color-error, #b3261e); }
.flip-gate-status[data-state="success"] { color: var(--color-primary); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .flip-header { padding: 14px var(--margin-mobile) 0; }
  .flip-viewer-wrap { padding: 0 var(--margin-mobile); margin-top: 10px; }
  .flip-stage { height: min(64vh, 620px); }
  .flip-nav { width: 40px; height: 56px; font-size: 1.6rem; }
  .flip-nav-prev { left: 4px; }
  .flip-nav-next { right: 4px; }
  .flip-toolbar { gap: 2px; padding: 8px; }
  .flip-tool { padding: 0 8px; min-width: 44px; }
  .flip-page-count { min-width: 78px; font-size: 0.8rem; }
  .flip-actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .flip-book,
  .flip-leaf,
  .flip-zoom,
  .flip-share-panel,
  .flip-share-scrim,
  .flip-toast { transition: none; }
}

/* ---------- Homepage button (every flipbook page) ----------------------
   Sits at the right end of the header, after .brand's margin-right:auto.
   Slightly tighter than a body button so it doesn't dominate the header,
   but it keeps .btn's 48px min-height so the tap target stays big enough,
   and it never shrinks below its label. */
.flip-home-btn {
  flex: none;
  padding: 10px 20px;
  font-size: 0.95rem;
  white-space: nowrap;
}
.flip-home-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* Narrow screens: the header wraps, so let the button sit on its own row
   rather than squeezing the brand name into an unreadable column. */
@media (max-width: 600px) {
  .flip-home-btn { padding: 10px 16px; }
}

/* ---------- "Flipbook not found" ---------- */
.flip-missing {
  max-width: 640px;
  margin: 0 auto;
  padding: 72px var(--margin-mobile);
  text-align: center;
}
.flip-missing h1 { font-size: 1.6rem; margin-bottom: 8px; }
.flip-missing p { color: var(--color-on-surface-variant); margin-bottom: 24px; }