/* The reader: one chapter, laid out as pages (CSS columns, turned with JS) or as a scrolling page.
   Settings live on <html> as data-* attributes (see theme.js) plus --fs for the text size. */

:root { --fs: 19px; --lh: 1.6; --measure: 36em; --rfont: var(--serif); --bar: 48px; --gap: 64px; }
:root[data-font="sans"] { --rfont: var(--sans); }
:root[data-font="mono"] { --rfont: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; }
:root[data-leading="tight"] { --lh: 1.4; }
:root[data-leading="loose"] { --lh: 1.85; }
:root[data-width="wide"] { --measure: 46em; }
:root[data-width="narrow"] { --measure: 29em; }

body.reader-body { display: block; height: 100vh; height: 100dvh; overflow: hidden; }
:root[data-mode="scroll"] body.reader-body { height: auto; overflow: visible; }

.rbar {
  position: fixed; left: 0; right: 0; z-index: 10; height: var(--bar); display: flex; align-items: center;
  gap: .15rem; padding: 0 max(8px, env(safe-area-inset-left)); background: var(--paper); color: var(--ink-2);
  transition: opacity .25s, transform .25s; font-size: .9rem;
}
.rbar.top { top: 0; border-bottom: 1px solid transparent; }
.rbar.bottom { bottom: 0; height: calc(var(--bar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
.chrome-hidden .rbar { opacity: 0; pointer-events: none; }
.chrome-hidden .rbar.top { transform: translateY(-30%); }
.chrome-hidden .rbar.bottom { transform: translateY(30%); }
:root[data-mode="scroll"] .rbar.top { border-bottom-color: var(--line); }
:root[data-mode="scroll"] .rbar.bottom { border-top: 1px solid var(--line); }

.ricon {
  flex: none; min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--ink-2); font: 600 1.1rem var(--sans); border-radius: 8px;
  cursor: pointer; text-decoration: none; padding: 0 .4rem;
}
.ricon:hover, .ricon.on { background: var(--paper-2); color: var(--accent); }
.ricon[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.ricon .i { width: 22px; height: 22px; }
#bookmark-btn.marked { color: var(--accent); }
#bookmark-btn.marked .mark { fill: currentColor; }
.rtitle { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.rbook, .rchap { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbook { font: 600 .9rem var(--serif); color: var(--ink); }
.rchap { font-size: .78rem; }
.rprogress { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; }
#scrubber { width: min(520px, 100%); padding: 0; border: 0; background: none; accent-color: var(--accent); height: 18px; }
#location { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* pages */
.rmain { position: fixed; top: var(--bar); bottom: calc(var(--bar) + env(safe-area-inset-bottom)); left: 0; right: 0;
  padding: 1.2rem 0 .6rem; }
.viewport { height: 100%; width: min(calc(100% - 48px), var(--measure)); margin: 0 auto; overflow: hidden;
  font-size: var(--fs); }
.chapter { height: 100%; column-fill: auto; column-gap: var(--gap); }
.turn { position: absolute; top: 0; bottom: 0; width: 56px; border: 0; background: none; cursor: pointer; opacity: 0;
  color: var(--ink-2); font-size: 2rem; transition: opacity .2s; }
.turn.prev { left: 0; }
.turn.next { right: 0; }
.turn.prev::before { content: "‹"; }
.turn.next::before { content: "›"; }
.rmain:hover .turn { opacity: .5; }
.turn:hover { opacity: 1 !important; }
@media (hover: none) { .turn { display: none; } }

/* scrolling */
:root[data-mode="scroll"] .rmain { position: static; padding: calc(var(--bar) + 2rem) 0 calc(var(--bar) + 3rem); }
:root[data-mode="scroll"] .viewport { height: auto; overflow: visible; }
:root[data-mode="scroll"] .chapter { height: auto; columns: auto; }
:root[data-mode="scroll"] .turn { display: none; }

/* the text: each book keeps its own layout through the format classes the importer adds (see css.js) */
.chapter {
  font-family: var(--rfont); font-size: 1em; line-height: var(--lh); color: var(--ink); text-align: left;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; font-kerning: normal;
}
.chapter p { margin: 0; text-indent: 0; orphans: 2; widows: 2; }
.chapter h1, .chapter h2, .chapter h3, .chapter h4, .chapter h5, .chapter h6 {
  font-family: var(--rfont); margin: 1.4em 0 .9em; line-height: 1.3; font-weight: 600; break-after: avoid; text-indent: 0;
}
.chapter h1 { font-size: 1.6em; }
.chapter h2 { font-size: 1.4em; }
.chapter h3 { font-size: 1.2em; }
.chapter h4, .chapter h5, .chapter h6 { font-size: 1em; }
.chapter > :first-child, .chapter > section > :first-child { margin-top: .3em; }
.chapter .chapter-title { text-align: center; }
.chapter blockquote { margin: 1em 0 1em 2em; }
.chapter ul, .chapter ol { margin: .8em 0; padding-left: 2em; }

.chapter .ac { text-align: center; }
.chapter .ar { text-align: right; }
.chapter .aj { text-align: justify; }
.chapter .fi { text-indent: 1.5em; }
.chapter .sp { margin-top: .75em; margin-bottom: .75em; }
.chapter .sp2 { margin-top: 2.2em; }
.chapter .ml1 { margin-left: 2em; }
.chapter .ml2 { margin-left: 4em; }
.chapter .ml3 { margin-left: 6em; }
.chapter .ml4 { margin-left: 8em; }
.chapter .i { font-style: italic; }
.chapter .rm { font-style: normal; }
.chapter .b { font-weight: 600; }
.chapter .sc { font-variant: small-caps; letter-spacing: .02em; }
.chapter .uc { text-transform: uppercase; }
.chapter .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; font-size: .9em; }
.chapter .fs-xs { font-size: .75em; }
.chapter .fs-s { font-size: .87em; }
.chapter .fs-l { font-size: 1.2em; }
.chapter .fs-xl { font-size: 1.5em; }
.chapter p.lines { text-indent: 0; }
@media (max-width: 520px) {
  .chapter .ml2, .chapter .ml3, .chapter .ml4 { margin-left: 3em; }
}
/* Alignment setting: "Original" keeps the book's own; "Left" and "Justified" override ordinary paragraphs. */
:root[data-align="left"] .chapter p:not(.ac):not(.ar) { text-align: left; }
:root[data-align="justify"] .chapter p:not(.ac):not(.ar):not(.lines) { text-align: justify; }
.chapter img { display: block; max-width: 100%; max-height: calc(var(--page-h, 80vh) - 2em); height: auto;
  margin: 1em auto; break-inside: avoid; object-fit: contain; }
.chapter p img { display: inline; margin: 0; max-height: 3em; vertical-align: text-bottom; }
.chapter p img:only-child, .chapter h2 img, .chapter h1 img, .chapter h3 img { display: block; margin: .5em auto; max-height: calc(var(--page-h, 80vh) - 4em); }
.chapter figure { margin: 1em 0; break-inside: avoid; text-align: center; }
.chapter figcaption { font-size: .85em; color: var(--ink-2); }
.chapter hr { border: 0; text-align: center; margin: 1.2em 0; }
.chapter hr::after { content: "⁂"; color: var(--ink-2); }
.chapter pre { white-space: pre-wrap; font-size: .85em; }
.chapter table { border-collapse: collapse; margin: 1em 0; font-size: .9em; }
.chapter td, .chapter th { border: 1px solid var(--line); padding: .3em .5em; }
.chapter a { color: var(--accent); }
.chapter-end { break-before: auto; break-inside: avoid; text-align: center; margin: 3em 0 1em; font-family: var(--sans);
  font-size: 1rem; }
.chapter-end .btn { max-width: 100%; white-space: normal; }
.the-end { font: italic 1.4em var(--rfont); }

/* panels */
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(380px, 92vw); background: var(--card);
  box-shadow: -8px 0 30px rgba(0, 0, 0, .2); overflow-y: auto; padding: 0 1.2rem 1.5rem;
  animation: slide .2s ease-out;
}
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }
.panel-head { position: sticky; top: 0; background: var(--card); display: flex; align-items: center;
  justify-content: space-between; padding: 1rem 0 .6rem; border-bottom: 1px solid var(--line); margin-bottom: .6rem; }
.panel-head h2 { margin: 0; font-size: 1.2rem; }
.rtoc { padding-left: 1.6rem; margin: 0; }
.rtoc li { padding: .1rem 0; }
.rtoc a { display: block; padding: .4rem .3rem; color: var(--ink); text-decoration: none; font-family: var(--serif);
  border-radius: 6px; }
.rtoc a:hover { background: var(--paper-2); }
.rtoc li.current a { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.rmarks { list-style: none; margin: 0; padding: 0; }
.rmarks li { display: flex; align-items: flex-start; border-bottom: 1px solid var(--line); }
.rmarks li a { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: .55rem 0; color: var(--ink);
  text-decoration: none; }
.rmarks li.empty { display: block; padding: 1rem 0; color: var(--ink-2); }
.rmarks li.empty a { display: inline; color: var(--accent); padding: 0; }
.setting { display: flex; flex-direction: column; gap: .4rem; margin: 1rem 0; }
.setting > span { font-weight: 600; font-size: .85rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.seg { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button, .seg output { flex: 1; border: 0; background: none; color: var(--ink); padding: .55rem .3rem;
  font: 500 .9rem var(--sans); cursor: pointer; text-align: center; }
.seg button + button, .seg output, .seg output + button { border-left: 1px solid var(--line); }
.seg button.active { background: var(--accent); color: var(--accent-ink); }
.seg output { cursor: default; display: flex; align-items: center; justify-content: center; }
.seg button[data-value="sepia"] { background: #f4ecd8; color: #3b2f20; }
.seg button[data-value="dark"] { background: #1b1916; color: #e9e2d6; }
.seg button[data-value="black"] { background: #000; color: #ddd; }
.seg button[data-value="light"] { background: #fff; color: #222; }
.seg button[data-value].active[data-value="light"], .seg button.active[data-value="sepia"],
.seg button.active[data-value="dark"], .seg button.active[data-value="black"] { box-shadow: inset 0 0 0 3px var(--accent); }
.scrim { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .25); }

.toast { position: fixed; left: 50%; bottom: calc(var(--bar) + 16px); transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--paper); padding: .55rem 1rem; border-radius: 999px; font-size: .9rem;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; }
.toast.show { opacity: 1; transform: translateX(-50%); }

@media (max-width: 520px) {
  .rbook { font-size: .82rem; }
  .ricon { min-width: 36px; }
  :root { --gap: 40px; }
  .viewport { width: calc(100% - 36px); }
}

/* scrolling from chapter to chapter: a quiet divider instead of the "Next chapter" button */
.chapter-section.joined .chapter-end { display: none; }
.chapter-section.joined::after {
  content: "❦"; display: block; text-align: center; color: var(--ink-2); font-size: 1.3em; margin: 3em 0 2.5em;
}

/* books uploaded before formatting was kept (no format classes): the reader's earlier standard look */
.chapter .legacy p { text-indent: 1.4em; }
.chapter .legacy h1, .chapter .legacy h2, .chapter .legacy h3 { text-align: center; }
.chapter .legacy :is(h1, h2, h3, h4, h5, h6, hr, figure, blockquote) + p,
.chapter .legacy p:first-child, .chapter .legacy .chapter-title + p, .chapter .legacy li p,
.chapter .legacy blockquote p { text-indent: 0; }
.chapter .legacy p.lines { margin: .7em 0; text-indent: 0; }