/* Native page-turning reader overlay — apps/stand/js/reader.js.
   Reuses the design tokens already defined in stand.css/creator-profile.css
   (this file is loaded after them on both pages). */

.reader-overlay{
  position:fixed; inset:0; z-index:300;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:.7rem; padding:3.75rem 1.5rem 1rem;
  background:rgba(7,7,10,.985);
  opacity:0; transition:opacity .2s ease, background .2s ease;
}
.reader-overlay.is-visible{ display:flex; opacity:1; }
.reader-overlay.is-fullscreen{
  gap:.25rem; padding:.5rem;
  background:#000;
}
body.reader-open{ overflow:hidden; }

.reader-toolbar{
  position:absolute; top:1rem; right:1.25rem; z-index:2;
  display:flex; align-items:center; gap:.55rem;
}
.reader-overlay.is-fullscreen .reader-toolbar{ top:.65rem; right:.65rem; }

.reader-fullscreen, .reader-close{
  height:2.5rem; border-radius:999px; border:1px solid rgba(237,230,214,.42);
  background:rgba(237,230,214,.08); color:var(--paper);
  line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.reader-fullscreen{ gap:.45rem; padding:0 .85rem; font:500 .74rem/1 var(--font-sans); }
.reader-fullscreen-icon{ font-size:1.15rem; transform:translateY(-.02em); }
.reader-close{ width:2.5rem; padding:0; font-size:1.4rem; }
.reader-overlay.is-fullscreen .reader-fullscreen{ width:2.5rem; padding:0; }
.reader-overlay.is-fullscreen .reader-fullscreen-label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.reader-fullscreen:hover, .reader-close:hover{
  background:rgba(237,230,214,.18); border-color:rgba(237,230,214,.7);
}
.reader-fullscreen:focus-visible, .reader-close:focus-visible{
  outline:2px solid var(--pink); outline-offset:3px;
}

.reader-stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  max-width:100%; max-height:calc(100vh - 7rem); min-height:0;
}
.reader-overlay.is-fullscreen .reader-stage{ max-height:calc(100vh - 1rem); }
.reader-canvas{
  border-radius:6px; box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
  cursor:pointer; touch-action:none; display:block; max-width:100%; max-height:100%;
}
.reader-overlay.is-fullscreen .reader-canvas{
  border-radius:2px; box-shadow:0 0 44px rgba(255,255,255,.08);
}
.reader-canvas[hidden]{ display:none; }

.reader-loading, .reader-empty{
  margin:0; padding:2.5rem 2rem; max-width:26rem; text-align:center;
  color:var(--paper); font-family:var(--font-sans); font-size:.95rem; line-height:1.6;
  background:rgba(237,230,214,.06); border:1px solid rgba(237,230,214,.18); border-radius:14px;
}

.reader-hint{
  margin:0; color:rgba(237,230,214,.75); font-family:var(--font-mono); font-size:.76rem;
  text-align:center; max-width:32rem;
}
.reader-overlay.is-fullscreen .reader-hint{
  position:absolute; left:50%; bottom:.35rem; z-index:2;
  max-width:calc(100vw - 2rem); padding:.3rem .65rem; border-radius:999px;
  color:rgba(255,255,255,.78); background:rgba(0,0,0,.72);
  transform:translateX(-50%); pointer-events:none;
}

@media (max-width:640px){
  .reader-overlay{ padding:4rem .65rem 1rem; }
  .reader-toolbar{ top:.75rem; right:.75rem; }
  .reader-fullscreen{ width:2.5rem; padding:0; }
  .reader-fullscreen-label{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .reader-overlay.is-fullscreen{ padding:.35rem; }
}

@media (prefers-reduced-motion:reduce){
  .reader-overlay{ transition:none; }
}