/* PROTOTYPE: paged chapter reader. Loaded after style.css on /bible/<book>/<n>/ pages.
   Without JavaScript the chapter reads as one normal scrolling column. */

:root {
  --r-page: #FFFBF4; --r-desk: #EFE4D2; --r-ink: #2F2216; --r-muted: #7A6450;
  --r-accent: #8F521F; --r-rule: #E3D3BA; --r-shade: rgba(80, 50, 20, .14);
  --r-size: 20px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --r-page: #161F35; --r-desk: #0E1424; --r-ink: #EDE3D1; --r-muted: #A99F8E;
    --r-accent: #F2C46D; --r-rule: #2C385A; --r-shade: rgba(0, 0, 0, .45);
  }
}
:root[data-theme="paper"] {
  --r-page: #FFFBF4; --r-desk: #EFE4D2; --r-ink: #2F2216; --r-muted: #7A6450;
  --r-accent: #8F521F; --r-rule: #E3D3BA; --r-shade: rgba(80, 50, 20, .14);
}
:root[data-theme="sepia"] {
  --r-page: #F1E3C6; --r-desk: #D9C4A0; --r-ink: #3B2A17; --r-muted: #75603F;
  --r-accent: #7E4518; --r-rule: #D6BF97; --r-shade: rgba(80, 50, 20, .2);
}
:root[data-theme="night"] {
  --r-page: #161F35; --r-desk: #0E1424; --r-ink: #EDE3D1; --r-muted: #A99F8E;
  --r-accent: #F2C46D; --r-rule: #2C385A; --r-shade: rgba(0, 0, 0, .45);
}
:root[data-size="0"] { --r-size: 16px; }
:root[data-size="1"] { --r-size: 18px; }
:root[data-size="2"] { --r-size: 20px; }
:root[data-size="3"] { --r-size: 23px; }
:root[data-size="4"] { --r-size: 26px; }
:root[data-size="5"] { --r-size: 30px; }

body.reader { background: var(--r-desk); color: var(--r-ink); }
.reader .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* top bar */
.rbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; max-width: 72rem; width: 100%; margin: 0 auto; }
.rback { color: var(--r-muted); text-decoration: none; font-size: .95rem; white-space: nowrap; }
.rback:hover { color: var(--r-accent); }
.rtitle { flex: 1; margin: 0; text-align: center; font-family: var(--serif); font-size: 1.05rem; color: var(--r-muted); }
.rtools { display: flex; gap: 6px; }
.rtools button, .pg {
  font: 600 .95rem var(--sans); color: var(--r-ink); background: transparent;
  border: 1px solid var(--r-rule); border-radius: 999px; min-width: 40px; height: 40px; padding: 0 10px; cursor: pointer;
}
.rtools button:hover, .pg:hover { border-color: var(--r-accent); color: var(--r-accent); }
.rtools button:focus-visible, .pg:focus-visible { outline: 3px solid var(--r-accent); outline-offset: 2px; }
.swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px;
  background: linear-gradient(135deg, #FFFBF4 0 33%, #F1E3C6 33% 66%, #161F35 66%); border: 1px solid var(--r-rule); }

/* the text itself */
.flow { font-family: var(--serif); font-size: var(--r-size); line-height: 1.62; color: var(--r-ink);
  font-optical-sizing: auto; font-kerning: normal; }
.flow:focus { outline: none; }
.ch-head { text-align: center; margin: 0 0 1.4em; break-inside: avoid; }
.ch-kicker { font: 600 .62em var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--r-accent); margin: .4em 0 .6em; }
.ch-head h1 { font-size: 2.1em; font-weight: 400; margin: 0 0 .15em; color: var(--r-ink); }
.ch-sub { font-style: italic; color: var(--r-muted); margin: 0; }
.ch-head::after { content: ""; display: block; width: 3em; height: 1px; background: var(--r-rule); margin: 1.1em auto 0; }
.text { margin: 0; text-align: justify; hyphens: auto; -webkit-hyphens: auto; widows: 2; orphans: 2; }
.text sup { font: 600 .56em var(--sans); color: var(--r-accent); vertical-align: .6em; line-height: 0; margin: 0 .2em 0 .1em; }
.dropcap { float: left; font-size: 3.5em; line-height: .86; margin: .06em .08em 0 0; color: var(--r-accent); }
.vm { display: inline-block; width: 0; height: 1em; }
.v:has(> .vm:target) { background: color-mix(in srgb, var(--r-accent) 16%, transparent); border-radius: 3px; }
.ch-end { text-align: center; margin-top: 1.6em; break-inside: avoid; }
.orn { color: var(--r-accent); font-size: 1.3em; margin: 0 0 .8em; }
.ch-next { display: inline-block; text-decoration: none; color: var(--r-ink); border: 1px solid var(--r-rule);
  border-radius: 14px; padding: .55em 1.2em .65em; font-size: 1.05em; }
.ch-next:hover { border-color: var(--r-accent); }
.ch-next small { display: block; font: 600 .55em var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--r-accent); }
.ch-next span { display: block; font-style: italic; font-size: .8em; color: var(--r-muted); }
.ch-prev { font: .62em var(--sans); margin: 1em 0 0; }
.ch-prev a { color: var(--r-muted); }
.ch-src { font: .62em/1.5 var(--sans); color: var(--r-muted); margin-top: 1.4em; }
.ch-src a { color: var(--r-accent); }

/* no script: one centred scrolling column */
html:not(.paged) .book { max-width: 38rem; margin: 0 auto 40px; background: var(--r-page); border-radius: 6px; padding: 32px 24px; }
html:not(.paged) .turn, html:not(.paged) .rfoot { display: none; }

/* paged mode: fill the screen, flow into columns, move one page (or spread) at a time */
html.paged, html.paged body.reader { height: 100%; overflow: hidden; }
html.paged body.reader { display: flex; flex-direction: column; height: 100dvh; }
html.paged .book {
  position: relative; flex: 1; min-height: 0; width: 100%; max-width: 72rem; margin: 0 auto;
  padding: 0 16px;
}
html.paged .viewport {
  position: relative; height: 100%; overflow: hidden; background: var(--r-page);
  border-radius: 4px; box-shadow: 0 1px 2px var(--r-shade), 0 10px 30px var(--r-shade);
  padding: var(--pad-y, 28px) var(--pad-x, 22px);
  touch-action: pan-y pinch-zoom; user-select: text;
}
html.paged .flow { height: 100%; column-fill: auto; column-count: var(--spread, 1); column-gap: var(--gap, 44px); }
html.paged .book { touch-action: pan-y pinch-zoom; }
/* the fold between two facing pages (stays on top of a turning leaf) */
html.paged .viewport.spread::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 60px; margin-left: -30px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--r-shade) 50%, transparent);
  opacity: .55; z-index: 2;
}

/* the page flip: painted copies of the text on two flat pages and one two-sided leaf */
.flip { position: absolute; inset: 0; z-index: 1; display: none; pointer-events: none; perspective: 2400px; }
.flip.on { display: block; }
.flip .face { position: absolute; top: 0; bottom: 0; overflow: hidden; background: var(--r-page); }
.flip .copy { pointer-events: none; }
.flip .shade { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
/* the leaf: a chain of strips, each hinged to the last, so the page bends */
.leaf { position: absolute; top: 0; bottom: 0; width: 0; transform-style: preserve-3d; }
.strip { position: absolute; top: 0; bottom: 0; left: 0; transform-origin: 0 50%; transform-style: preserve-3d; }
.slice { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 2px); overflow: hidden;
  background: var(--r-page); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.slice.back { transform: rotateY(180deg); left: -2px; }
.slice .shade { opacity: 1; }
:root { --curl: 30, 18, 6; }
:root[data-theme="night"] { --curl: 0, 0, 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --curl: 0, 0, 0; } }
/* the shadow the leaf casts on the page it uncovers */
.flip .under .shade { background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 60%); }
.flip .under:first-child .shade { background: linear-gradient(270deg, rgba(0,0,0,.35), rgba(0,0,0,0) 60%); }
.viewport:not(.spread) .flip .under:first-child .shade { background: linear-gradient(90deg, rgba(0,0,0,.3), rgba(0,0,0,0) 70%); }
.flip.single { perspective: 1500px; }

/* invisible tap zones at the outer edges */
.turn { position: absolute; top: 0; bottom: 0; width: 18%; background: none; border: 0; cursor: pointer; z-index: 2; }
.turn.prev { left: 0; cursor: w-resize; }
.turn.next { right: 0; cursor: e-resize; }
.turn[disabled] { cursor: default; }

/* bottom bar */
.rfoot { display: flex; align-items: center; gap: 14px; padding: 10px 16px 14px; max-width: 72rem; width: 100%; margin: 0 auto; }
.rprog { flex: 1; height: 3px; background: var(--r-rule); border-radius: 3px; overflow: hidden; }
.rprog span { display: block; height: 100%; width: 0; background: var(--r-accent); transition: width .4s ease; }
.rpage { margin: 0; font: .85rem var(--sans); color: var(--r-muted); min-width: 9.5em; text-align: center; font-variant-numeric: tabular-nums; }
.pg { font-size: 1.3rem; line-height: 1; padding: 0; }
.pg[disabled] { opacity: .35; cursor: default; }

@media (max-width: 520px) {
  .rback span { display: none; }
  .rtitle { text-align: left; }
  .rpage { min-width: 7em; }
  html.paged .book { padding: 0 8px; }
}