/*! Leafturn viewer styles. Copyright (C) 2026 Dan Proctor, Proctor Hounds. GPL-2.0-or-later. Includes StPageFlip base styles (MIT, Nodlik). */

/* ---------- StPageFlip base (from src/stpageflip/Style/stPageFlip.css, wrapper typo fixed) ---------- */
.stf__parent { position: relative; display: block; box-sizing: border-box; transform: translateZ(0); touch-action: pan-y; }
.stf__wrapper { position: relative; width: 100%; height: 100%; box-sizing: border-box; }
.stf__parent canvas { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.stf__block { position: absolute; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
.stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow, .stf__innerShadow, .stf__hardShadow, .stf__hardInnerShadow { position: absolute; left: 0; top: 0; }

/* ---------- Leafturn ---------- */
.leafturn { --leafturn-bg: #f3f4f6; --leafturn-fg: #1f2937; --leafturn-accent: #2563eb; --leafturn-radius: 6px;
  position: relative; box-sizing: border-box; width: 100%; max-width: 100%; margin: 0 auto; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--leafturn-fg); }
.leafturn *, .leafturn *::before, .leafturn *::after { box-sizing: border-box; }
.leafturn__title { margin: 0 0 .5em; font-size: 1.25em; font-weight: 600; }
.leafturn__viewer { position: relative; outline: none; border-radius: var(--leafturn-radius); }
.leafturn__viewer:focus-visible { box-shadow: 0 0 0 3px var(--leafturn-accent); }
.leafturn__stage { position: relative; width: 100%; background: var(--leafturn-bg); border-radius: var(--leafturn-radius) var(--leafturn-radius) 0 0; overflow: hidden; }
.leafturn__book { position: absolute; inset: 0; margin: 0 auto; }
.leafturn__page { background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset; display: flex; align-items: center; justify-content: center; }
.leafturn__page canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.leafturn__page--fit canvas { width: 100%; height: 100%; } /* same aspect as the book page: fill exactly, no rounding hairline */
.leafturn__page--blank { background: #fafafa; }
.leafturn__page-fail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1em; text-align: center; font-size: .9em; }
.leafturn__page-fail button { margin-top: .5em; }

/* status + errors */
.leafturn__status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75em; padding: 1.5em; text-align: center; background: var(--leafturn-bg); z-index: 5; }
.leafturn__status[hidden] { display: none !important; }
.leafturn__spinner { width: 28px; height: 28px; border: 3px solid rgba(0,0,0,.12); border-top-color: var(--leafturn-accent); border-radius: 50%; animation: leafturn-spin .8s linear infinite; }
@keyframes leafturn-spin { to { transform: rotate(360deg); } }
.leafturn__status a { color: var(--leafturn-accent); }

/* toolbar */
.leafturn__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5em; padding: .5em .75em; background: #fff; border: 1px solid rgba(0,0,0,.08); border-top: 0; border-radius: 0 0 var(--leafturn-radius) var(--leafturn-radius); }
.leafturn__group { display: flex; align-items: center; gap: .35em; }
.leafturn__spacer { flex: 1 1 auto; }
.leafturn__btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: .35em; min-width: 40px; min-height: 40px; padding: 0 .75em; border: 1px solid rgba(0,0,0,.15); border-radius: var(--leafturn-radius); background: #fff; color: var(--leafturn-fg); font: inherit; font-weight: 500; line-height: 1; cursor: pointer; text-decoration: none; }
.leafturn__btn:hover { background: #f3f4f6; }
.leafturn__btn:focus-visible { outline: 3px solid var(--leafturn-accent); outline-offset: 2px; }
.leafturn__btn[disabled], .leafturn__btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.leafturn__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.leafturn__counter { min-width: 8em; text-align: center; font-variant-numeric: tabular-nums; }
.leafturn__sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.leafturn__fallback { padding: 1em; text-align: center; }

.leafturn--no-toolbar .leafturn__stage { border-radius: var(--leafturn-radius); }
.leafturn__sr-link:focus { position: static !important; width: auto; height: auto; margin: .5em 0 0; padding: .25em .5em; clip: auto; overflow: visible; display: inline-block; }

/* fullscreen: native */
.leafturn__viewer:fullscreen { background: var(--leafturn-bg); display: flex; flex-direction: column; }
.leafturn__viewer:fullscreen .leafturn__stage { flex: 1 1 auto; border-radius: 0; }
.leafturn__viewer:fullscreen .leafturn__toolbar { border-radius: 0; }
/* fullscreen: CSS overlay fallback (iPhone etc.) */
.leafturn__viewer.leafturn--overlay { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; background: var(--leafturn-bg); border-radius: 0; }
.leafturn__viewer.leafturn--overlay .leafturn__stage { flex: 1 1 auto; border-radius: 0; }
.leafturn__viewer.leafturn--overlay .leafturn__toolbar { border-radius: 0; padding-bottom: max(.5em, env(safe-area-inset-bottom)); }
body.leafturn-scroll-lock { overflow: hidden !important; }

@media (max-width: 600px) {
  .leafturn__btn-label { display: none; }
  .leafturn__counter { min-width: 6em; }
}
@media (prefers-reduced-motion: reduce) {
  .leafturn__spinner { animation-duration: 2s; }
}