/* The book viewer (admin_ui/lib/book-viewer.js), 11 Nov 2026, draft. Shared by the portal's plan page and the admin's
   plan editor; linked from both index.html files. app.css tokens only. Classes bk-.
   Wide (760 px of book width and up): thumbnails in a column left of the page, as Preview and Slides do.
   Narrow: the page, its bar, then the thumbnails as a scroll strip. Full screen: the page fitted to the screen. */

.bk { container-type: inline-size; min-width: 0; }
.bk-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.bk-main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

/* ---------- the page ---------- */
.bk-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--bk-ratio, 1.27);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-recessed);
  box-shadow: var(--ring);
  touch-action: pan-y pinch-zoom;
  outline: none;
}
.bk-stage:focus-visible { box-shadow: var(--focus-ring); }
.bk-page { position: absolute; inset: 0; margin: 0; }
.bk-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.bk-img:not([src]) { visibility: hidden; }

/* loading: a shimmer under the first page, a small spinner while the next one loads over the old */
.bk-stage.is-loading {
  background: linear-gradient(90deg, var(--color-recessed) 0%, var(--color-fill) 50%, var(--color-recessed) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
.bk-stage.is-loading::after {
  content: "";
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  border: 2px solid rgb(255 255 255 / 0.7);
  border-top-color: var(--color-brand);
  box-shadow: var(--shadow-xs);
  animation: spin 0.8s linear infinite;
}
.bk-status:empty { display: none; }
.bk-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.bk-stage.is-error .bk-status { background: color-mix(in srgb, var(--color-base) 82%, transparent); }
.bk-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  color: var(--text-subtle);
  font-size: var(--text-sm);
}
.bk-error p { margin: 0; }

/* ---------- the bar under the page ---------- */
.bk-bar { display: flex; align-items: center; gap: var(--space-2) var(--space-3); min-height: var(--control-sm); }
.bk-nav { display: flex; align-items: center; gap: var(--space-1-5); flex: none; }
.bk-count {
  min-width: 52px;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--text-default);
}
.bk-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--text-subtle);
}
.bk-tools { display: flex; align-items: center; gap: var(--space-1-5); margin-left: auto; flex: none; }

/* ---------- thumbnails: a scroll strip by default ---------- */
.bk-thumbs-wrap { min-width: 0; }
.bk-thumbs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 3px 3px var(--space-2);
  scrollbar-width: thin;
}
.bk-thumb-item { flex: none; scroll-snap-align: start; }
.bk-thumb {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 96px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  outline: none;
}
.bk-thumb-frame {
  display: block;
  aspect-ratio: var(--bk-ratio, 1.27);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-recessed);
  box-shadow: var(--ring);
  transition: box-shadow var(--dur-1) var(--ease-standard);
}
.bk-thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-3) var(--ease-standard); }
.bk-thumb-img.is-loaded { opacity: 1; }
.bk-thumb-n { font-size: var(--text-xs); line-height: var(--leading-xs); text-align: center; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.bk-thumb:hover .bk-thumb-frame { box-shadow: 0 0 0 1px var(--text-placeholder); }
.bk-thumb[aria-current="page"] .bk-thumb-frame { box-shadow: 0 0 0 2px var(--color-brand); }
.bk-thumb[aria-current="page"] .bk-thumb-n { color: var(--text-strong); font-weight: var(--weight-semibold); }
.bk-thumb:focus-visible .bk-thumb-frame { box-shadow: var(--focus-ring); }

/* one page: no turning */
.bk.is-single .bk-nav, .bk.is-single .bk-thumbs-wrap { display: none; }

/* ---------- wide: the thumbnails in a column beside the page, as tall as the page ---------- */
@container (min-width: 760px) {
  .bk-layout { grid-template-columns: 124px minmax(0, 1fr); grid-template-areas: "thumbs main"; }
  .bk-main { grid-area: main; }
  .bk-thumbs-wrap { grid-area: thumbs; position: relative; }
  .bk-thumbs {
    position: absolute;
    inset: 0 0 calc(var(--control-sm) + var(--space-2)) 0;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y proximity;
    padding: 3px 6px 3px 3px;
  }
  .bk-thumb { width: 100%; }
  .bk.is-single .bk-layout { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 520px) {
  .bk-title { display: none; }
}

/* ---------- full screen: the page fitted to the screen, the bar under it ---------- */
.bk.is-full {
  --bk-bar: var(--control-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--space-3);
  background: #0d0c0d;
}
.bk.is-faux-full { position: fixed; inset: 0; z-index: 200; height: 100dvh; }
.bk.is-full .bk-layout { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.bk.is-full .bk-thumbs-wrap { display: none; }
.bk.is-full .bk-main { width: min(100%, calc((100dvh - 2 * var(--space-3) - var(--bk-bar) - var(--space-2)) * var(--bk-ratio, 1.27))); }
.bk.is-full .bk-stage { background-color: transparent; box-shadow: none; border-radius: var(--radius-md); }
.bk.is-full .bk-stage:focus-visible { box-shadow: 0 0 0 2px var(--color-brand); }
/* fixed colours: the screen behind is always near-black, whatever the app's theme tokens say */
.bk.is-full .bk-count { color: #f4f2f3; }
.bk.is-full .bk-title { color: rgb(255 255 255 / 0.62); }
.bk.is-full .bk-full { color: #f4f2f3; }
.bk.is-full .bk-full:hover { background: rgb(255 255 255 / 0.12); }

@media (prefers-reduced-motion: reduce) {
  .bk-stage.is-loading { animation: none; }
  .bk-stage.is-loading::after { animation-duration: 2s; }
  .bk-thumb-img, .bk-thumb-frame { transition: none; }
}