/* A phone shows one complete, large page with its own reachable controls. */
.mobile-reader-controls{display:none}
@media(max-width:700px),(max-width:950px) and (max-height:500px){
  #book-preview{
    --mobile-toolbar-height:48px;
    --mobile-controls-height:calc(76px + env(safe-area-inset-bottom,0px));
    --reader-available-height:max(0px,calc(100dvh - var(--reader-header-height) - var(--mobile-toolbar-height) - var(--mobile-controls-height) - 20px));
    --reader-book-height:min(var(--reader-available-height),calc((100vw - 24px)/.702));
    --reader-book-width:calc(var(--reader-book-height)*.702);
  }
  #book-preview .preview-toolbar{top:var(--reader-header-height);height:var(--mobile-toolbar-height);padding:2px 12px;gap:12px}
  #book-preview #preview-title{font-size:14px;line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #book-preview .close-preview{min-height:44px;flex:none;padding:5px 0 5px 8px}
  #book-preview .close-preview span{font-size:13px}
  #book-preview .reader-fit-hint{display:none}
  #book-preview .reader-pages-viewport{top:calc(var(--reader-header-height) + var(--mobile-toolbar-height));bottom:var(--mobile-controls-height);height:auto;padding:8px 12px 12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
  #book-preview .open-book{flex:none;margin:0;box-shadow:0 8px 20px #0002,0 3px 0 #ddd,0 6px 0 #930c14}
  #book-preview .open-book::after{display:none}
  #book-preview .preview-spread{grid-template-columns:1fr}
  #book-preview .preview-spread>.scan-page:not(.is-mobile-page-active){display:none}
  #book-preview .preview-spread>.scan-page.is-mobile-page-active{display:block;border-radius:5px;animation:mobile-page-in .18s ease-out}
  #book-preview .scan-page img{object-position:center}
  #book-preview #read-more-control{display:none}
  .mobile-reader-controls{position:fixed;left:0;right:0;bottom:0;z-index:101;height:var(--mobile-controls-height);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line)}
  .mobile-reader-controls button{min-height:48px;padding:10px 12px;border-radius:5px;background:#f2efeb;color:var(--ink);font-size:15px;font-weight:700;white-space:nowrap}
  .mobile-reader-controls button:disabled{opacity:.35;cursor:default}
  .mobile-reader-controls [data-mobile-reader-next]{background:var(--red);color:#fff}
  .mobile-reader-controls [data-mobile-reader-progress]{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
  #cover-preview{width:100%;height:100dvh;max-height:100dvh;margin:0;padding-top:calc(var(--reader-header-height) + 48px);padding-bottom:90px;overflow:auto}
  #cover-preview .preview-toolbar{position:fixed;top:var(--reader-header-height);left:0;right:0;width:100%;height:48px;padding:2px 12px;gap:12px;z-index:20}
  #cover-preview #cover-preview-title{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #cover-preview .close-preview{min-height:44px;flex:none}
  #cover-preview .cover-full-image{width:max(100%,800px);max-width:none;margin:0 0 24px}
  @keyframes mobile-page-in{from{opacity:.6;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
}