/* ── The book reader (templates/books/reader.html) ───────────
   A column of text set for long reading: the book face, a measure of about
   65 characters, generous leading, hyphenation where the language allows.
   The reader's own choices (static/inv-reader.js) arrive as attributes on
   .reader: data-theme, data-font, data-width, data-spacing, data-justify,
   and --reader-scale for the size. Themes keep WCAG AA contrast.          */

.reader {
  --reader-bg: var(--bg);
  --reader-fg: var(--text);
  --reader-muted: var(--text-muted);
  --reader-link: var(--accent-text);
  --reader-rule: var(--hairline);
  --reader-measure: 36em;
  --reader-leading: 1.65;
  --reader-scale: 1;
  --reader-face: var(--font-serif);
  background: var(--reader-bg);
  color: var(--reader-fg);
  min-height: 100vh;
}
.reader[data-theme="paper"] { color-scheme: light; --reader-bg: oklch(0.985 0.006 85); --reader-fg: oklch(0.22 0.01 60); --reader-muted: oklch(0.42 0.012 60); --reader-link: oklch(0.45 0.13 260); --reader-rule: oklch(0.88 0.01 80); }
.reader[data-theme="sepia"] { color-scheme: light; --reader-bg: oklch(0.93 0.035 80); --reader-fg: oklch(0.3 0.04 60); --reader-muted: oklch(0.43 0.04 60); --reader-link: oklch(0.42 0.11 40); --reader-rule: oklch(0.83 0.04 75); }
.reader[data-theme="night"] { color-scheme: dark; --reader-bg: oklch(0.2 0.01 250); --reader-fg: oklch(0.88 0.01 80); --reader-muted: oklch(0.74 0.01 80); --reader-link: oklch(0.8 0.09 250); --reader-rule: oklch(0.32 0.01 250); }
.reader[data-theme="black"] { color-scheme: dark; --reader-bg: oklch(0 0 0); --reader-fg: oklch(0.82 0.005 80); --reader-muted: oklch(0.7 0.005 80); --reader-link: oklch(0.78 0.08 250); --reader-rule: oklch(0.25 0 0); }
.reader[data-font="sans"] { --reader-face: var(--font); }
.reader[data-width="narrow"] { --reader-measure: 30em; }
.reader[data-width="wide"] { --reader-measure: 46em; }
.reader[data-spacing="tight"] { --reader-leading: 1.45; }
.reader[data-spacing="loose"] { --reader-leading: 1.9; }

/* ── The bar ─────────────────────────────────────────────── */
/* Under the site's own sticky header (its height is measured into --reader-top). */
.reader-bar {
  position: sticky;
  top: var(--reader-top, 64px);
  z-index: 20;
  background: color-mix(in oklab, var(--reader-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--reader-rule);
}
.reader-bar-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem var(--gutter);
  max-width: 80rem;
  margin: 0 auto;
}
.reader-heading { flex: 1; min-width: 0; padding-inline: 0.35rem; }
.reader-title {
  font-family: var(--reader-face);
  font-size: var(--step-0);
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader-author { margin: 0; font-size: var(--step--2); color: var(--reader-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  min-width: 2.5rem;
  justify-content: center;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--reader-fg);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}
.reader-btn:hover { background: color-mix(in oklab, var(--reader-fg) 8%, transparent); }
.reader-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.reader-btn .icon { width: 1.2rem; height: 1.2rem; }
.reader-progress { font-size: var(--step--2); color: var(--reader-muted); font-variant-numeric: tabular-nums; min-width: 3em; text-align: right; }
.reader-meter { height: 2px; background: transparent; }
.reader-meter-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width 120ms linear; }

/* ── Popovers: contents and type ─────────────────────────── */
.reader-pop {
  margin: 0;
  inset: auto;
  top: calc(var(--reader-top, 64px) + 3.75rem);
  right: max(var(--gutter), env(safe-area-inset-right));
  left: auto;
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(78vh, 44rem);
  overflow: auto;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: var(--shadow-2);
}
.reader-pop--toc { width: min(30rem, calc(100vw - 2rem)); }
.reader-pop::backdrop { background: oklch(0 0 0 / 0.25); }
.reader-pop-title { font-size: var(--step-1); margin: 0 0 0.75rem; }
.reader-set { border: 0; padding: 0; margin: 0 0 0.9rem; }
.reader-set-label { display: block; font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.4rem; padding: 0; }
.reader-size { display: flex; align-items: center; gap: 0.5rem; }
.reader-size .reader-btn { border-color: var(--border); color: var(--text); min-width: 3rem; }
.reader-size-out { min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; }
.reader-options { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.reader-options label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: var(--step--1);
}
.reader-options label:has(input:checked) { border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring) inset; }
.reader-options input { accent-color: var(--accent); margin: 0; }
.reader-swatch--paper { background: oklch(0.985 0.006 85); color: oklch(0.22 0.01 60); }
.reader-swatch--sepia { background: oklch(0.93 0.035 80); color: oklch(0.3 0.04 60); }
.reader-swatch--night { background: oklch(0.2 0.01 250); color: oklch(0.88 0.01 80); }
.reader-swatch--black { background: oklch(0 0 0); color: oklch(0.82 0.005 80); }
.reader-font-serif { font-family: var(--font-serif); }
.reader-check { display: flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); }
.reader-toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.reader-toc-list a { display: block; padding: 0.45rem 0.5rem; border-radius: var(--radius); color: var(--text); font-size: var(--step--1); }
.reader-toc-list a:hover, .reader-toc-list a:focus-visible { background: var(--tint); }
.reader-toc-h3 a { padding-left: 1.5rem; color: var(--text-muted); }

/* ── The notice and the text ─────────────────────────────── */
.reader-notice {
  max-width: var(--reader-measure);
  margin: 1.25rem auto 0;
  padding: 0 1.25rem;
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--reader-muted);
}
.reader-notice a { color: var(--reader-link); text-decoration: underline; }
.reader-content {
  max-width: var(--reader-measure);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 6rem;
  outline: none;
}
.reader-text {
  font-family: var(--reader-face);
  font-size: calc(clamp(1.06rem, 0.98rem + 0.35vw, 1.22rem) * var(--reader-scale));
  line-height: var(--reader-leading);
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  font-variant-ligatures: common-ligatures;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
.reader[data-justify] .reader-text p { text-align: justify; }
.reader-text p { margin: 0 0 0.9em; text-wrap: pretty; }
.reader-text p.reader-verse, .reader-text .pg-poem, .reader-text .pg-stanza { hyphens: manual; text-align: start; }
.reader-text p.reader-verse { margin-left: 1.5em; }
.reader-text h1, .reader-text h2, .reader-text h3, .reader-text h4 {
  font-family: var(--reader-face);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  margin: 2.2em 0 1em;
  letter-spacing: 0.01em;
}
.reader-text h1 { font-size: 1.7em; }
.reader-text h2 { font-size: 1.35em; }
.reader-text h3 { font-size: 1.15em; }
.reader-text h4, .reader-text h5, .reader-text h6 { font-size: 1em; }
.reader-text [id] { scroll-margin-top: calc(var(--reader-top, 64px) + 5rem); }
.reader-text a { color: var(--reader-link); text-decoration: underline; text-underline-offset: 0.15em; }
.reader-text img { max-width: 100%; height: auto; display: block; margin: 1.25em auto; border-radius: 2px; }
.reader-text figure, .reader-text .pg-figcenter, .reader-text .pg-figure { margin: 1.5em auto; text-align: center; }
.reader-text figcaption, .reader-text .pg-caption { font-size: 0.85em; color: var(--reader-muted); }
.reader-text blockquote { margin: 1em 0 1em 1.5em; }
.reader-text hr { border: 0; border-top: 1px solid var(--reader-rule); width: 30%; margin: 2em auto; }
.reader-text table { border-collapse: collapse; margin: 1em auto; font-size: 0.9em; max-width: 100%; display: block; overflow-x: auto; }
.reader-text td, .reader-text th { padding: 0.2em 0.5em; vertical-align: top; }
.reader-text pre { white-space: pre-wrap; font-size: 0.85em; }
.reader-text .pg-pagenum, .reader-text .pg-pageno, .reader-text .pg-ws-pagenum {
  float: right;
  margin-right: -4.5em;
  font-size: 0.65em;
  color: var(--reader-muted);
  font-style: normal;
  user-select: none;
}
@media (max-width: 64em) {
  .reader-text .pg-pagenum, .reader-text .pg-pageno, .reader-text .pg-ws-pagenum { display: none; }
}
.reader-text .pg-center, .reader-text .pg-c, .reader-text .pg-tac { text-align: center; }
.reader-text .pg-right, .reader-text .pg-tar { text-align: right; }
.reader-text .pg-smcap, .reader-text .pg-sc { font-variant: small-caps; }
.reader-text .pg-poem { margin: 1em 0 1em 1.5em; }
.reader-text .pg-poem .pg-stanza { margin: 0 0 1em; }
.reader-text .pg-poem .pg-verse, .reader-text .pg-poem p { margin: 0; }
.reader-text .pg-letra, .reader-text .pg-dropcap { float: left; font-size: 3.2em; line-height: 0.85; margin: 0.06em 0.08em 0 0; }
.reader-text .pg-footnote, .reader-text .pg-footnotes { font-size: 0.85em; }
.reader-text .pg-fnanchor, .reader-text .pg-footnote-ref { font-size: 0.7em; vertical-align: super; text-decoration: none; }
/* Wikisource's own chrome: its header navigation reads; its notices do not. */
.reader-text .pg-ws-noexport:not(:has(.pg-wst-header-structure)), .reader-text .pg-mw-editsection, .reader-text .pg-noprint { display: none; }
.reader-text .pg-wst-header-mainblock { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; font-family: var(--font); font-size: 0.8em; padding: 0.6em 0; border-block: 1px solid var(--reader-rule); margin-bottom: 1.5em; }

.reader-loading { display: grid; justify-items: center; gap: 1rem; padding: 4rem 0; color: var(--reader-muted); }
.reader-loading[hidden], .reader-error[hidden] { display: none; }
.reader-loading-spinner { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 3px solid var(--reader-rule); border-top-color: var(--accent); animation: reader-spin 900ms linear infinite; }
@keyframes reader-spin { to { transform: rotate(1turn); } }
.reader-error { padding: 3rem 0; text-align: center; }

@media (max-width: 640px) {
  .reader-btn-label { display: none; }
  .reader-content { padding-inline: 1.1rem; }
  .reader-pop { right: 1rem; }
}

/* ── TV: set for a sofa, and only the text moves ─────────── */
:root[data-tv] .reader { --reader-measure: 34em; }
:root[data-tv] .reader-text { font-size: calc(clamp(1.5rem, 1.6vw, 2.6rem) * var(--reader-scale)); line-height: 1.7; }
:root[data-tv] .reader-bar-row { padding-block: 1.2vh; }
:root[data-tv] .reader-btn { min-height: 3.25rem; font-size: var(--step-0); }
:root[data-tv] .reader-btn:is(:focus-visible, .controller-focus) { outline: 4px solid var(--tv-focus); box-shadow: 0 0 0 8px var(--tv-focus-halo); }
:root[data-tv] .reader-notice { font-size: var(--step--1); }
/* The text itself has the remote's focus; a ring round a whole book helps
   nobody (the TV ring in style.css is !important, so this must be too). */
:root[data-tv] .reader-content:is(:focus, :focus-visible, .controller-focus) { outline: none !important; box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
  .reader-loading-spinner { animation-duration: 2.5s; }
  .reader-meter-fill { transition: none; }
}