/* Reader — the sample reader (currently 7 chapters, per publishedThrough).

   A single reading column. No footer here by design: the end card is the
   page's last word, and it hands the reader on to the archive or the book. */

.reader-typecontrols {
  display: flex;
  gap: 6px;
  align-items: center;
}

.reader-main {
  flex: 1;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(28px, 6vh, 64px) 22px 40px;
}

/* — chapter header — */
.reader-header {
  margin-bottom: 44px;
  text-align: center;
}
.reader-header__eyebrow {
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 14px;
}
.reader-header__title {
  font-size: clamp(28px, 4.5vw, 42px);
  margin: 0 0 14px;
  text-wrap: balance;
}
.reader-header__meta {
  font-size: 12.5px;
  color: var(--color-neutral-500);
  margin: 0;
}
.reader-header__rule {
  height: 1px;
  max-width: 220px;
  margin: 26px auto 0;
  background: linear-gradient(to right, transparent, var(--color-accent-700), transparent);
}

/* — loading / error status — */
.reader-status {
  text-align: center;
  color: var(--color-neutral-500);
  font-size: 14px;
}

/* — prose — */
.reader-article {
  font-size: 18px;
  line-height: 1.75;
  color: var(--color-neutral-200);
}
.reader-article p {
  margin: 0 0 1.15em;
}
/* neutral-500: the scene break is decorative and aria-hidden, so WCAG does not
   govern it, but a break the reader has to hunt for is a reading fault whatever
   the standard says. It measured 3.9:1 against the ground at neutral-600. */
.reader-article p.reader-article__break {
  text-align: center;
  letter-spacing: .6em;
  color: var(--color-neutral-500);
  margin: 2.2em 0;
  font-size: .85em;
}

/* — end card — */
.reader-endcard {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
}
.reader-endcard__label {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  margin: 0;
}
#reader-endcard-notdone,
#reader-endcard-done {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.reader-endcard__text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-neutral-300);
  margin: 0;
  max-width: 34em;
}
#reader-endcard-done .reader-endcard__text {
  font-size: 15px;
  color: var(--color-neutral-200);
}
/* neutral-400, not 600. This sits on the raised end-card rather than the page
   ground, so it starts from a lighter background and needs to climb two steps
   to clear 4.5:1. It measured 3.3:1, the worst pairing on the site. */
.reader-endcard__closing {
  font-size: 12.5px;
  color: var(--color-neutral-400);
  margin: 6px 0 0;
}

@media (max-width: 860px) {
  .reader-header__meta { display: none; }
}

/* ── multi-chapter chrome ────────────────────────────────────────────────── */

.reader-navtools { display: flex; align-items: center; gap: 10px; }
.reader-navtools__index { font-size: 12.5px; letter-spacing: 0.06em; }

/* The pager sits below the end card, so a reader who has finished meets the
   marking prompt first and the next chapter second. */
.reader-pager {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 28px auto 0;
  max-width: 34rem;
}
.reader-pager__next { margin-left: auto; }

.reader-endcard__actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}

/* — the chapter list — */
.reader-chapters { width: min(520px, 100%); }
.reader-chapterlist {
  display: flex; flex-direction: column;
  max-height: 52vh; overflow-y: auto;
  margin: 4px 0;
}
.reader-chapterrow {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 6px;
  text-decoration: none;
  color: var(--color-text);
  background: linear-gradient(to right,
    transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 24px,
    color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 24px), transparent)
    no-repeat bottom / 100% 1px;
}
.reader-chapterrow:hover {
  color: var(--color-text);
  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.reader-chapterrow__num { font-size: 12px; color: var(--color-neutral-500); }
.reader-chapterrow__title { font-size: 14.5px; line-height: 1.4; }
.reader-chapterrow__mark {
  font-family: var(--font-mono, inherit);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-neutral-500);
}
.reader-chapterrow--current { color: var(--color-accent-300); }
.reader-chapterrow--current .reader-chapterrow__mark { color: var(--color-accent-300); }

@media (max-width: 860px) {
  .reader-navtools { flex-wrap: wrap; gap: 8px; }
}