/*
 * Base: reset, the page itself and the app shell (top bar, pager).
 * Values come from tokens.css only.
 */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { min-height: 100%; }

body {
  background: var(--color-backdrop);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas, video, audio { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: var(--border-thick) solid var(--color-focus); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── The sheet: one page of the book, full screen on a phone ──────────────── */
.sheet {
  min-height: 100dvh;
  max-width: 40rem;
  margin: 0 auto;
  background: var(--color-page);
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
}
.sheet__body {
  flex: 1;
  padding: var(--space-5) var(--gutter) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.sheet__body > * { max-width: var(--measure); width: 100%; margin-inline: auto; }
.sheet__body > .bleed { max-width: none; margin-inline: calc(-1 * var(--gutter)); width: auto; }

/* ── Top bar ───────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap);
  padding: var(--space-2) var(--gutter);
  padding-top: max(var(--space-2), env(safe-area-inset-top));
  background: var(--color-page);
  border-bottom: var(--border-thin) solid var(--color-rule);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-soft);
}
.topbar__title { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__spacer { width: var(--tap); }

/* ── Pager: previous / next at the foot of a page ──────────────────────────── */
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--gutter);
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  border-top: var(--border-thin) solid var(--color-rule);
}
.pager__dots { display: flex; gap: var(--space-2); }
.pager__dot {
  width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill);
  background: var(--color-rule);
}
.pager__dot[aria-current='true'] { background: var(--color-accent); }

/* ── Page turns ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .turn-forward { animation: turn-in-right var(--dur-page) var(--ease-paper); }
  .turn-back { animation: turn-in-left var(--dur-page) var(--ease-paper); }
}
@keyframes turn-in-right { from { opacity: 0; transform: translateX(var(--space-6)); } }
@keyframes turn-in-left { from { opacity: 0; transform: translateX(calc(-1 * var(--space-6))); } }