/* ═══════════════════════════════════════════════════════════════════════
   Kindle-style book reader — Major (Retd.) Brahma Singh archive
   Self-contained (does not load the main site stylesheet).
   ═══════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;overflow:hidden}
button{font:inherit;cursor:pointer;color:inherit}
svg{display:block}

/* ── Theme tokens ──────────────────────────────────────────────────── */
:root[data-reader-theme="paper"]{
  --r-stage:#c9c3b6; --r-stage-2:#d7d2c6;
  --r-page:#fdfcf9; --r-page-edge:rgba(0,0,0,.10);
  --r-chrome:#faf8f2; --r-chrome-ink:#2b2f36; --r-chrome-soft:#6a7078; --r-chrome-line:rgba(0,0,0,.10);
  --r-accent:#8a2a36; --r-accent-2:#b08a3c;
  --r-canvas-filter:none;
  --r-shadow:0 10px 34px rgba(0,0,0,.22);
}
:root[data-reader-theme="sepia"]{
  --r-stage:#c3b291; --r-stage-2:#d0c1a3;
  --r-page:#f6ecd6; --r-page-edge:rgba(90,64,20,.18);
  --r-chrome:#efe4cd; --r-chrome-ink:#43341f; --r-chrome-soft:#7d6b4c; --r-chrome-line:rgba(90,64,20,.20);
  --r-accent:#8a2a36; --r-accent-2:#9a6a1f;
  --r-canvas-filter:sepia(.36) brightness(1.02) contrast(.95);
  --r-shadow:0 10px 34px rgba(60,40,10,.30);
}
:root[data-reader-theme="night"]{
  --r-stage:#15181d; --r-stage-2:#1b1f25;
  --r-page:#1d232b; --r-page-edge:rgba(0,0,0,.5);
  --r-chrome:#1b2027; --r-chrome-ink:#e7e2d6; --r-chrome-soft:#959aa3; --r-chrome-line:rgba(255,255,255,.10);
  --r-accent:#e0b256; --r-accent-2:#c9a44e;
  --r-canvas-filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.92);
  --r-shadow:0 12px 40px rgba(0,0,0,.6);
}

/* ── Shell ─────────────────────────────────────────────────────────── */
.reader{
  position:fixed;inset:0;display:flex;flex-direction:column;
  background:radial-gradient(120% 120% at 50% 0%,var(--r-stage-2),var(--r-stage));
  color:var(--r-chrome-ink);
  transition:background .4s ease,color .4s ease;
}

/* Bars slide away in immersive mode */
.reader-top,.reader-bottom{
  flex:0 0 auto;z-index:20;background:var(--r-chrome);color:var(--r-chrome-ink);
  display:flex;align-items:center;gap:.5rem;
  transition:transform .3s var(--r-ease,cubic-bezier(.22,.61,.36,1)),opacity .3s;
}
.reader-top{
  padding:.5rem clamp(.6rem,2vw,1.1rem);gap:.8rem;
  border-bottom:1px solid var(--r-chrome-line);box-shadow:0 2px 12px rgba(0,0,0,.10);
  padding-top:max(.5rem,env(safe-area-inset-top));
}
.reader-bottom{
  padding:.5rem clamp(.6rem,2vw,1.1rem);
  border-top:1px solid var(--r-chrome-line);box-shadow:0 -2px 12px rgba(0,0,0,.10);
  padding-bottom:max(.5rem,env(safe-area-inset-bottom));
}
.reader.immersive .reader-top{transform:translateY(-100%);opacity:0;pointer-events:none}
.reader.immersive .reader-bottom{transform:translateY(100%);opacity:0;pointer-events:none}

/* ── Buttons ───────────────────────────────────────────────────────── */
.rbtn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:transparent;border:1px solid transparent;border-radius:8px;
  padding:.42rem .6rem;color:var(--r-chrome-ink);font-size:.86rem;font-weight:500;
  line-height:1;transition:background .18s,border-color .18s,color .18s,transform .18s;
  white-space:nowrap;text-decoration:none;
}
.rbtn:hover{background:color-mix(in srgb,var(--r-chrome-ink) 8%,transparent);border-color:var(--r-chrome-line)}
.rbtn:active{transform:translateY(1px)}
.rbtn svg{width:19px;height:19px}
.rbtn-icon{padding:.42rem;border-radius:8px}
.rbtn-back .lbl{font-weight:600}
.rbtn-solid{background:var(--r-accent);color:#fff;border-color:var(--r-accent);padding:.6rem 1.1rem;font-weight:600}
.rbtn-solid:hover{background:var(--r-accent);filter:brightness(1.08)}
.rsep{width:1px;height:22px;background:var(--r-chrome-line);margin:0 .1rem}
:focus-visible{outline:2px solid var(--r-accent-2);outline-offset:2px}

.reader-title{
  flex:1 1 auto;min-width:0;text-align:center;display:flex;flex-direction:column;line-height:1.15;
}
.reader-title .rt-main{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:1.12rem;
  color:var(--r-chrome-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.reader-title .rt-sub{
  font-size:.7rem;letter-spacing:.04em;color:var(--r-chrome-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.reader-tools{display:flex;align-items:center;gap:.2rem;flex:0 0 auto}

/* ── Stage ─────────────────────────────────────────────────────────── */
.reader-stage{
  position:relative;flex:1 1 auto;overflow:auto;text-align:center;
  padding:clamp(.7rem,2.4vw,2rem) clamp(.4rem,2vw,1.4rem);
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
}
.page-wrap{
  position:relative;display:inline-block;vertical-align:top;text-align:left;margin:0 auto;
  background:var(--r-page);border-radius:3px;box-shadow:var(--r-shadow);
  outline:1px solid var(--r-page-edge);transition:background .4s ease;
  perspective:2200px;perspective-origin:32% 50%;
}
/* Thin stacked-page edge on the right & bottom (needs color-mix;
   older browsers simply keep the plain drop shadow above). */
@supports (background:color-mix(in srgb,#000,#fff)){
  .page-wrap{
    box-shadow:var(--r-shadow),
      2px 0 0 color-mix(in srgb,var(--r-page) 90%,#000),
      4px 0 0 color-mix(in srgb,var(--r-page) 80%,#000),
      0 4px 0 color-mix(in srgb,var(--r-page) 86%,#000);
  }
}
.page-canvas{
  display:block;border-radius:3px;max-width:100%;height:auto;
  filter:var(--r-canvas-filter);transition:filter .35s ease;
}

/* ── Page-turn animation (leaf fold) ───────────────────────────────── */
.flip-cast,.flip-leaf{position:absolute;top:0;left:0;pointer-events:none;display:none}
.reader.turning .flip-cast,.reader.turning .flip-leaf{display:block}
.reader.turning .reader-stage{overflow:hidden}
.flip-cast{z-index:1;width:100%;height:100%;opacity:0;border-radius:3px;
  background:linear-gradient(90deg,rgba(0,0,0,.30),rgba(0,0,0,0) 40%)}
.flip-leaf{z-index:2;transform-origin:left center;transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;will-change:transform;backface-visibility:visible}
.flip-face{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:3px;
  background:var(--r-page);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-front{z-index:2}
.flip-front .flip-canvas{display:block;width:100%;height:100%;filter:var(--r-canvas-filter)}
.flip-back{transform:rotateY(180deg);
  background:linear-gradient(90deg,color-mix(in srgb,var(--r-page) 82%,#000) 0%,var(--r-page) 16%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.05)}
.flip-gloss{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,0) 24%,rgba(255,255,255,.16) 52%,rgba(0,0,0,0) 80%,rgba(0,0,0,.12) 100%)}
:root[data-reader-theme="night"] .flip-gloss{
  background:linear-gradient(105deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 24%,rgba(255,255,255,.08) 52%,rgba(0,0,0,0) 80%,rgba(0,0,0,.26) 100%)}

/* Side tap / click zones for turning pages */
.nav-zone{
  position:absolute;top:0;bottom:0;width:26%;z-index:15;
  background:transparent;border:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--r-chrome-ink);opacity:0;transition:opacity .2s;
}
.nav-prev{left:0;justify-content:flex-start;padding-left:.4rem}
.nav-next{right:0;justify-content:flex-end;padding-right:.4rem}
.nav-zone .chev{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:var(--r-chrome);box-shadow:0 4px 14px rgba(0,0,0,.25);border:1px solid var(--r-chrome-line);
}
.nav-zone .chev svg{width:24px;height:24px}
@media(hover:hover){ .reader-stage:hover .nav-zone{opacity:.5} .nav-zone:hover{opacity:1} }
.nav-zone:disabled{opacity:0!important;pointer-events:none}

/* ── Loading / error ───────────────────────────────────────────────── */
.reader-loading,.reader-error{
  position:absolute;inset:0;z-index:18;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;text-align:center;padding:2rem;
  color:var(--r-chrome-ink);
}
.reader-error{background:var(--r-stage)}
.reader-error svg{width:52px;height:52px;color:var(--r-accent-2);opacity:.8}
.reader-error p{max-width:22rem;color:var(--r-chrome-soft)}
.reader-loading p{color:var(--r-chrome-soft);font-size:.92rem;letter-spacing:.03em}
.spinner{
  width:38px;height:38px;border-radius:50%;
  border:3px solid color-mix(in srgb,var(--r-chrome-ink) 18%,transparent);
  border-top-color:var(--r-accent-2);animation:rspin .8s linear infinite;
}
@keyframes rspin{to{transform:rotate(360deg)}}
[hidden]{display:none!important}

/* ── Bottom controls ───────────────────────────────────────────────── */
.progress{flex:1 1 auto;display:flex;align-items:center;min-width:0}
#pageSlider{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--r-accent-2) var(--pct,0%),color-mix(in srgb,var(--r-chrome-ink) 16%,transparent) var(--pct,0%));
  outline:none;cursor:pointer;
}
#pageSlider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--r-accent-2);border:2px solid var(--r-chrome);box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:grab;
}
#pageSlider::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--r-accent-2);
  border:2px solid var(--r-chrome);box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:grab;
}
.page-count{display:flex;align-items:center;gap:.35rem;flex:0 0 auto;font-size:.86rem;color:var(--r-chrome-soft);font-variant-numeric:tabular-nums}
.page-count .of{opacity:.6}
#pageInput{
  width:3.4em;text-align:center;font:inherit;font-size:.86rem;font-variant-numeric:tabular-nums;
  color:var(--r-chrome-ink);background:color-mix(in srgb,var(--r-chrome-ink) 6%,transparent);
  border:1px solid var(--r-chrome-line);border-radius:6px;padding:.25rem .1rem;
  -moz-appearance:textfield;
}
#pageInput::-webkit-outer-spin-button,#pageInput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ── Responsive ────────────────────────────────────────────────────── */
@media(max-width:640px){
  .reader-title .rt-sub{display:none}
  .reader-title .rt-main{font-size:1rem}
  .rbtn-back .lbl{display:none}
  #btnTheme .lbl{display:none}
  .reader-tools{gap:.1rem}
  .rsep{display:none}
  .nav-zone{width:32%}
  /* hover-less devices: keep the chevrons faintly visible as an affordance */
  .nav-zone{opacity:.28}
}
@media(max-width:380px){
  .page-count{font-size:.8rem}
  #pageInput{width:2.8em}
}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important;animation-duration:.001ms!important;scroll-behavior:auto!important}
}