/* The in-page book reader (PDF / plain-text / the one legacy HTML title).
   Renders the document right on this page instead of handing the browser
   a raw file to deal with -- which is what makes "Read online" actually
   land somewhere in the Android app's WebView (it has no PDF renderer of
   its own and can only download files, silently stranding the reader on
   the previous page) instead of stalling. */

.reader {
  display: flex;
  flex-direction: column;
  min-height: 70vh;
}

.reader__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.reader__back {
  flex: 0 0 auto;
  color: var(--text-muted);
  text-decoration: none;
  font-size: .92rem;
  white-space: nowrap;
}
.reader__back:hover { color: var(--accent); }

.reader__title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.reader__title-text {
  font-family: var(--font-serif);
  color: var(--text);
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader__author {
  color: var(--text-muted);
  font-size: .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- "Save my place" (per-member reading position, distinct from the
   whole-document shelf Bookmark) ---- */
.reader__progress {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.reader__progressbtn {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: .82rem;
  cursor: pointer;
  white-space: nowrap;
}
.reader__progressbtn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.reader__progressbtn:disabled {
  opacity: .5;
  cursor: default;
}
.reader__progressbtn--ghost {
  background: transparent;
  color: var(--text-muted);
}
.reader__progress-status {
  color: var(--text-muted);
  font-size: .78rem;
  min-width: 0;
  white-space: nowrap;
}

.reader__pager,
.reader__pager-spacer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.reader__pagebtn {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: .9rem;
}
.reader__pagebtn:disabled {
  opacity: .35;
  cursor: default;
}
.reader__pagebtn:not(:disabled):hover {
  border-color: var(--accent);
  color: var(--accent);
}
.reader__page-indicator {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: .82rem;
  min-width: 4.5em;
  text-align: center;
  padding: 4px 2px;
  cursor: pointer;
}
.reader__page-indicator:not(:disabled):hover {
  border-color: var(--border);
  color: var(--accent);
}
.reader__page-indicator:disabled {
  cursor: default;
}
/* Click the page indicator to jump straight to a page instead of
   clicking "next" over and over -- this input swaps in over it. */
.reader__page-jump-input {
  width: 4.5em;
  background: var(--surface-muted);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--text);
  font-size: .82rem;
  text-align: center;
  padding: 4px 2px;
}
.reader__page-jump-input::-webkit-outer-spin-button,
.reader__page-jump-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.reader__page-jump-input[type="number"] {
  -moz-appearance: textfield;
}

.reader__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 60vh;
  background: #0b0705;
}

/* ---- PDF viewer ---- */
.reader__pdf-wrap {
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px 12px 40px;
  touch-action: pan-y;
}
.reader__pdf-wrap canvas,
.reader__pdf-wrap img {
  max-width: 100%;
  height: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  background: #fff;
}

/* ---- Plain-text / legacy HTML viewer ---- */
.reader__text {
  max-width: 46em;
  margin: 0 auto;
  padding: 36px 24px 60px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-wrap: break-word;
  min-height: 100%;
}
.reader__frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--surface);
  display: block;
}

/* ---- Loading / error status ---- */
.reader__status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-serif);
  background: rgba(11, 7, 5, .82);
}
/* The `hidden` attribute alone loses to the `display: flex` above (a
   class selector outranks the UA stylesheet's [hidden] rule), so
   readerStatus.hidden = true left this panel's translucent background
   sitting over every page indefinitely -- reader-pdf.js clears its text
   but the panel itself never actually left the layout, dimming the
   whole reader for the rest of the session. Restore the override
   explicitly. */
.reader__status[hidden] {
  display: none;
}
.reader__fallback-link {
  color: var(--accent);
}

/* ---- Free-tier reading-cap paywall ---- */
.reader__paywall {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: rgba(11, 7, 5, .94);
}
/* Same [hidden]-vs-display specificity issue documented above for
   .reader__status: the class selector's display: flex outranks the UA
   [hidden] rule, so the override has to be repeated here too. */
.reader__paywall[hidden] {
  display: none;
}
.reader__paywall-inner {
  max-width: 26em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.reader__paywall-message {
  font-family: var(--font-serif);
  color: var(--text);
  font-size: 1.15rem;
  margin: 0;
}
.reader__paywall-inner p {
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 640px) {
  .reader__author { display: none; }
  .reader__bar { gap: 10px; padding: 8px 12px; }
  .reader__progress-status { display: none; }
  .reader__progressbtn { padding: 6px 8px; }
}