/* Union Disha — reader chrome, two-page spread, themes, page-turn animation.
   Self-contained: only styles under #dishaReader, so it never touches the page. */

#dishaReader{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;
  --dr-bg:#eaeaec; --dr-fg:#0f2f57; --dr-bar:#0b1f3a; --dr-bar-fg:#fff;
  --dr-page-shadow:rgba(0,0,0,.28); --dr-spine:rgba(0,0,0,.18);}
#dishaReader.hidden{display:none}
#dishaReader[data-theme="sepia"]{--dr-bg:#efe6d4; --dr-page-shadow:rgba(70,50,20,.3); --dr-spine:rgba(70,50,20,.2)}
#dishaReader[data-theme="dark"]{--dr-bg:#14161a; --dr-bar:#0a0b0d; --dr-page-shadow:rgba(0,0,0,.6); --dr-spine:rgba(0,0,0,.55)}

#drOverlay{position:absolute;inset:0;background:var(--dr-bg);transition:background .25s}

/* top bar */
#dishaReader .dr-bar{position:relative;z-index:2;display:flex;align-items:center;gap:.75rem;
  padding:.55rem .9rem;background:var(--dr-bar);color:var(--dr-bar-fg);
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 6px 18px -8px rgba(0,0,0,.5)}
#dishaReader .dr-title{min-width:0;flex:1}
#dishaReader .dr-title p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#drTitle{font-weight:700;font-family:Sora,system-ui,sans-serif;font-size:.95rem}
#drMeta{font-size:.72rem;opacity:.7}
#drPageInfo{font-variant-numeric:tabular-nums;font-size:.72rem;letter-spacing:.02em;opacity:.85;
  white-space:nowrap;text-transform:uppercase}
#dishaReader .dr-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
#dishaReader .dr-btn{display:grid;place-items:center;height:2.15rem;min-width:2.15rem;padding:0 .55rem;
  border:0;border-radius:.6rem;background:rgba(255,255,255,.1);color:inherit;cursor:pointer;
  font-size:.8rem;line-height:1;transition:background .15s}
#dishaReader .dr-btn:hover{background:rgba(255,255,255,.22)}
#dishaReader .dr-btn[aria-pressed="true"]{background:#c9a227;color:#0b1f3a;font-weight:700}
#dishaReader .dr-btn svg{width:1.15rem;height:1.15rem}
#drSave{padding:0 .8rem;font-size:.78rem}
#drSave.saved{opacity:.6;cursor:default}

/* stage */
#dishaReader .dr-stage{position:relative;z-index:1;flex:1;overflow:hidden;display:grid;place-items:center;
  padding:clamp(.5rem,2.2vw,2rem)}
#drViewport{position:relative;width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}
/* min-height/width keep a small page centred while letting a tall/zoomed page scroll from the top-left */
#drTrack{min-height:100%;min-width:100%;display:flex;align-items:center;justify-content:center;gap:0;will-change:transform,opacity}
#drTrack.turn-next{animation:drTurnNext .34s cubic-bezier(.4,0,.2,1)}
#drTrack.turn-prev{animation:drTurnPrev .34s cubic-bezier(.4,0,.2,1)}
@keyframes drTurnNext{0%{transform:translateX(3%) scale(.985);opacity:.35}100%{transform:none;opacity:1}}
@keyframes drTurnPrev{0%{transform:translateX(-3%) scale(.985);opacity:.35}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#drTrack.turn-next,#drTrack.turn-prev{animation:none}}

/* pages */
#dishaReader .dr-page{position:relative;background:#fff;box-shadow:0 10px 30px -8px var(--dr-page-shadow);
  border-radius:2px;overflow:hidden;flex:0 0 auto}
#dishaReader .dr-page canvas{display:block;width:100%;height:100%}
#dishaReader .dr-page.dr-skeleton{background:linear-gradient(100deg,#fff 30%,#f1f1f3 50%,#fff 70%);
  background-size:200% 100%;animation:drShimmer 1.1s infinite}
@keyframes drShimmer{to{background-position:-200% 0}}
/* spine shadow between the two pages of a spread */
#dishaReader .dr-spread .dr-page:first-child{box-shadow:0 10px 30px -8px var(--dr-page-shadow),
  inset -14px 0 22px -14px var(--dr-spine)}
#dishaReader .dr-spread .dr-page:last-child{box-shadow:0 10px 30px -8px var(--dr-page-shadow),
  inset 14px 0 22px -14px var(--dr-spine)}
#dishaReader .dr-spread .dr-page:first-child{border-radius:2px 0 0 2px}
#dishaReader .dr-spread .dr-page:last-child{border-radius:0 2px 2px 0}

/* floating arrows */
#dishaReader .dr-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  height:3rem;width:3rem;border:0;border-radius:50%;cursor:pointer;
  background:rgba(11,31,58,.55);color:#fff;display:grid;place-items:center;
  opacity:0;transition:opacity .3s,background .15s,transform .15s}
#dishaReader[data-theme="dark"] .dr-nav{background:rgba(255,255,255,.16)}
#dishaReader.dr-active .dr-nav:not(:disabled){opacity:.9}
#dishaReader .dr-nav:hover:not(:disabled){background:rgba(11,31,58,.85)}
#dishaReader .dr-nav:disabled{opacity:0 !important;pointer-events:none}
#drPrev{left:clamp(.4rem,2vw,1.5rem)}#drNext{right:clamp(.4rem,2vw,1.5rem)}
#dishaReader .dr-nav svg{width:1.5rem;height:1.5rem}

/* mobile & tablet: single page fills the width, arrows auto-hide, page scrolls */
@media (max-width:1023px){
  #dishaReader .dr-stage{padding:0}
  #dishaReader .dr-nav{height:2.6rem;width:2.6rem;background:rgba(11,31,58,.5)}
  #dishaReader[data-theme="dark"] .dr-nav{background:rgba(255,255,255,.18)}
  #dishaReader.dr-active .dr-nav:not(:disabled){opacity:0}          /* hidden by default */
  #dishaReader.dr-active.nav-show .dr-nav:not(:disabled){opacity:.9} /* revealed briefly on tap / page-turn */
  #drTrack.turn-next,#drTrack.turn-prev{animation:none}             /* no slide while vertical-scrolling */
}

/* mobile */
@media (max-width:767px){
  #dishaReader .dr-bar{padding:.5rem .6rem;gap:.5rem}
  #dishaReader .dr-title{display:none}            /* edition name is known from the shelf */
  #dishaReader #drMode{display:none}               /* below 1024 it's always single page */
  #drPageInfo{flex:1;font-size:.8rem}
  #dishaReader .dr-btn{height:2rem;min-width:2rem;padding:0 .45rem}
  /* Save becomes a fixed bottom action bar — anchored to the viewport, not the top bar. */
  #drSave{position:fixed;left:.6rem;right:.6rem;bottom:.6rem;top:auto;height:2.7rem;z-index:6;
    background:rgba(11,31,58,.92);border-radius:.7rem;font-size:.85rem;box-shadow:0 8px 24px -8px rgba(0,0,0,.6)}
  #dishaReader[data-theme="dark"] #drSave{background:rgba(255,255,255,.16)}
}