/* ============================================================
   Ereader — Gaya konten baca (diinjeksikan ke dokumen buku)
   Lihat: Ereader-Obsidian/03-Architecture/Rendering-Engine.md
   File ini juga dipakai untuk fallback text/markdown viewer.
   ============================================================ */

.reader-content {
  font-family: var(--reader-font-family);
  font-size: var(--reader-font-size);
  line-height: var(--reader-line-height);
  color: rgb(var(--color-text));
  background: rgb(var(--color-bg));
  max-width: var(--reader-max-width);
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
  text-align: var(--reader-text-align);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.reader-content h1,
.reader-content h2,
.reader-content h3 {
  font-weight: 600;
  line-height: 1.25;
  margin-block: 1.5em 0.5em;
}
.reader-content h1 { font-size: 1.6em; }
.reader-content h2 { font-size: 1.35em; }
.reader-content h3 { font-size: 1.15em; }

.reader-content p {
  margin-block: var(--reader-para-spacing);
}

.reader-content a {
  color: rgb(var(--color-primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.reader-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-block: 1em;
}

.reader-content blockquote {
  border-inline-start: 3px solid rgb(var(--color-primary));
  padding-inline-start: 1em;
  margin-inline: 0;
  color: rgb(var(--color-text-muted));
  font-style: italic;
}

.reader-content pre,
.reader-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.reader-content pre {
  background: rgb(var(--color-surface-alt));
  padding: 1em;
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.reader-content code {
  background: rgb(var(--color-surface-alt));
  padding: 0.1em 0.3em;
  border-radius: var(--radius-sm);
}
.reader-content pre code {
  background: none;
  padding: 0;
}

.reader-content hr {
  border: none;
  border-top: 1px solid rgb(var(--color-border));
  margin-block: 2em;
}

.reader-content ul,
.reader-content ol {
  padding-inline-start: 1.5em;
  margin-block: var(--reader-para-spacing);
}
.reader-content li { margin-block: 0.3em; }

.reader-content ::selection {
  background: rgb(var(--color-primary) / 0.25);
}

/* Highlight anotasi (semi-transparan) */
.reader-content mark.hl-yellow { background: rgb(250 204 21 / 0.4); }
.reader-content mark.hl-green  { background: rgb(74 222 128 / 0.4); }
.reader-content mark.hl-blue   { background: rgb(96 165 250 / 0.4); }
.reader-content mark.hl-pink   { background: rgb(244 114 182 / 0.4); }
.reader-content mark.hl-purple { background: rgb(192 132 252 / 0.4); }
.reader-content mark { color: inherit; border-radius: 2px; padding: 0 1px; }

/* Sorot TTS sementara */
.reader-content .tts-active {
  background: rgb(var(--color-primary) / 0.15);
  border-radius: 2px;
}

/* ============================================================
   Focus mode / Reading ruler
   Meredupkan paragraf yang tidak sedang dibaca; menyorot yang aktif.
   Untuk EPUB, kelas ini diinjeksikan ke dokumen buku via theme-inject.
   Untuk text/md adapter, diterapkan langsung ke .reader-content.
   ============================================================ */
.focus-mode p,
.focus-mode li,
.focus-mode blockquote {
  transition: opacity 200ms ease;
  opacity: 0.32;
}
.focus-mode p.reading-active,
.focus-mode li.reading-active,
.focus-mode blockquote.reading-active {
  opacity: 1;
}
/* Ruler bar tipis di belakang paragraf aktif */
.focus-mode .reading-active {
  background: linear-gradient(
    to right,
    rgb(var(--color-primary) / 0.06),
    transparent
  );
  border-radius: var(--radius-sm);
}

/* PDF: varian focus mode = highlight halaman aktif (bukan per-paragraf,
   karena layout PDF fixed per-halaman). Halaman non-aktif diredupkan;
   halaman aktif diberi ring tipis warna primary. */
.pdf-focus-mode .pdf-page {
  transition: opacity 200ms ease, box-shadow 200ms ease;
  opacity: 0.45;
}
.pdf-focus-mode .pdf-page.pdf-page-active {
  opacity: 1;
  box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.55);
}