/* Reading surfaces — the Kindle half of the product.
   .prose-editorial is shared by the Tiptap editor and the chapter reader,
   so what an author writes looks identical to what a reader reads.
   Reader themes are independent of the site theme: a reader can sit in
   Papel while the site is dark. */
.prose-editorial {
  font-family: var(--font-literata);
  font-weight: 400;
  /* No explicit color — inherits, so sepia/deep-dark themes keep their ink. */
  line-height: var(--reader-line-height);
  font-size: var(--reader-font-size);
}
.prose-editorial h2 { font-family: var(--font-inter); font-weight: 600; font-size: 1.5rem; margin: 2rem 0 0.75rem; }
.prose-editorial h3 { font-family: var(--font-inter); font-weight: 600; font-size: 1.25rem; margin: 1.5rem 0 0.5rem; }
.prose-editorial p { margin-bottom: 1.25rem; }
.prose-editorial blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: 1rem;
  font-style: italic;
  color: var(--color-muted-foreground);
  margin: 1.5rem 0;
}
.prose-editorial ul, .prose-editorial ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.prose-editorial ul { list-style: disc; }
.prose-editorial ol { list-style: decimal; }
.prose-editorial li { margin-bottom: 0.4rem; }
.prose-editorial strong { font-weight: 700; }
.prose-editorial em { font-style: italic; }

.reader-container {
  background: var(--background);
  color: var(--foreground);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.reader-container[data-reading-theme="sepia"] { background: #f4ecd8; color: #3f3626; }
.reader-container[data-reading-theme="sepia"] .prose-editorial blockquote { color: #5c4f3a; }
.reader-container[data-reading-theme="dark"] { background: #15120e; color: #ece4d6; }
.reader-container[data-reading-theme="dark"] .prose-editorial blockquote { color: #b8afa2; }

/* Reader theme swatches — the literal theme colours, not UI tokens. */
.reader-theme-swatch-light { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.reader-theme-swatch-sepia { background: #f4ecd8; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.reader-theme-swatch-dark { background: #15120e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }

/* Zen toolbar — floating capsule of reading controls that hides on scroll
   down and returns on scroll up or idle. Neutral chrome: it never reacts to
   the active reading theme, so legibility is identical in all three. */
.zen-toolbar { transition: transform 0.35s var(--ease-editorial), opacity 0.3s var(--ease-standard); }
.zen-toolbar[data-hidden="true"] { transform: translateY(-140%); opacity: 0; pointer-events: none; }

/* Immersive "book mode" — always light, whatever the site theme. */
.immersive-reader { background: radial-gradient(ellipse at center, #f6f4f0 0%, #e7e3da 100%); }
.flipbook-page {
  position: relative; height: 100%; width: 100%; overflow: hidden;
  background: #ffffff; color: #1a1a1a;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45);
}
.flipbook-page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,.18), transparent 7%),
              linear-gradient(to left, rgba(0,0,0,.18), transparent 7%);
}
.flipbook-page-inner { height: 100%; overflow-y: auto; padding: 40px 32px; }
.flipbook-page-number {
  position: absolute; bottom: 14px; right: 20px;
  font-family: var(--font-literata); font-size: 0.75rem; opacity: 0.55;
}

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