:root{
  --ink:#682e20;
  --ink-soft:#8f6246;
  --paper:#fde69a;
  --paper-light:#fff3bd;
  --line:rgba(116,70,18,.18);
  --button:#6f2e20;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:"Trebuchet MS",Arial,sans-serif;color:var(--ink);background:#eff66a}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
body.viewer-open{overflow:hidden}

/* Entire page stays fixed. Only .paper-window scrolls. */
.forest-page{position:relative;width:100%;height:100%;overflow:hidden}
.forest-bg{position:absolute;inset:0;background:url('/assets/red-panda/forest-bg.png') center center/cover no-repeat;z-index:0}
.library-stage{position:relative;z-index:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:2.4vh 2.5vw}

/* Keep the supplied 1572x802 bamboo artwork at its intended ratio on desktop. */
.paper-shell{
  position:relative;
  width:min(94vw,1450px,calc(90vh * 1.96));
  aspect-ratio:1572/802;
  flex:0 0 auto;
}
.bamboo-frame{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;z-index:1;
  filter:drop-shadow(0 16px 18px rgba(88,75,18,.16));
}

/* IMPORTANT: content is ABOVE the bamboo image. The previous version had the
   frame above the content, so the opaque parchment centre hid all text/cards. */
.paper-window{
  position:absolute;
  z-index:3;
  left:11.8%;right:11.6%;top:18.2%;bottom:14.7%;
  overflow-y:auto;overflow-x:hidden;
  padding:8px 18px 26px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#ba873d transparent;
}
.paper-window::-webkit-scrollbar{width:8px}
.paper-window::-webkit-scrollbar-track{background:transparent}
.paper-window::-webkit-scrollbar-thumb{background:#ba873d;border-radius:999px;border:2px solid rgba(255,238,177,.9)}

.library-toolbar{
  position:sticky;top:-8px;z-index:8;
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:12px 2px 10px;margin-bottom:6px;
  background:linear-gradient(to bottom,rgba(253,230,154,.99) 0%,rgba(253,230,154,.96) 78%,rgba(253,230,154,0) 100%);
}
.kicker{margin:0 0 2px;font-size:10px;letter-spacing:.16em;font-weight:900}
.library-toolbar h1{margin:0;font-size:clamp(22px,2.2vw,37px);line-height:1;font-weight:900;color:var(--ink)}
.toolbar-actions{display:flex;align-items:center;gap:7px;min-width:0}
.search-box{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.43);border:1.5px solid rgba(105,47,32,.14);border-radius:999px;padding:7px 10px;min-width:190px}
.search-box span{font-size:15px;font-weight:900}.search-box input{border:0;outline:0;background:transparent;width:100%;min-width:0;color:var(--ink)}
.search-box input::placeholder{color:#996f54}
.admin-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink);font-size:11px;font-weight:900;padding:8px 11px;border:1.5px solid rgba(105,47,32,.16);border-radius:999px;background:rgba(255,255,255,.30)}
.document-count{font-size:11px;font-weight:800;color:var(--ink-soft);margin:1px 3px 8px}

/* Compact page-6-style library listing: short portrait thumbnails + text. */
.book-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 10px;padding:0 2px 22px}
.book-card{
  min-width:0;min-height:96px;
  display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:9px;align-items:center;
  padding:7px 8px 7px 7px;
  border:1.5px solid rgba(132,79,22,.12);border-radius:13px;
  background:rgba(255,248,216,.48);cursor:pointer;
  transition:transform .14s ease,background .14s ease,border-color .14s ease;
}
.book-card:hover{transform:translateY(-1px);background:rgba(255,250,225,.74);border-color:rgba(132,79,22,.24)}
.book-card:focus-visible{outline:3px solid rgba(111,46,32,.28);outline-offset:2px}
.book-thumb{width:58px;height:76px;border-radius:6px;overflow:hidden;background:#f2d37f;box-shadow:0 3px 8px rgba(95,51,8,.15);display:grid;place-items:center;position:relative}
.book-thumb img,.book-thumb canvas{width:100%;height:100%;object-fit:cover;display:block}
.book-thumb .pdf-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:9px;font-weight:900;color:#7c4c24;z-index:0}.book-thumb img,.book-thumb canvas{position:relative;z-index:1}
.book-copy{min-width:0}
.book-tag{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8.5px;line-height:1.2;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#975126;margin-bottom:3px}
.book-title{margin:0;font-size:13.5px;line-height:1.15;color:var(--ink);font-weight:900;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.book-desc{margin:4px 0 0;color:#805d48;font-size:9.8px;line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.book-meta{margin-top:4px;color:#9a745b;font-size:8.8px;font-weight:800}
.read-btn{border:0;border-radius:999px;background:var(--button);color:#fff5d4;font-weight:900;font-size:10px;padding:7px 9px;cursor:pointer;white-space:nowrap}
.empty-state{grid-column:1/-1;padding:32px 10px;text-align:center;font-weight:900;color:#8e6044}

/* Supplied panda asset. It sits outside the scroll rectangle. */
.panda-corner{position:absolute;z-index:5;left:max(1.2vw,8px);bottom:max(1vh,6px);width:min(15.5vw,220px);max-height:31vh;object-fit:contain;pointer-events:none;filter:drop-shadow(0 8px 8px rgba(48,46,13,.08))}

/* Embedded PDF reader: stays inside the bamboo parchment area. */
.paper-window.reader-mode{
  overflow:hidden;
  padding:8px 18px 10px;
}
.reader-view{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  font-family:"Baloo 2","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  color:var(--ink);
}
.reader-view[hidden]{display:none!important}
.library-view[hidden]{display:none!important}
.reader-header{
  position:relative;
  z-index:12;
  display:grid;
  grid-template-columns:minmax(78px,auto) minmax(0,1fr) 44px;
  align-items:center;
  gap:10px;
  padding:5px 2px 9px;
  border-bottom:1px solid rgba(105,47,32,.18);
  background:linear-gradient(to bottom,rgba(253,230,154,.99),rgba(253,230,154,.94));
}
.back-btn{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:3px;
  width:max-content;
  border:0;
  padding:5px 8px 5px 3px;
  color:var(--ink);
  background:transparent;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
}
.back-btn svg,.reader-download svg,.reader-nav svg{
  width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
.reader-title-wrap{text-align:center;min-width:0}
.reader-title{font-size:15px;line-height:1.1;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-meta{font-family:"Quicksand","Trebuchet MS",sans-serif;font-size:10px;font-weight:600;color:var(--ink-soft);margin-top:2px}
.reader-download{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;justify-self:end;
  color:var(--ink);background:rgba(255,255,255,.38);border:1px solid rgba(105,47,32,.14);text-decoration:none;
}
.reader-download[hidden]{display:none!important}
.reader-body{
  min-height:0;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 48px;
  align-items:center;
  overflow:hidden;
}
.reader-page-stage{
  min-width:0;min-height:0;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;
  padding:8px 6px 4px;touch-action:pan-y;overflow:hidden;
}
.reader-page-frame{
  max-width:100%;max-height:calc(100% - 20px);background:#fff;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;border-radius:3px;box-shadow:0 8px 24px rgba(94,53,13,.22);transform-origin:center;
}
.reader-page-frame canvas{display:block;max-width:100%;max-height:100%}
.reader-page-frame.turn-next{animation:turnNext .32s ease}.reader-page-frame.turn-prev{animation:turnPrev .32s ease}
@keyframes turnNext{0%{transform:perspective(1200px) rotateY(0)}48%{transform:perspective(1200px) rotateY(-12deg);opacity:.66}100%{transform:perspective(1200px) rotateY(0);opacity:1}}
@keyframes turnPrev{0%{transform:perspective(1200px) rotateY(0)}48%{transform:perspective(1200px) rotateY(12deg);opacity:.66}100%{transform:perspective(1200px) rotateY(0);opacity:1}}
.page-loader{position:absolute;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;gap:6px}.page-loader.hidden{display:none}.page-loader span{width:7px;height:7px;border-radius:50%;background:#7d351b;animation:pulse .75s infinite alternate}.page-loader span:nth-child(2){animation-delay:.14s}.page-loader span:nth-child(3){animation-delay:.28s}@keyframes pulse{from{opacity:.25;transform:translateY(1px)}to{opacity:1;transform:translateY(-3px)}}
.swipe-tip{font-size:9px;color:var(--ink-soft);margin-top:5px;font-weight:700}
.reader-nav{
  width:38px;height:38px;justify-self:center;border:0;border-radius:50%;background:rgba(111,46,32,.10);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
}
.reader-nav:disabled,.reader-text-btn:disabled{opacity:.25;cursor:default}
.reader-footer{
  min-height:34px;display:flex;align-items:center;justify-content:center;gap:14px;border-top:1px solid rgba(105,47,32,.14);
}
.reader-text-btn{border:0;background:transparent;color:var(--ink);padding:5px 8px;cursor:pointer;font-weight:800;font-size:11px}
.page-dots{display:flex;gap:5px;max-width:160px;overflow:hidden}.page-dot{width:5px;height:5px;border-radius:50%;background:rgba(105,47,32,.22);flex:0 0 auto}.page-dot.active{background:var(--ink);transform:scale(1.45)}
@media(max-width:980px){
  .book-list{grid-template-columns:1fr}
  .paper-window{left:12.4%;right:12.2%;top:17.5%;bottom:14.5%;padding-inline:12px}
  .book-card{min-height:90px}
}

/* On narrow phones, retain the bamboo artwork but give the parchment enough
   vertical space to be usable. Only the middle still scrolls. */
@media(max-width:700px){
  .library-stage{padding:1.5vh 1vw}
  .paper-shell{width:98vw;height:88vh;aspect-ratio:auto}
  .bamboo-frame{object-fit:fill}
  .paper-window{left:13%;right:13%;top:12.5%;bottom:12.5%;padding:6px 7px 18px}
  .library-toolbar{top:-6px;display:grid;align-items:start;padding:9px 0 8px}
  .library-toolbar h1{font-size:23px}.kicker{font-size:8.5px}
  .toolbar-actions{width:100%}.search-box{min-width:0;flex:1;padding:6px 9px}.admin-link{padding:7px 9px}
  .book-card{grid-template-columns:52px minmax(0,1fr);min-height:78px;padding:6px}.book-thumb{width:49px;height:64px}.read-btn{display:none}.book-title{font-size:12px}.book-desc{font-size:9px}.book-meta{font-size:8px}
  .panda-corner{width:88px;left:0;bottom:0}
  .viewer-shell{grid-template-rows:62px 1fr 52px}.viewer-body{grid-template-columns:1fr}.nav-btn{display:none}.page-stage{padding:8px}.page-frame{width:calc(100vw - 16px);height:auto;max-height:calc(100vh - 132px);max-width:calc(100vw - 16px)}
}

/* v7: taller bamboo frame + intro copy from designs 1, 2 and 3 */
.paper-shell{
  width:min(95vw,1480px);
  height:96vh;
  aspect-ratio:auto;
}
.bamboo-frame{object-fit:fill}
.paper-window{
  left:11.8%;right:11.6%;top:10.5%;bottom:10.2%;
  padding:12px 22px 34px;
}

/* The three introductory text panels are intentionally part of the same
   .paper-window so they scroll together with the library listing. */
.intro-copy{padding:8px 3% 2px;text-align:center;color:var(--ink)}
.intro-block{max-width:900px;margin:0 auto;padding:18px 10px}
.intro-welcome{padding-top:8px;padding-bottom:24px}
.intro-welcome h1{margin:0;font-size:clamp(31px,4vw,62px);line-height:1;font-weight:900;letter-spacing:.01em}
.intro-library-name{margin:18px 0 0;font-size:clamp(24px,2.9vw,45px);line-height:1.12;font-weight:500}
.intro-read-for h2,.intro-pip h2{margin:0 0 18px;font-size:clamp(20px,2vw,31px);line-height:1.15;font-weight:900;letter-spacing:.02em}
.intro-read-for p,.intro-pip p{margin:8px auto;font-size:clamp(14px,1.35vw,21px);line-height:1.42;font-weight:800;max-width:850px}
.intro-pip p{margin:10px auto}
.intro-divider{height:2px;max-width:620px;margin:0 auto;background:linear-gradient(90deg,transparent,rgba(111,46,32,.28),transparent)}
.story-section-marker{height:8px}

/* Keep Pick a Story readable after the intro has scrolled away. */
.library-toolbar{
  top:-12px;
  padding-top:14px;
}

/* Requested character placement and asset. */
.panda-corner{
  left:auto;
  right:max(.8vw,4px);
  bottom:max(.4vh,2px);
  width:min(17vw,245px);
  max-height:34vh;
}

/* Admin access remains available at /admin; the public button is hidden. */
.admin-link{display:none!important}

@media(max-width:980px){
  .paper-shell{width:97vw;height:95vh}
  .paper-window{left:12.2%;right:12%;top:10%;bottom:10%;padding-inline:14px}
  .intro-copy{padding-inline:1%}
}

@media(max-width:700px){
  .paper-shell{width:99vw;height:96vh}
  .paper-window{left:12.7%;right:12.7%;top:9.3%;bottom:9.5%;padding:8px 8px 24px}
  .intro-block{padding:14px 2px}
  .intro-welcome h1{font-size:29px}
  .intro-library-name{font-size:22px;margin-top:10px}
  .intro-read-for h2,.intro-pip h2{font-size:18px;margin-bottom:12px}
  .intro-read-for p,.intro-pip p{font-size:13px;line-height:1.4;margin:7px auto}
  .panda-corner{left:auto;right:-2px;bottom:0;width:92px}
}

/* v8: keep the scrollable content safely inside the bamboo frame */
.paper-window{
  top:20.5% !important;
}

/* Match the playful typography used in 1.svg / 2.svg.
   Baloo 2 is used for the chunky rounded headings/body copy, while
   Quicksand matches the lighter 'The Red Panda Library' subtitle. */
.intro-copy,
.intro-read-for,
.intro-pip{
  font-family:"Baloo 2","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
}
.intro-welcome h1,
.intro-read-for h2,
.intro-pip h2,
.intro-read-for p,
.intro-pip p{
  font-family:"Baloo 2","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
}
.intro-welcome h1{
  font-weight:800;
  letter-spacing:.01em;
}
.intro-library-name{
  font-family:"Quicksand","Trebuchet MS",Arial,sans-serif;
  font-weight:500;
  letter-spacing:0;
}
.intro-read-for h2,
.intro-pip h2{
  font-weight:800;
}
.intro-read-for p,
.intro-pip p{
  font-weight:700;
  letter-spacing:.01em;
}

/* v9: embedded reader mobile tuning */
@media(max-width:700px){
  .paper-window.reader-mode{padding:5px 6px 7px}
  .reader-header{grid-template-columns:72px minmax(0,1fr) 38px;gap:5px;padding-bottom:6px}
  .back-btn{font-size:12px;min-height:34px}.back-btn svg{width:18px;height:18px}
  .reader-title{font-size:12px}.reader-meta{font-size:9px}
  .reader-download{width:34px;height:34px}
  .reader-body{grid-template-columns:1fr}
  .reader-nav{display:none}
  .reader-page-stage{padding:5px 2px 2px}
  .reader-page-frame{max-width:100%;max-height:calc(100% - 18px)}
  .reader-footer{min-height:31px}
  .reader-text-btn{font-size:10px}
}

/* v10: continuous scroll PDF reader inside the bamboo parchment.
   No previous/next controls and no swipe navigation. */
.paper-window.reader-mode{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:0 10px 28px !important;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}

.reader-view{
  display:block !important;
  height:auto !important;
  min-height:100%;
  color:var(--ink);
  font-family:"Baloo 2","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
}
.reader-view[hidden]{display:none !important}

.reader-header{
  position:sticky !important;
  top:0;
  z-index:30;
  display:grid;
  grid-template-columns:minmax(74px,auto) minmax(0,1fr) 44px;
  align-items:center;
  gap:10px;
  padding:9px 4px 10px;
  margin:0 0 10px;
  border-bottom:1px solid rgba(105,47,32,.18);
  background:rgba(253,230,154,.97);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.reader-title-wrap{min-width:0;text-align:center}
.reader-title{font-size:15px;line-height:1.15;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-meta{font-family:"Quicksand","Trebuchet MS",sans-serif;font-size:10px;font-weight:700;color:var(--ink-soft);margin-top:2px}

.pdf-pages{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:0;
}

.pdf-page-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  background:#fff;
  box-shadow:0 7px 20px rgba(82,47,17,.20);
  border-radius:3px;
  overflow:hidden;
}

.pdf-page-canvas{
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:100%;
  background:#fff;
}

.reader-loading{
  min-height:260px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.reader-loading span{
  width:8px;height:8px;border-radius:50%;background:#7d351b;animation:pulse .75s infinite alternate;
}
.reader-loading span:nth-child(2){animation-delay:.14s}
.reader-loading span:nth-child(3){animation-delay:.28s}
.reader-error{padding:50px 12px;text-align:center;font-weight:800;color:#8e6044}

/* Old page-navigation UI is intentionally disabled in v10. */
.reader-body,.reader-footer,.reader-nav,.reader-text-btn,.page-dots,.swipe-tip{display:none !important}

@media(max-width:700px){
  .paper-window.reader-mode{padding:0 4px 20px !important}
  .reader-header{
    grid-template-columns:68px minmax(0,1fr) 36px;
    gap:4px;
    padding:6px 0 7px;
    margin-bottom:7px;
  }
  .back-btn{min-height:34px;font-size:12px;padding-left:0}
  .back-btn svg{width:18px;height:18px}
  .reader-title{font-size:11px}
  .reader-meta{font-size:8.5px}
  .reader-download{width:33px;height:33px}
  .reader-download svg{width:18px;height:18px}
  .pdf-pages{gap:8px}
}

/* v11: use more of the viewport height. The bamboo frame is intentionally
   shifted upward so the decorative top leaf can be clipped by the viewport. */
.library-stage{
  align-items:flex-start;
  padding:0 1.5vw;
  overflow:hidden;
}
.paper-shell{
  width:min(97vw,1520px);
  height:112vh;
  margin-top:-10vh;
  aspect-ratio:auto;
}
.paper-window{
  top:20.5% !important;
  bottom:5.5% !important;
}
.panda-corner{
  bottom:11vh;
}

@media(max-width:980px){
  .paper-shell{
    width:99vw;
    height:110vh;
    margin-top:-8vh;
  }
  .paper-window{
    top:20.5% !important;
    bottom:5.8% !important;
  }
  .panda-corner{bottom:9vh}
}

@media(max-width:700px){
  .library-stage{padding:0}
  .paper-shell{
    width:101vw;
    height:108vh;
    margin-top:-7vh;
  }
  .paper-window{
    top:20.5% !important;
    bottom:5.5% !important;
  }
  .panda-corner{bottom:8vh}
}