/* Spread */

.spread-wrap { display:none; flex-direction:column; align-items:center; }

.spread-wrap.on { display:flex; }

.readable-wrap { display:none; flex-direction:column; align-items:center; width:100%; }

.readable-wrap.on { display:flex; }

.readable-spread {
  display:flex;
  align-items:stretch;
  box-shadow:0 10px 40px rgba(14,14,15,.18);
  background:#f1ece4;
}

.readable-page {
  position:relative;
  background:#faf8f4;
  overflow:hidden;
  min-width:160px;
}

.readable-page.left  { border-radius:2px 0 0 2px; }

.readable-page.right { border-radius:0 2px 2px 0; }

.readable-page-viewport {
  position:absolute;
  inset:0;
  overflow:hidden;
  background:
    linear-gradient(180deg,#fff,#fbf8f2 98%);
}

.readable-page-inner {
  position:absolute;
  left:0;
  top:0;
  transform-origin:top left;
}

.readable-page .pdf-page-content {
  background:#fff;
}

.readable-page.left .readable-page-viewport {
  box-shadow:inset -14px 0 18px rgba(90,90,90,.08);
}

.readable-page.right .readable-page-viewport {
  box-shadow:inset 14px 0 18px rgba(90,90,90,.08);
}

.readable-loading {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px;
  font-size:11px;
  color:var(--muted);
  font-family:'DM Mono',monospace;
  background:#faf8f4;
}

.spread { display:flex; box-shadow:0 10px 40px rgba(14,14,15,.18); }

.page-div { position:relative; background:var(--page-bg, #faf8f4); overflow:hidden; }

.page-div img { display:block; width:100%; height:100%; object-fit:contain; filter:var(--page-filter, none); }

.page-div.left  { border-radius:2px 0 0 2px; box-shadow:inset -1px 0 #ddd; }

.page-div.right { border-radius:0 2px 2px 0; }

.spread-gutter { width:8px; background:linear-gradient(to right,#ccc6b8,#e8e2d6,#ccc6b8); align-self:stretch; }

.page-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--muted); font-family:'DM Mono',monospace; background:var(--page-bg, #faf8f4); }

.spread-nav { display:flex; gap:10px; margin-top:14px; align-items:center; font-size:12px; color:var(--muted); }

.spread-nav button { font-family:'DM Sans',sans-serif; font-size:12px; padding:5px 14px; border:1px solid var(--border); border-radius:3px; background:transparent; cursor:pointer; transition:all .15s; }

.spread-nav button:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }

.spread-jump { display:flex; align-items:center; gap:6px; }

.spread-jump input { width:82px; font-family:'DM Mono',monospace; font-size:11px; padding:5px 8px; border:1px solid var(--border); border-radius:3px; background:rgba(247,244,239,.92); color:var(--ink); }

.spread-jump input:focus { outline:none; border-color:var(--warm); }

.mobile-viewer-close { display:none; }

@media (max-width:900px) {
  .spread-wrap.is-mobile-fullscreen {
    position:fixed;
    inset:0;
    z-index:1350;
    display:flex;
    width:100vw;
    height:100dvh;
    padding:58px 8px 94px;
    justify-content:center;
    background:#f7f4ef;
    overflow:auto;
  }

  .spread-wrap.is-mobile-fullscreen .mobile-viewer-close {
    position:fixed;
    top:calc(10px + env(safe-area-inset-top));
    right:12px;
    z-index:2;
    display:inline-flex;
    min-height:38px;
    align-items:center;
    justify-content:center;
    padding:8px 16px;
    border:1px solid var(--border);
    border-radius:999px;
    background:rgba(255,255,255,.96);
    color:var(--ink);
    font:600 12px/1 'DM Sans',sans-serif;
    box-shadow:0 6px 20px rgba(14,14,15,.12);
  }

  .spread-wrap.is-mobile-fullscreen .spread {
    flex:0 0 auto;
    margin:auto 0;
    max-width:none;
  }

  .spread-wrap.is-mobile-fullscreen .spread-nav {
    position:fixed;
    left:8px;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    z-index:2;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:6px;
    margin:0;
    padding:8px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(255,255,255,.96);
    box-shadow:0 8px 28px rgba(14,14,15,.14);
    backdrop-filter:blur(10px);
  }

  .spread-wrap.is-mobile-fullscreen .spread-nav > button {
    min-height:38px;
    padding:7px 12px;
  }

  .spread-wrap.is-mobile-fullscreen .spread-nav > span {
    grid-column:1 / -1;
    grid-row:1;
    text-align:center;
  }

  .spread-wrap.is-mobile-fullscreen .spread-jump {
    min-width:0;
  }

  .spread-wrap.is-mobile-fullscreen .spread-jump input {
    width:100%;
    min-width:0;
  }

  .spread-wrap.is-mobile-fullscreen .page-dots {
    display:none;
  }

  .spread-wrap.is-mobile-fullscreen .viewer-zoom-btn {
    display:none;
  }
}

.page-dots { display:flex; gap:4px; margin-top:10px; flex-wrap:wrap; max-width:500px; justify-content:center; }

.pdot { width:8px; height:8px; border-radius:50%; background:var(--border); cursor:pointer; transition:background .15s,transform .15s; }

.pdot.err  { background:var(--danger); }

.pdot.warn { background:#c8960a; }

.pdot:hover { transform:scale(1.4); }