/* Self-contained styles for the reader-only embed build.
   Copies just the design tokens + flip/page rules the reader needs, plus a
   minimal pager bar — so the iframe payload stays tiny and independent of the
   full app stylesheet. */

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --paper:      #eceef3;
  --surface:    #ffffff;
  --ink:        #14151b;
  --ink-faint:  #8b8f9c;
  --line:       #dce0e8;
  --accent:     #4f46e5;

  --shadow-book: 0 34px 78px rgba(18,22,32,.34);
  --shadow-lg: 0 34px 70px rgba(20,24,34,.18), 0 12px 26px rgba(20,24,34,.10);
  --r-lg: 14px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
:root[data-theme="dark"] {
  --paper:      #100f14;
  --surface:    #17161d;
  --ink:        #ece9f2;
  --ink-faint:  #635f70;
  --line:       #2a2833;
  --accent:     #8f8aff;
  --shadow-book: 0 34px 78px rgba(0,0,0,.6);
  --shadow-lg: 0 34px 70px rgba(0,0,0,.6), 0 12px 26px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.embed { position: relative; width: 100%; height: 100%; overflow: hidden; }

/* ---- flip surface (mirrors the app reader) ---- */
.reader__viewport {
  position: relative; width: 100%; height: 100%; display: grid; place-items: center;
  touch-action: none;
  perspective: 2600px; perspective-origin: 50% 42%;
}
.flip { filter: drop-shadow(0 2px 5px rgba(10,12,25,.18)) drop-shadow(var(--shadow-book));
  will-change: transform, filter; position: relative; transform-style: preserve-3d; }
.flip::after {
  content: ""; position: absolute; top: 1%; bottom: 1%; left: 50%; width: 46px;
  transform: translateX(-50%); pointer-events: none; z-index: 4; mix-blend-mode: multiply;
  background: linear-gradient(90deg, transparent, rgba(20,16,10,.10) 40%,
    rgba(20,16,10,.20) 50%, rgba(20,16,10,.10) 60%, transparent);
}
:root[data-theme="dark"] .flip::after { mix-blend-mode: normal;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.28) 40%, rgba(0,0,0,.42) 50%, rgba(0,0,0,.28) 60%, transparent); }
.page { background: #fff; overflow: hidden; box-shadow: inset 0 0 40px rgba(0,0,0,.04); }
.page canvas, .page img { display: block; width: 100%; height: 100%; }
.page--blank { background: #fff; }
.page--skeleton { display: grid; place-items: center; color: var(--ink-faint);
  background: repeating-linear-gradient(135deg, #fff, #fff 12px, #e1e4ec 12px, #e1e4ec 24px); }
.page__spinner { width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; }

/* ---- pager bar ---- */
.embed__bar {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; z-index: 10;
  padding: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
}
.embed__btn {
  appearance: none; border: 0; cursor: pointer; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 999px;
  background: transparent; color: var(--ink); font-size: 22px; line-height: 1;
  transition: background .15s var(--ease);
}
.embed__btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.embed__btn:active { transform: scale(.94); }
.embed__count {
  min-width: 62px; text-align: center; font-size: .82rem;
  font-variant-numeric: tabular-nums; color: var(--ink-faint); padding: 0 6px;
}

/* ---- overlay ---- */
.embed__overlay {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center;
  gap: 14px; z-index: 20; text-align: center;
  background: color-mix(in srgb, var(--paper) 74%, transparent); backdrop-filter: blur(6px);
}
.embed__overlay[hidden] { display: none; }
.embed__spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite;
}
.embed__msg { font-size: .9rem; color: var(--ink-faint); }
.embed__overlay.is-error .embed__msg { color: var(--ink); }

@keyframes spin { to { transform: rotate(360deg); } }