.page-library .library-cabinet [data-viewer-book]{height:100%;max-width:100%;padding:0;border:0;background:transparent;cursor:pointer;display:block}
.page-library .library-cabinet [data-viewer-book] img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.page-library .library-cabinet [data-viewer-book]:focus-visible{outline:3px solid #fff0b5;outline-offset:3px}

/* Book viewer — fresh implementation (2026-11-07). Every visible element is a
   real DOM element laid out with flex/grid; nothing overlays painted art, so
   no element can drift at any viewport size. */

.book-viewer{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;direction:rtl;
  font-family:Tahoma,Arial,sans-serif;color:#f4dfb5;text-align:center;
  background:linear-gradient(180deg,#170902c9,#170902c9),url('../assets/library-wood-desktop.webp') center/cover fixed}
.book-viewer[hidden],.book-viewer canvas[hidden]{display:none!important}
.book-viewer *{box-sizing:border-box}
.book-viewer button{font:inherit;cursor:pointer}
.book-viewer button:disabled{opacity:.4;cursor:default}

/* The reading marker overlays unused top space without moving the book. */
.bv-progress-marker{position:fixed;z-index:10002;top:calc(5.7vw + 8px);inset-inline-start:12px;
  max-width:min(42vw,320px);padding:5px 10px;border:1px solid #c89b46;border-radius:8px;
  background:#301609ed;color:#ffe9c4;font:bold 12px Tahoma,Arial,sans-serif;pointer-events:none}
.bv-progress-marker[hidden]{display:none}
.bv-progress-marker.bv-progress-error{background:#5b180fed;color:#fff;max-width:min(75vw,420px)}
@media(max-width:1000px){.bv-progress-marker{top:50px;inset-inline-start:8px;max-width:70vw}}

/* Header: close button at the inline end, title plaque centered. */
.bv-head{position:relative;display:flex;align-items:center;justify-content:center;min-height:64px;padding:6px 12px}
.bv-plaque{margin:0;padding:6px 38px;color:#4a2c10;font-size:22px;font-weight:bold;
  background:linear-gradient(#fff2d0,#d4af70);border:3px ridge #c2934d;border-radius:22px;box-shadow:0 3px 9px #140700}
.bv-plaque::before,.bv-plaque::after{content:'✦';position:absolute;top:50%;transform:translateY(-50%);color:#d8a848;font-size:18px}
.bv-plaque::before{inset-inline-start:-30px}
.bv-plaque::after{inset-inline-end:-30px}
.bv-close{position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);min-height:38px;padding:5px 14px;
  border:2px solid #c89b46;border-radius:8px;background:#38190acc;color:#ffe9c4}

/* Body: reading stage plus the book information panel. */
.bv-body{flex:1;min-height:0;width:100%;max-width:1480px;margin:0 auto;padding:4px 18px 10px;
  display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:12px}
.bv-stage{min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(135deg,#290e04,#73401c 50%,#270e05);border:5px ridge #a5753d;border-radius:10px;
  box-shadow:inset 0 0 0 3px #2b1006,0 5px 14px #140700;padding:14px}
.bv-sheet{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;
  background:radial-gradient(circle at 14px 14px,#c9a04e 2.5px,transparent 3.5px) top left no-repeat,
    radial-gradient(circle at calc(100% - 14px) 14px,#c9a04e 2.5px,transparent 3.5px) top right no-repeat,
    radial-gradient(circle at 14px calc(100% - 14px),#c9a04e 2.5px,transparent 3.5px) bottom left no-repeat,
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px),#c9a04e 2.5px,transparent 3.5px) bottom right no-repeat,
    linear-gradient(160deg,#fdf6e3,#f6ead0);
  border:1px solid #c9a04e;border-radius:6px;
  box-shadow:0 6px 18px #140700, inset 0 0 0 4px #fdf6e3, inset 0 0 0 5px #d8b97a, inset 0 0 26px #e8d5a8}
.bv-page{flex:1;min-height:0;display:flex;overflow:auto;padding:10px;scrollbar-width:thin}
.bv-page.bv-pannable{cursor:grab}
.bv-page.bv-panning{cursor:grabbing}
.book-viewer.bv-dragging,.book-viewer.bv-dragging *{user-select:none!important;cursor:grabbing!important}
/* margin:auto centers when the page fits and keeps every overflowing edge
   reachable by scroll or drag — unlike flex centering, which clips the
   top/left overflow beyond the scroll area. */
.bv-page canvas{margin:auto;mix-blend-mode:multiply;background:transparent;box-shadow:none}
.bv-num{position:absolute;bottom:8px;width:50%;text-align:center;color:#7a5433;font-size:14px;font-weight:bold;pointer-events:none;z-index:3}
.bv-num[data-num="0"]{inset-inline-start:0}
.bv-num[data-num="1"]{inset-inline-end:0}

/* Information panel. */
.bv-info{align-self:start;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 14px;
  background:linear-gradient(135deg,#1e0b04,#563019 48%,#261006);border:3px ridge #bd8c46;border-radius:10px;
  box-shadow:inset 0 0 0 2px #351609,0 4px 10px #140700}
.bv-info-head{display:flex;align-items:center;gap:8px;width:100%;justify-content:center;padding:5px;border-radius:16px;
  background:linear-gradient(#fff1ce,#d1ad73);color:#4a2c10;font-weight:bold;font-size:15px}
.bv-info-head svg{width:20px;height:20px;fill:#4a2c10;flex:none}
.bv-cover{max-width:170px;max-height:230px;object-fit:contain;border:4px double #d3ab58;box-shadow:4px 6px 10px #170900;background:#f4e6c6}
.bv-book-title{margin:2px 0 0;color:#ffe9c4;font-size:17px;line-height:1.45}
.bv-credit{margin:0;color:#d9ab55;font-size:12.5px}
.bv-meta{margin:0;width:100%;display:flex;justify-content:space-between;gap:8px;color:#f3ddb0;font-size:12.5px;
  border-bottom:1px solid #6b4423;padding-bottom:5px}
.bv-meta b{color:#ffe9c4}
.bv-actions{display:grid;gap:9px;width:100%;margin-top:2px}
.bv-actions button,.bv-actions a{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;
  border-radius:9px;font-weight:bold;text-decoration:none}
.bv-actions button{color:#3a2008;background:linear-gradient(#f9d983,#bd8330);border:2px solid #e7bd6a}
.bv-actions a{color:#fff2d5;background:#351707;border:2px solid #deb96b}
.bv-actions svg{width:18px;height:18px;fill:currentColor;flex:none}

/* Bottom toolbar. */
.bv-bar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px 12px;
  background:linear-gradient(135deg,#241005,#4b2a12 50%,#1c0b03);border-top:3px ridge #a5753d}
.bv-bar button{min-height:40px;padding:7px 14px;border:2px solid #deb96b;border-radius:9px;background:#4b240f;color:#fff2d5}
.bv-bar button:focus-visible,.bv-close:focus-visible,.bv-actions button:focus-visible,.bv-actions a:focus-visible,
.bv-page:focus-visible,.bv-bar input:focus-visible{outline:3px solid #fff;outline-offset:2px}
.bv-zoom{display:flex;align-items:center;gap:6px}
.bv-zoom button{min-width:42px;font-size:17px;font-weight:bold}
.bv-zoom-label{display:flex;align-items:center;gap:6px;color:#ffe8bc;font-size:13px;font-weight:bold}
.bv-zoom-label svg{width:17px;height:17px;fill:none;stroke:#ffe8bc;stroke-width:2}
.bv-status{min-width:120px;padding:8px 14px;border:2px solid #b98b40;border-radius:10px;background:#f4dfb5;
  color:#301809;font-weight:bold;white-space:nowrap}
.bv-goto{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:bold}
.bv-goto input{width:4.2em;padding:7px 4px;text-align:center;color:#321607;background:#f8e8c6;
  border:1px solid #b98b40;border-radius:6px;font-weight:bold}

/* Phones and tablets: full-screen app-like reading — the page fills the whole
   screen, the plaque and toolbar step aside, and floating controls (close,
   page status, info toggle, edge page-turn buttons) stay within reach. */
@media(max-width:1000px){
  .book-viewer{background:linear-gradient(180deg,#210e04c9,#210e04c9),url('../assets/library-wood-mobile.webp') center/cover fixed}
  .bv-head{display:none}
  .bv-bar{display:none}
  .bv-plaque{font-size:18px;padding:5px 26px}
  .bv-body{grid-template-columns:minmax(0,1fr);padding:0;gap:0;overflow:auto}
  .bv-info{order:2;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:10px;gap:8px;display:none}
  .book-viewer.bv-info-open .bv-info{display:flex}
  .bv-info-head{width:100%}
  .bv-cover{max-width:96px;max-height:128px;margin:0}
  .bv-book-title{flex:1 1 100%;font-size:15px}
  .bv-credit{flex:1 1 100%;font-size:11.5px}
  .bv-meta{width:auto;flex:1 1 40%;font-size:11px}
  .bv-actions{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:7px}
  .bv-actions button,.bv-actions a{min-height:42px;font-size:13.5px;padding:6px 4px}
  /* The page area takes the whole screen so the full page is visible at once. */
  .bv-stage{order:1;min-height:100dvh;padding:6px}
  .bv-page{padding:6px;touch-action:none}
  .bv-num{font-size:12px}
  .bv-float{position:fixed;top:10px;inset-inline:6px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:4px;pointer-events:none}
  .bv-fclose,.bv-finfo{pointer-events:auto;background:#170902d0;color:#ffe9c4;border:2px solid #c89b46;border-radius:16px;padding:6px 12px;font:bold 12px Tahoma,Arial,sans-serif;cursor:pointer}
  .bv-jump{pointer-events:auto;display:flex;align-items:center;gap:4px}
  .bv-jump input{width:64px;padding:6px 4px;text-align:center;color:#321607;background:#f8e8c6;border:1px solid #b98b40;border-radius:8px;font-weight:bold;font-size:13px}
  .bv-jump button{background:#f9d983;color:#3a2008;border:1px solid #b98b40;border-radius:8px;padding:6px 10px;font-weight:bold;font-size:12px;cursor:pointer}
  .bv-fstatus{position:fixed;bottom:14px;inset-inline:0;margin:auto;width:max-content;max-width:82vw;background:#170902d0;color:#ffe9c4;border:2px solid #c89b46;border-radius:16px;padding:6px 14px;font:bold 12px Tahoma,Arial,sans-serif;text-align:center;z-index:20;pointer-events:none}
  .bv-edge{position:fixed;top:50%;transform:translateY(-50%);z-index:20;width:40px;height:60px;border-radius:12px;background:#170902c8;color:#ffe9c4;font-size:22px;border:2px solid #c89b46;cursor:pointer}
  .bv-edge[data-bv=previous]{inset-inline-start:6px}
  .bv-edge[data-bv=next]{inset-inline-end:6px}
  .bv-status{display:none}
}
@media(max-width:380px){.bv-actions button,.bv-actions a{font-size:12.5px}}

/* While the viewer is open the site menu becomes the horizontal top rail on
   the desktop, and steps aside on phones. */
@media(min-width:1001px){
  body.page-library:has(.book-viewer:not([hidden])) .sidebar{position:fixed;inset:.51vw .68vw auto 8%;width:auto;min-height:0;height:5.19vw;z-index:10001;
    display:flex;align-items:center;gap:clamp(4px,.8vw,12px);padding:0 clamp(5px,.8vw,12px) .9vw;direction:rtl;overflow:hidden;
    background:linear-gradient(180deg,#2a1309,#58301b 50%,#271107);border:0;box-shadow:none}
  body.page-library:has(.book-viewer:not([hidden])) .sidebar nav *{animation:none!important;transition:none!important}
  body.page-library:has(.book-viewer:not([hidden])) .sidebar .brand{flex:0 0 auto;width:auto;margin:0;padding:0 0 0 18px;font-size:20px;line-height:1.1;border-inline-end:1px solid #bd954c;color:#f0d293}
  body.page-library:has(.book-viewer:not([hidden])) .sidebar .brand small{font-size:10px;color:#f0d293}
  body.page-library:has(.book-viewer:not([hidden])) .sidebar nav{display:flex;flex:1;align-items:center;justify-content:space-between;gap:2px;margin:0;padding:0;min-width:0;overflow-x:auto;overflow-y:hidden;background:none}
  body.page-library:has(.book-viewer:not([hidden])) .sidebar nav>a{display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:4px;min-width:0;width:auto;margin:0;padding:5px clamp(2px,.4vw,8px);color:#f7e7c2;background:transparent;border:1px solid transparent;box-shadow:none;white-space:nowrap;font-size:clamp(11px,.85vw,14px)}
  body.page-library:has(.book-viewer:not([hidden])) .sidebar nav>a.active{color:#f4d281;background:#603a1b;border-color:#c89b46}
  body.page-library:has(.book-viewer:not([hidden])) .sidebar nav .nav-icon{width:20px;height:20px;flex:0 0 20px}
  body.page-library:has(.book-viewer:not([hidden])) .sidebar .member-time,
  body.page-library:has(.book-viewer:not([hidden])) .sidebar-footer{display:none}
  .book-viewer{padding-top:calc(5.19vw + .51vw)}
  .bv-float,.bv-edge,.bv-fstatus,.bv-jump{display:none}
}
@media(max-width:1000px){
  body.page-library:has(.book-viewer:not([hidden])) .sidebar,
  body.page-library:has(.book-viewer:not([hidden])) .mobile-menu{visibility:hidden;pointer-events:none}
}