/* Dropshipping UNPACKED — flipbook viewer
   Self-contained: no webfonts, no CDN, no external requests.

   Chrome-free by design: the viewer paints the book and nothing else, so the
   host page's own background shows through the iframe. Only two controls
   survive — the edge arrows and mute — and both sit over the book as
   low-opacity overlays that come up on hover. */

:root{
  --navy-1:#000C24;
  --blue:#2AADFF;
  --gold:#feaa25;
  --ink:#E8EEF7;
  --ui: Montserrat, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}

/* Transparent all the way down. color-scheme:dark would otherwise hand the
   iframe a dark UA canvas, so the root is cleared explicitly. */
html{background:transparent}
body{
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--ui);
  overflow:hidden;
  -webkit-text-size-adjust:100%;
}

.app{
  position:relative;
  height:100dvh;
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:none;
  overflow:hidden;
}

/* ---------- stage ---------- */

.stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:grid;
  place-items:center;
  /* just enough room for StPageFlip's outer shadow, which would otherwise
     clip against the iframe edge */
  padding:8px;
  touch-action:pan-y;
}

.zoomer{
  transform-origin:50% 50%;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
.app.panning .zoomer{transition:none}

/* Upstream page-flip.css misspells this selector as `.sft__wrapper`, so its
   own rule never lands. Declared correctly here; the vendored file stays
   byte-identical to the published package. */
.stf__wrapper{
  position:relative;
  width:100%;
  height:100%;
  box-sizing:border-box;
}

/* StPageFlip writes inline width/height/min-width onto its host element.
   We own the box — it only gets to lay pages out inside it. Without this the
   inline min-width overflows the stage on narrow screens. */
.book{
  position:relative;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
}

/* StPageFlip renders each page as this element. The background is the paint
   behind a page image while it decodes — not a frame. No border here: the
   sheet edge should read only as the flip shadow. */
.page{
  background:var(--navy-1);
  overflow:hidden;
}
.page picture,.page img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

/* clickable PDF link annotations, rebuilt as real anchors */
.spots{position:absolute;inset:0}
.spot{
  position:absolute;
  border-radius:3px;
  outline-offset:2px;
  background:transparent;
  transition:background .15s;
}
.spot:hover,.spot:focus-visible{background:rgba(42,173,255,.22)}
/* PDF link rects hug the text baseline (~10px tall once scaled), far under a
   usable touch target. Grow the hit area without moving the highlight; the
   source line-spacing caps how far we can go before neighbours collide. */
.spot::after{content:"";position:absolute;left:-5px;right:-5px;top:-6px;bottom:-6px}

/* pan surface — only live while zoomed, so it never steals a page drag */
.panlayer{
  position:absolute;
  inset:0;
  pointer-events:none;
  touch-action:none;
}
.app.zoomed .panlayer{pointer-events:auto;cursor:grab}
.app.zoomed.panning .panlayer{cursor:grabbing}

/* ---------- edge arrows ---------- */

/* The button spans the full height for layout, but it must NOT be clickable
   across that whole strip: at the embed's 4/3 ratio the book fills the frame,
   so a full-height hit area covers the very page corners StPageFlip needs for
   dragging — mousedown lands on the button and the fold collapses. Only the
   painted pill takes pointer events; the pill sits at mid-height, clear of
   both corner zones. */
.edge{
  position:absolute;
  top:0;
  bottom:0;
  width:clamp(44px,8%,84px);
  display:grid;
  place-items:center;
  border:0;
  padding:0;
  background:none;
  color:var(--ink);
  cursor:pointer;
  pointer-events:none;
  z-index:3;
}
.edge--prev{left:0}
.edge--next{right:0}
.edge svg{
  width:24px;height:24px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  padding:8px;
  border-radius:50%;
  box-sizing:content-box;
  background:rgba(0,6,15,.42);
  backdrop-filter:blur(6px);
  opacity:.38;
  pointer-events:auto;
  transition:opacity .18s,background .18s,stroke .18s;
}
.edge svg:hover{opacity:1;background:rgba(0,6,15,.66);stroke:var(--gold)}
.edge:focus-visible svg{opacity:1;outline:2px solid var(--blue);outline-offset:2px}
.edge[disabled] svg{opacity:0;pointer-events:none}

/* ---------- overlay controls ---------- */

.ovl{
  position:absolute;
  z-index:4;
  width:34px;height:34px;
  display:grid;place-items:center;
  border:0;
  border-radius:50%;
  padding:0;
  background:rgba(0,6,15,.42);
  backdrop-filter:blur(6px);
  color:var(--ink);
  cursor:pointer;
  opacity:.32;
  transition:opacity .18s,background .18s;
}
/* Centred on the spine, not in a corner. On mobile the single page fills the
   2/3 frame almost exactly, so a bottom-right position would land on the main
   drag corner — the same trap the edge arrows fell into. */
.ovl--sound{left:50%;transform:translateX(-50%);bottom:10px}
.ovl:hover{opacity:1;color:var(--gold);background:rgba(0,6,15,.66)}
.ovl:focus-visible{opacity:1;outline:2px solid var(--blue);outline-offset:2px}
.ovl svg{
  width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

/* paired on/off icon swap */
.ovl .ic-off{display:none}
.ovl[aria-pressed="false"] .ic-on{display:none}
.ovl[aria-pressed="false"] .ic-off{display:block}

/* ---------- narrow ---------- */

@media (max-width:767px){
  .stage{padding:6px}
  .edge{width:40px}
  .edge svg{width:21px;height:21px;padding:7px}
  .ovl{width:31px;height:31px;bottom:8px}
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion:reduce){
  .zoomer{transition:none}
  .edge svg,.ovl{transition:none}
}