/**
 * pdfbook.css — project document viewer.
 *
 * Loaded only on projects that actually have a document set, so none of this
 * weighs on the other project pages. Uses the theme tokens from main.css
 * (--color-accent, --font-family, --ease …) — no new design language.
 */

.pdfbook {
  margin: 96px 0;
}

/* ── Head: title + download ─────────────────────────────── */
.pdfbook__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.pdfbook__lead {
  margin: 8px 0 0;
  font-size: var(--size-body-md);
  color: var(--color-text-muted);
}

.pdfbook__download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid var(--color-divider);
  font-size: var(--size-body-md);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
  white-space: nowrap;
}

.pdfbook__download:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.pdfbook__download span { color: var(--color-text-muted); }

/* ── Chapter strip ──────────────────────────────────────── */
.pdfbook__chapters {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 0;
  scrollbar-width: thin;
}

.pdfbook__chapter {
  flex: 0 0 auto;
  padding: 12px 16px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-family);
  font-size: var(--size-label);
  font-weight: var(--weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.pdfbook__chapter:hover { color: var(--color-text); }

.pdfbook__chapter.is-current {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ── Stage: page + side navigation ──────────────────────── */
.pdfbook__stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg-alt);
  padding: 24px;
}

.pdfbook__viewport {
  flex: 1 1 auto;
  min-width: 0;              /* let the flex item shrink below its content */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* A fixed height (rather than aspect-ratio + max-height) is what keeps a
     portrait page inside the frame: with aspect-ratio the box grew to the
     full width × 1.414 and the bottom of the page was clipped. The height is
     reserved before the image arrives, so there is no layout shift either. */
  height: 78vh;
}

.pdfbook__img {
  /* object-fit does the letterboxing, so the page always fits whole. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* drop-shadow follows the rendered page edge; box-shadow would outline the
     letterboxed container instead. */
  filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.12));
  transition: transform var(--duration) var(--ease);
  transform-origin: center center;
  cursor: zoom-in;
}

/* Zoomed: the image grows to its real size and the frame scrolls, so every
   part of the magnified page is reachable (transform: scale() kept the old
   layout box and put the interesting parts out of reach). */
.pdfbook.is-zoomed .pdfbook__viewport {
  overflow: auto;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: grab;
  overscroll-behavior: contain;   /* do not scroll the article behind it */
}

.pdfbook.is-zoomed .pdfbook__img {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: unset;
  object-position: center;        /* the gutter pull is meaningless zoomed in */
  transform: none;
  cursor: inherit;
}

.pdfbook__nav {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--color-divider);
  font-size: 18px;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease),
              opacity var(--duration) var(--ease);
}

.pdfbook__nav:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.pdfbook__nav:disabled { opacity: 0.25; cursor: default; }

/* ── Bar: counter + tools ───────────────────────────────── */
.pdfbook__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
}

.pdfbook__counter {
  font-size: var(--size-label);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.pdfbook__tools { display: flex; gap: 4px; }

.pdfbook__tool {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.pdfbook__tool:hover,
.pdfbook__tool[aria-pressed="true"] {
  color: var(--color-accent);
  border-color: var(--color-divider);
}

/* ── Thumbnail strip ────────────────────────────────────── */
/* An explicit display value on the element beats the browser's built-in
   [hidden] { display: none }, so toggling the attribute had no effect once
   the strip was open: it could be switched on but never off. */
.pdfbook__thumbs[hidden] { display: none; }

.pdfbook__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 92px;
  gap: 12px;
  overflow-x: auto;
  padding: 16px 0;
  scrollbar-width: thin;
}

.pdfbook__thumb {
  padding: 0;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-family);
  transition: border-color var(--duration) var(--ease);
}

.pdfbook__thumb img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

.pdfbook__thumb span {
  display: block;
  padding-top: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.pdfbook__thumb:hover     { border-color: var(--color-divider); }
.pdfbook__thumb.is-current { border-color: var(--color-accent); }
.pdfbook__thumb.is-current span { color: var(--color-accent); }

/* ── Spread (two-page) view ─────────────────────────────── */
/* The sheets meet at the gutter, like an open volume. */
.pdfbook.is-spread .pdfbook__viewport { gap: 0; }

/* Two sheets share the frame: each takes half, object-fit keeps the ratio. */
.pdfbook.is-spread .pdfbook__img { width: 50%; }

/* Without this each page centres inside its own half and the two letterbox
   margins add up to a gap down the middle. Pull each sheet toward the gutter
   instead — :not() keeps a lone page (cover, last sheet) centred. */
.pdfbook.is-spread .pdfbook__img:first-child:not(:last-child) {
  object-position: right center;
  filter: drop-shadow(-3px 2px 14px rgba(0, 0, 0, 0.13));
}

.pdfbook.is-spread .pdfbook__img:last-child:not(:first-child) {
  object-position: left center;
  filter: drop-shadow(3px 2px 14px rgba(0, 0, 0, 0.13));
}

/* ── Fullscreen ─────────────────────────────────────────── */
.pdfbook.is-fullscreen {
  margin: 0;
  padding: 20px 32px;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;         /* the page fills the screen; nothing scrolls away */
}

/* The document is the point in fullscreen — the title block would only eat
   vertical space that the page could use. */
.pdfbook.is-fullscreen .pdfbook__head { display: none; }

.pdfbook.is-fullscreen .pdfbook__stage {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px;
  /* stretch, not center: the viewport must take the stage's full height.
     A percentage height would not resolve here — the stage is sized by flex,
     which counts as auto, so height:100% silently fell back to the 78vh rule
     and the page stayed small on a big screen. */
  align-items: stretch;
}

.pdfbook.is-fullscreen .pdfbook__viewport {
  height: auto;             /* the stretch above supplies the height */
  min-height: 0;
}

/* The arrows must not stretch with it. */
.pdfbook.is-fullscreen .pdfbook__nav { align-self: center; }

/* Chapters and the mode switch are review furniture — in fullscreen the
   document gets that space back. */
.pdfbook.is-fullscreen .pdfbook__chapters { display: none; }

.pdfbook.is-fullscreen .pdfbook__thumbs { flex: 0 0 auto; }

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pdfbook { margin: 64px 0; }

  .pdfbook__stage { padding: 12px; gap: 4px; }

  /* Leave room for the nav row that moves below the page on small screens. */
  .pdfbook__viewport { height: 62vh; }

  /* Spread is disabled below 900px in JS; hide the control too. */
  .pdfbook__tool--spread { display: none; }

  /* Side arrows would eat the page width on a phone; swipe covers navigation
     and the arrows move under the page. */
  .pdfbook__nav { position: absolute; bottom: -56px; z-index: 1; background: var(--color-bg); }
  .pdfbook__nav--prev { left: 0; }
  .pdfbook__nav--next { right: 0; }

  .pdfbook__bar { padding-top: 68px; }

  .pdfbook__head { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .pdfbook__img { transition: none; }
}