/* Emma Lee — Matter & Memoir page-turning book viewer (StPageFlip). Dialog
   chrome only: the library positions its own canvas pages via inline styles. */
/* background matches .bf-stage (#111), not var(--paper). Turned out not to
   be the cause of the mid-flip edge hairline (that was a canvas-internal
   anti-aliasing gap, fixed in book-flip.js's maxWidth/maxHeight) — kept
   solid dark anyway since it's strictly more correct than the old near-
   white paper tone showing through any gap in this stack. */
.book-flip-dialog{position:fixed;inset:0;margin:auto;width:100vw;height:100vh;max-width:none;max-height:none;
  padding:0;border:0;background:#111;color:var(--ink)}
.book-flip-dialog::backdrop{background:#111}
.book-flip-dialog[open]{display:grid}

.bf-close{position:absolute;top:20px;right:20px;z-index:5;padding:10px 14px;background:var(--paper)}
.bf-close:hover{background:var(--soft)}

.bf-stage{display:grid;place-items:center;width:100%;height:100%;padding:64px 5vw 84px;background:#111;overflow:hidden}
.bf-book{width:100%;max-width:1240px;user-select:none;-webkit-user-drag:none}

.bf-count{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);color:#999;background:transparent}
.bf-hint{position:absolute;bottom:18px;right:20px;color:#999;display:none}
@media(hover:hover) and (pointer:fine){.bf-hint{display:block}}

.bf-controls{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;width:min(560px,80vw)}
.bf-jump-start{flex:none;padding:8px 12px;background:var(--paper);white-space:nowrap}
.bf-jump-start:hover{background:var(--soft)}
.bf-scrub{flex:1;accent-color:var(--paper)}

@media(max-width:850px){
  .bf-stage{padding:56px 3vw 76px}
  .bf-count{bottom:40px}
  .bf-controls{bottom:12px;width:88vw}
  .bf-hint{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .bf-close{transition:none!important}
}