/* ------------------------------------------------------------------ *
 * Demo page chrome (toolbar, layout). All in an external file -> no
 * inline <style> block and no inline style="" attributes anywhere.
 * English edition. Mobile-responsive, proportional sizing.
 * ------------------------------------------------------------------ */

:root {
  --bg: #f2f2f2;
  --ink: #333;
  --accent: #b5121b;
  --toolbar-bg: #ffffff;
  --btn-bg: #ffffff;
  --btn-border: #c9c9c9;
  --btn-hover: #f0f0f0;

  /* Source page geometry (one page). Used for proportional calc. */
  --page-w: 1240;
  --page-h: 1754;
  /* Two-page spread aspect ratio: width/height = (2*1240)/1754 = 1.4142 */
  --spread-ratio: calc(2 * var(--page-w) / var(--page-h));
  /* Single-page portrait ratio: 1240/1754 = 0.7071 */
  --portrait-ratio: calc(var(--page-w) / var(--page-h));

  /* Vertical chrome reserved (masthead + toolbar + hint + padding) */
  --chrome-h: 180px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family:
    "Helvetica Neue", Helvetica, Arial, "Noto Sans", "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  /* dynamic viewport unit so iOS Safari bottom bar does not chop content */
  min-height: 100svh;
}

.masthead {
  text-align: center;
  padding: clamp(10px, 2.4vw, 18px) 16px 6px;
}

.masthead h1 {
  margin: 0;
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.masthead p {
  margin: 4px 0 0;
  font-size: clamp(0.7rem, 2vw, 0.8rem);
  color: #777;
}

.stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 1.6vw, 12px);
  min-height: 0;
}

/* ------------------------------------------------------------------ *
 * Proportional sizing.
 *
 * The flipbook container width is whichever of these is smallest:
 *   - available container width (100%)
 *   - viewport-height minus chrome, multiplied by aspect ratio
 *     (so the book never gets cropped vertically)
 *   - explicit cap (1100px / 1000px) so it stays readable on huge
 *     desktops
 * The library reads this width and computes its own canvas height,
 * keeping page proportions perfect.
 * ------------------------------------------------------------------ */
#flipbook {
  width: 100%;
  max-width: min(750px, calc((100svh - var(--chrome-h)) * var(--spread-ratio)));
  margin: 0 auto;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: clamp(8px, 1.8vw, 12px) 16px clamp(14px, 2.4vw, 22px);
}

.toolbar button {
  font: inherit;
  font-size: clamp(0.82rem, 2.2vw, 0.9rem);
  /* 44px min hit target for touch */
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  background: var(--btn-bg);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease;
}

.toolbar button:hover:not(:disabled) {
  background: var(--btn-hover);
}
.toolbar button:disabled {
  opacity: 0.4;
  cursor: default;
}

.toolbar .pageinfo {
  min-width: 80px;
  text-align: center;
  font-size: clamp(0.78rem, 2vw, 0.85rem);
  color: #555;
}

.hint {
  text-align: center;
  font-size: clamp(0.68rem, 1.8vw, 0.75rem);
  color: #999;
  padding: 0 16px 14px;
}

.csp-badge {
  display: inline-block;
  margin: 0 auto 10px;
  padding: 4px 12px;
  font-size: 0.72rem;
  border: 1px solid #cfe3cf;
  background: #eef7ee;
  color: #2e7d32;
  border-radius: 999px;
}

/* ------------------------------------------------------------------ *
 * Phone-portrait breakpoint.
 * StPageFlip auto-switches to single-page (portrait) mode via
 * usePortrait:true at narrow widths, so the container's aspect ratio
 * also flips. Recompute max-width using the portrait ratio so the
 * page still fits vertically without cropping.
 * ------------------------------------------------------------------ */
@media (max-width: 600px) {
  :root {
    --chrome-h: 200px;
  }
  #flipbook {
    max-width: min(
      100%,
      calc((100svh - var(--chrome-h)) * var(--portrait-ratio))
    );
  }
  .toolbar {
    gap: 8px;
  }
  .hint {
    padding-bottom: 18px;
  }
}

/* Very small phones – tighten masthead so the book gets more room. */
@media (max-width: 380px) {
  .masthead {
    padding-top: 8px;
  }
  .masthead p {
    display: none;
  }
}

/* Landscape phones / tablets – chrome is narrower, give book more room. */
@media (max-height: 500px) {
  :root {
    --chrome-h: 140px;
  }
  .masthead {
    padding: 6px 16px 2px;
  }
  .hint {
    display: none;
  }
}