/* ============================================================================
   book-reader.css — the flip-through reader on a book page (book-reader.js)
   Only the book pages load it. Colours come from site.css's Nautical Chart
   tokens; the page itself stays paper-white whatever the theme.
   ========================================================================== */
.br-section .section-head{margin-bottom:14px}
/* The two editions' own covers, above the buttons (session 60). Only a book that
   names them in its data file gets this block; decorative, so it is aria-hidden
   and never becomes the only way to tell the editions apart. */
.br-covers{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:0 0 14px}
.br-covers img{width:118px;height:auto;max-height:170px;object-fit:contain;border-radius:var(--radius,6px);
  border:1px solid var(--line-strong,rgba(18,50,77,.36));box-shadow:var(--shadow);background:#fff}
@media (max-width:480px){.br-covers img{width:92px}}
.br-open{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.br-open .btn{min-width:190px;justify-content:center}
.br-open .btn.is-on{box-shadow:0 0 0 3px var(--buoy,#e8b92f)}
.br-free-note{margin:10px auto 0;max-width:720px;text-align:center;font-size:.86rem;color:var(--text-dim)}

.br[hidden]{display:none}
.br,.br-section{scroll-margin-top:92px}
.br{--br-zoom:1;--br-ratio:.7729;margin:18px auto 0;max-width:1240px;padding:14px;border:1px solid var(--line-strong,rgba(18,50,77,.36));
  border-radius:var(--radius,6px);background:var(--sunken,#eef6f2);box-shadow:var(--shadow);outline:none}
.br:focus-visible{outline:3px solid var(--buoy,#e8b92f);outline-offset:2px}
.br-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:10px}
.br-title{flex:1 1 320px;margin:0;font-size:1.05rem}
.br-note{flex:1 1 100%;order:3;margin:0;font-size:.86rem;color:var(--text-dim);min-height:1.3em}
.br-close{margin-left:auto}

/* The stage scrolls when zoomed; the spread is as wide as fits the window's height. */
.br-stage{position:relative;overflow:auto;-webkit-overflow-scrolling:touch;perspective:2400px;
  border-radius:4px;background:linear-gradient(180deg,rgba(18,50,77,.10),rgba(18,50,77,.04));padding:10px 0}
.br-spread{display:flex;justify-content:center;margin:0 auto;gap:0;
  width:calc(min(100%, (100vh - 230px) * var(--br-ratio) * 2) * var(--br-zoom));transform-style:preserve-3d}
.br-spread.is-one{width:calc(min(100%, (100vh - 230px) * var(--br-ratio)) * var(--br-zoom))}
.br.is-zoomed .br-spread{max-width:none}
.br-page{position:relative;flex:0 0 50%;max-width:50%;margin:0;background:#fff;aspect-ratio:1082 / 1400;
  box-shadow:0 2px 10px rgba(0,0,0,.18);overflow:hidden;backface-visibility:hidden}
.br-spread.is-one .br-page{flex-basis:100%;max-width:100%}
/* the spine: a soft shadow where the two pages meet */
.br-spread.is-two .br-page:first-child:not(:last-child){box-shadow:inset -18px 0 22px -18px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.18)}
.br-spread.is-two .br-page:last-child:not(:first-child){box-shadow:inset 18px 0 22px -18px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.18)}
/* page 1 (and a last page on its own) sits on the right, as in a printed book */
.br-spread.is-single{justify-content:flex-end;padding-right:0}
.br-spread.is-two.is-single .br-page{margin-right:0}
.br-page img,.br-page canvas{display:block;width:100%;height:auto}
.br-pn{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:.72rem;color:#5d7280;pointer-events:none}
.br-page img ~ .br-pn,.br-page canvas ~ .br-pn{display:none}
/* NO SAVING OR PRINTING THE PAGES (owner, 2026-09-29) — see paint() in book-reader.js.
   The shield sits over each page and takes the right-click, drag and long-press. */
.br-stage{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.br-page img,.br-page canvas{-webkit-user-drag:none;pointer-events:none}
.br-shield{position:absolute;inset:0;z-index:1;background:transparent}
@media print{
  [data-book-reader] .br,[data-book-reader] .br-covers{display:none !important}
  [data-book-reader]::after{content:"The book pages are not available in print.";display:block;padding:12px 0;font-style:italic}
}
.br-page.is-loading{background:#fff linear-gradient(90deg,#f4f7f6 0,#e8eeec 50%,#f4f7f6 100%) 0 0/200% 100%;
  animation:br-shimmer 1.2s linear infinite}
@keyframes br-shimmer{to{background-position:-200% 0}}
.br-err{margin:40% 12px 0;text-align:center;font-size:.9rem;color:var(--chartred,#b33a2e)}

/* A members' page for a visitor without access. */
.br-page.is-locked{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(0deg,#fbfdfc 0 26px,#eef4f1 26px 27px)}
.br-locked{max-width:88%;padding:18px 16px;text-align:center;background:#fff;border:2px solid var(--navy,#12324d);
  border-radius:6px;box-shadow:3px 3px 0 rgba(18,50,77,.18);color:var(--ink,#1c2b36)}
.br-locked p{margin:0 0 8px}
.br-locked-k{font-size:.72rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--chartred,#b33a2e)}
.br-locked-h{font-family:var(--serif);font-weight:700;font-size:1.08rem;color:var(--navy,#12324d)}
.br-locked-t{font-size:.84rem;line-height:1.45;color:var(--text-dim,#344a58)}
.br-locked-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0 6px}
.br-locked-si{font-size:.78rem;color:var(--text-dimmer,#5d7280)}

/* The controls. */
.br-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-top:10px}
.br-nav{display:flex;align-items:center;gap:10px;flex:1 1 360px}
.br-where{margin:0;min-width:10em;text-align:center;font-weight:700;font-size:.9rem}
.br-jump{display:flex;align-items:center;gap:6px}
.br-jump-in{width:5.2em;padding:6px 8px;border:1px solid var(--line-strong);border-radius:4px;font:inherit;background:#fff;color:var(--ink,#1c2b36)}
.br-tools{display:flex;gap:6px}
.br-zoom-in,.br-zoom-out{min-width:40px;font-size:1.05rem;justify-content:center}
.br-bar button:disabled{opacity:.45;cursor:default}
.br-help{margin:8px 0 0;font-size:.76rem;color:var(--text-dimmer)}
@media (hover:none){.br-help{display:none}}

/* Full screen — the real API, or a fixed panel where the browser refuses it. */
.br.is-fs,.br.is-full{max-width:none;margin:0;border-radius:0;display:flex;flex-direction:column;background:#20313f;color:#f3f8f6}
.br.is-full{position:fixed;inset:0;z-index:1000;overflow:auto}
.br.is-fs .br-stage,.br.is-full .br-stage{flex:1 1 auto;background:none}
.br.is-fs .br-spread,.br.is-full .br-spread{width:calc(min(100%, (100vh - 130px) * var(--br-ratio) * 2) * var(--br-zoom))}
.br.is-fs .br-spread.is-one,.br.is-full .br-spread.is-one{width:calc(min(100%, (100vh - 130px) * var(--br-ratio)) * var(--br-zoom))}
.br.is-fs .br-note,.br.is-full .br-note,.br.is-fs .br-help,.br.is-full .br-help{color:#cfe0e8}
.br.is-fs .br-title,.br.is-full .br-title{color:#f3f8f6}

/* The page turn, as a printed book does it (book-reader.js turnPage). NEXT: the old right page
   lifts at the spine and sweeps left, then the new left page lands. BACK: the mirror image.
   Ghosts are the OLD pages, laid over the new spread for the length of the turn. */
.br-spread{position:relative}
.br-ghost{position:absolute;top:0;margin:0;flex:none;pointer-events:none;background:#fff;aspect-ratio:1082 / 1400;
  box-shadow:0 2px 10px rgba(0,0,0,.18);overflow:hidden;backface-visibility:hidden}
.br-ghost img,.br-ghost canvas{display:block;width:100%;height:auto}
.br-ghost img ~ .br-pn,.br-ghost canvas ~ .br-pn{display:none}
.br-under{z-index:1}
.br-arrive-next,.br-arrive-prev{z-index:2}
.br-leave-next,.br-leave-prev{z-index:3}
.br-leave-next{transform-origin:left center;animation:br-leave-next .26s cubic-bezier(.45,.05,.75,.6) forwards}
.br-leave-prev{transform-origin:right center;animation:br-leave-prev .26s cubic-bezier(.45,.05,.75,.6) forwards}
.br-arrive-next{transform-origin:right center;animation:br-arrive-next .26s cubic-bezier(.25,.6,.45,1) both}
.br-arrive-prev{transform-origin:left center;animation:br-arrive-prev .26s cubic-bezier(.25,.6,.45,1) both}
.br-late{animation-delay:.24s}
@keyframes br-leave-next{to{transform:rotateY(-90deg)}}
@keyframes br-leave-prev{to{transform:rotateY(90deg)}}
@keyframes br-arrive-next{from{transform:rotateY(90deg)}to{transform:none}}
@keyframes br-arrive-prev{from{transform:rotateY(-90deg)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .br-ghost{display:none}
  .br-arrive-next,.br-arrive-prev,.br-leave-next,.br-leave-prev,.br-page.is-loading{animation:none!important}
}

@media (max-width:760px){
  .br{padding:10px 8px}
  .br-spread.is-one{width:calc(100% * var(--br-zoom))}
  .br-nav{flex-basis:100%}
  .br-nav .btn{flex:1 1 0}
  .br-where{min-width:0;flex:1.3 1 0;font-size:.82rem}
  .br-locked{padding:14px 10px}
  .br-open .btn{flex:1 1 100%;min-width:0}
}