/* Scanned-page reader: TOC sidebar at inline-start, viewer on a graphite stage. */

.reader {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  block-size: 100%;
}
.reader[data-toc-collapsed] {
  grid-template-columns: 0 minmax(0, 1fr);
}

.reader__toc {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  overflow: hidden;
  background: var(--color-paper);
  border-inline-end: var(--border-hair) solid var(--color-rule);
}
.reader[data-toc-collapsed] .reader__toc {
  visibility: hidden;
}

.reader__toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: var(--toolbar-height);
  padding-inline: var(--space-4) var(--space-2);
  border-block-end: var(--border-hair) solid var(--color-rule);
}
.reader__toc-title {
  font-family: var(--font-ui);
  font-size: var(--step-0);
  color: var(--color-ink-soft);
}
.reader__toc-close {
  display: none;
}
.reader__toc-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3) var(--space-2) var(--space-6);
}

.reader__main {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
}

.viewer {
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--color-stage);
  color: var(--color-stage-ink);
}
.viewer:focus-visible {
  outline-offset: -3px;
}

.viewer__pages {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  margin: 0;
  padding: var(--space-6) var(--space-5) var(--space-8);
  list-style: none;
}

.page-slot {
  position: relative;
  flex: none;
  inline-size: var(--page-width, min(100%, 46rem));
  aspect-ratio: var(--page-ratio, 0.7072);
  margin-inline: auto; /* centres when narrower, aligns to start when zoomed wider */
  background: var(--color-page-placeholder);
  box-shadow: var(--shadow-page);
  contain: layout paint;
}

.page-slot__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}
.page-slot__img[data-loaded] {
  opacity: 1;
}

.page-slot__label {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline: 0;
  color: rgb(233 229 220 / 0.6);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.page-slot__error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  color: var(--color-muted);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  text-align: center;
}

.viewer__notice {
  max-inline-size: 30rem;
  margin: var(--space-7) auto;
  padding: var(--space-5);
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  font-size: var(--step-0);
}

.reader__scrim {
  display: none;
}

.print-notice {
  display: none;
}

/* ---- Small screens: the TOC becomes an off-canvas drawer ---- */
@media (max-width: 64em) {
  .reader,
  .reader[data-toc-collapsed] {
    grid-template-columns: minmax(0, 1fr);
  }
  .reader__toc {
    --drawer-shift: 100%;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: var(--z-drawer);
    inline-size: min(86vw, 22rem);
    box-shadow: var(--shadow-drawer);
    transform: translateX(var(--drawer-shift));
    visibility: hidden;
    transition:
      transform var(--duration-base) var(--ease-out),
      visibility 0s linear var(--duration-base);
  }
  [dir='ltr'] .reader__toc {
    --drawer-shift: -100%;
  }
  .reader[data-toc-open] .reader__toc {
    transform: none;
    visibility: visible;
    transition: transform var(--duration-base) var(--ease-out);
  }
  .reader[data-toc-collapsed] .reader__toc {
    visibility: hidden;
  }
  .reader__toc-close {
    display: inline-flex;
  }
  .reader__scrim:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    background: var(--color-scrim);
  }
  .viewer__pages {
    gap: var(--space-6);
    padding: var(--space-4) var(--space-3) var(--space-7);
  }
}

/* ---- Printing the scans is not offered ---- */
@media print {
  .viewer,
  .toolbar,
  .reader__toc {
    display: none !important;
  }
  .print-notice {
    display: block;
    padding: 2cm;
    font-size: 14pt;
    text-align: center;
  }
}