/* Leaf - book typography, the reader, the Sections feed and the device frame. */

/* ------------------------------------------------------------------ book typography */

.book {
  font-family: var(--read-font);
  font-size: var(--read-size);
  line-height: var(--read-leading);
  font-weight: 400;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
  widows: 2;
  orphans: 2;
  color: var(--ink);
  overflow-wrap: break-word;
}
/* Light text on dark paper looks heavier: take a little weight off at night. */
:root[data-theme="night"] .book { font-weight: 360; }

.book p { margin: 0; text-indent: var(--indent); }
.book p.first,
.book p.center,
.book p.verse,
.book p.signature,
.book p.speaker,
.book p.epigraph,
.book p.dedication,
.book h1 + p,
.book h2 + p,
.book h3 + p,
.book hr + p { text-indent: 0; }

.book h1, .book h2, .book h3 {
  break-after: avoid;
  page-break-after: avoid;
  break-inside: avoid;
  text-align: center;
  font-weight: 450;
  line-height: 1.25;
  text-wrap: balance;
  hyphens: manual;
}
.book h1 {
  font-size: calc(var(--scale-h1) * 1em);
  font-style: italic;
  font-weight: 400;
  margin: 1.4em 0 1.1em;
}
.book h2 {
  font-size: calc(var(--scale-h2) * 1em);
  font-weight: 400;
  margin: 1.8em 0 1.4em;
  letter-spacing: 0.01em;
}
/* A short centred rule under each chapter title. */
.page-columns.book h2::after {
  content: '';
  display: block;
  width: 2.2em;
  margin: 0.7em auto 0;
  border-top: 1px solid var(--ink-3);
}
.book h1 + h2 { margin-top: 0.6em; }
.book h3 { font-size: calc(var(--scale-h3) * 1em); margin: 1.2em 0 0.6em; }
.book > :first-child { margin-top: 0.4em; }
.book > h2:first-child { margin-top: 1.4em; }

.book .verse { margin: 0 0 calc(var(--read-leading) * 1em); }
.book .verse .line { display: block; padding-left: 1.4em; text-indent: -1.4em; }
.book .verse br { display: none; }
.book .indent { padding-left: 2em; }
.book .verse .line .indent { padding-left: 2em; }

.book blockquote { margin: 0.75em 0 0.75em 1.4em; }
.book blockquote p { text-indent: 0; }
.book blockquote p + p { text-indent: var(--indent); }

.book .epigraph {
  font-style: italic;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 1.2em 1.6em;
  text-align: left;
}
.book .dedication { text-align: center; font-style: italic; margin: 1em 0; }
.book .center { text-align: center; }
.book .signature { text-align: right; }
.book .letter { margin-left: 1em; margin-right: 1em; }
.book .stage { font-style: italic; }
.book .speaker { font-variant-caps: small-caps; letter-spacing: 0.03em; margin-top: 0.6em; }
.book .sc { font-variant-caps: small-caps; }
.book .foreign { font-style: italic; }
.book em .foreign, .book em em { font-style: normal; }

.book hr {
  border: 0;
  height: 0;
  width: 28%;
  margin: calc(var(--read-leading) * 0.9em) auto;
  border-top: 1px solid var(--ink-3);
  break-after: avoid;
}

/* Justify (setting): hyphenate with the book's lang (Chrome cannot hyphenate Polish yet). */
:root.justify .book p:not(.verse):not(.center):not(.signature):not(.epigraph) {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 2 2;
}

/* Passage mark: a 3px accent bar in the left margin that never reflows text. Two outer shadows:
 * the accent one shifted 10px left, a paper one shifted 7px left on top -> a 3px strip. */
.book .passage {
  box-shadow: -7px 0 0 0 var(--paper), -10px 0 0 0 var(--accent);
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}

/* Chapter openings: a two-line drop cap and small capitals on the first line, as in a printed book. */
.page-columns.book > h2 + p:not(.verse):not(.center):not(.epigraph)::first-letter,
.tale-cols.book > h2 + p:not(.verse):not(.center):not(.epigraph)::first-letter {
  float: left;
  font-size: 3.15em;
  line-height: 0.86;
  padding: 0.07em 0.08em 0 0;
  margin-right: 0.02em;
  font-weight: 400;
  color: var(--ink);
}
@supports (initial-letter: 2) {
  .page-columns.book > h2 + p:not(.verse):not(.center):not(.epigraph)::first-letter,
  .tale-cols.book > h2 + p:not(.verse):not(.center):not(.epigraph)::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    initial-letter: 2;
    margin-right: 0.1em;
  }
}
.page-columns.book > h2 + p:not(.verse):not(.center):not(.epigraph)::first-line {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ reader */

.view-reader { position: fixed; inset: 0; }
.reader {
  --page-top: 46px;
  position: fixed;
  inset: 0;
  background: var(--grain), var(--paper);
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
}

/* Running head: the book's title in small capitals, as printed at the top of a page. */
.reader-head {
  position: absolute;
  left: env(safe-area-inset-left);
  right: env(safe-area-inset-right);
  top: calc(env(safe-area-inset-top) + 16px);
  height: 18px;
  padding: 0 max(20px, 5vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 18px;
  color: var(--ink-3);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.reader-scroll .reader-head { display: none; }

.page-viewport {
  position: absolute;
  left: env(safe-area-inset-left);
  right: env(safe-area-inset-right);
  top: calc(env(safe-area-inset-top) + var(--page-top));
  bottom: calc(env(safe-area-inset-bottom) + 44px);
  overflow: hidden;
}
.page-columns { will-change: auto; }

.page-viewport.scroll {
  top: env(safe-area-inset-top);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.page-viewport.scroll .page-columns {
  position: static;
  margin: 0 auto;
  padding-top: 32px;
  padding-bottom: 32px;
  box-sizing: content-box;
}

.reader-footer {
  position: absolute;
  left: env(safe-area-inset-left);
  right: env(safe-area-inset-right);
  bottom: env(safe-area-inset-bottom);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 max(20px, 5vw) 6px;
  font-family: var(--font-reading);
  font-size: 12.5px;
  line-height: 1;
  color: var(--ink-3);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.foot-chapter { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
.foot-progress { flex: none; }

.chrome {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--grain), var(--paper);
  -webkit-user-select: none;
  user-select: none;
}
.chrome-top {
  top: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: calc(60px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 calc(8px + env(safe-area-inset-left));
  border-bottom: var(--hairline) solid var(--rule);
}
.chrome-title {
  flex: 1;
  min-width: 0;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 1.08rem;
}
.aa-btn { font-family: var(--font-reading); font-size: 1.15rem; letter-spacing: 0.01em; }
.chrome-bottom {
  bottom: 0;
  padding: 14px calc(var(--side) + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(var(--side) + env(safe-area-inset-left));
  border-top: var(--hairline) solid var(--rule);
}
.chrome-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--ink-2);
}
.chrome-chapter { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-reading); color: var(--ink); font-size: 1.02rem; }

/* Page slider: a hairline with a round ink thumb. */
.page-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 36px;
  margin: 6px 0 0;
  background: transparent;
}
.page-slider::-webkit-slider-runnable-track { height: 2px; background: var(--rule); border-radius: 2px; }
.page-slider::-moz-range-track { height: 2px; background: var(--rule); border-radius: 2px; }
.page-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink);
}
.page-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid var(--paper); }
.page-slider:focus-visible { outline-offset: 0; }

.end-mark { break-before: auto; text-align: center; padding: 2.5em 0 1em; font-family: var(--font-ui); }
.end-orn { margin: 0; font-family: var(--font-reading); font-size: 1.6em; color: var(--ink-3); text-indent: 0 !important; }
.end-text { margin: 0.4em 0 1.2em; font-family: var(--font-reading); font-style: italic; color: var(--ink-2); text-indent: 0 !important; }
.end-mark .btn { font-size: 15px; }

.scroll-nav { display: grid; gap: 10px; padding: 24px 0 8px; font-family: var(--font-ui); font-size: 16px; line-height: 1.3; }
.scroll-nav .btn { width: 100%; }

/* ------------------------------------------------------------------ Sections feed */

.feed { min-height: 100svh; }
.feed-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  height: calc(var(--feed-head) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(6px + env(safe-area-inset-right)) 0 calc(6px + env(safe-area-inset-left));
  background: var(--grain), var(--paper);
  border-bottom: var(--hairline) solid var(--rule);
}
.feed-title {
  flex: 1;
  min-width: 0;
  margin: 0 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-reading);
  font-style: italic;
  font-weight: 400;
  font-size: 1.3rem;
}
.feed-count { padding: 0 6px; }
.cards { max-width: 38rem; margin: 0 auto; }
.card {
  min-height: calc(100svh - var(--feed-head) - env(safe-area-inset-top));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 30px calc(var(--side) + env(safe-area-inset-right)) 36px calc(var(--side) + env(safe-area-inset-left));
  border-bottom: var(--hairline) solid var(--rule);
}
.card-kicker {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.68em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.card-chapter { margin: 4px 0 24px; font-family: var(--font-reading); font-style: italic; font-size: 0.9em; color: var(--ink-2); }
.card-passage p { text-indent: 0; margin: 0 0 calc(var(--read-leading) * 0.75em); }
.card-passage p:last-child { margin-bottom: 0; }
.card-passage .verse .line { padding-left: 1.4em; text-indent: -1.4em; }
.card-passage .elision { color: var(--ink-3); }
.card-passage h1, .card-passage h2, .card-passage h3 { margin-top: 0; }
mark {
  background: var(--mark);
  color: inherit;
  padding: 0.04em 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.card-context {
  margin-top: 28px;
  padding-top: 16px;
  border-top: var(--hairline) solid var(--rule);
}
.card-blurb { margin: 0 0 8px; font-size: 0.88em; line-height: 1.5; color: var(--ink-2); }
.card-sources { margin: 0; font-size: 0.78em; color: var(--ink-3); }
.card-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}
.card-actions .btn { flex: 0 1 auto; }
.card-actions .btn.primary { flex: 1 1 auto; max-width: 16rem; }
.feed-empty { max-width: 38rem; margin: 0 auto; padding: 32px var(--side); color: var(--ink-2); }
.sentinel { height: 1px; }

/* ------------------------------------------------------------------ device frame (preview) */

.preview-stage { margin: 18px 0 0; max-width: 100%; }
.preview-stage.one-to-one { overflow: auto; max-height: 80svh; border: var(--hairline) solid var(--rule); }
.device-holder { position: relative; margin: 0 auto; outline: 1px solid var(--ink-3); }
.preview-stage.one-to-one .device-holder { margin: 0; outline: 0; }
.device-frame {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--device-paper);
  color: var(--device-ink);
  font-family: var(--font-ui);
}
.dev-status, .dev-footer {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--dev-margin);
  font-size: 20px;
  line-height: 1;
  color: var(--device-ink-2);
  white-space: nowrap;
}
.dev-status { top: 0; height: var(--dev-status); border-bottom: 1px solid var(--device-rule); }
.dev-footer { bottom: 0; height: var(--dev-footer); }
.dev-status > span:first-child, .dev-footer > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dev-battery { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.dev-battery i { display: inline-block; width: 26px; height: 13px; border: 2px solid currentColor; border-radius: 2px; position: relative; }
.dev-battery i::after { content: ''; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 70%; background: currentColor; }
.dev-page { position: absolute; left: 0; right: 0; top: var(--dev-status); bottom: var(--dev-footer); overflow: hidden; }
.device-book {
  font-family: var(--font-reading) !important;
  font-size: var(--dev-body) !important;
  line-height: var(--dev-leading) !important;
  font-weight: 400 !important;
  color: var(--device-ink);
  padding-top: 8px;
  box-sizing: border-box;
}
.device-book .verse { margin-bottom: var(--dev-leading); }
.device-book hr { border-top-color: var(--device-ink-2); }
.device-book .epigraph { color: var(--device-ink-2); }

/* ------------------------------------------------------------------ Tales (full-screen feed) */

.view-tales, .tales-feed { position: fixed; inset: 0; }
.tales-head { position: absolute; top: 0; left: 0; right: 0; }
.cards.tales {
  position: absolute;
  top: calc(var(--feed-head) + env(safe-area-inset-top));
  left: 0;
  right: 0;
  bottom: 0;
  max-width: none;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.cards.tales::-webkit-scrollbar { display: none; }
.cards.tales:focus { outline: none; }
.tale {
  --tale-side: max(20px, 5vw);
  height: calc(100svh - var(--feed-head) - env(safe-area-inset-top));
  min-height: 0;
  max-width: 40rem;
  margin: 0 auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  padding: 18px calc(var(--tale-side) + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(var(--tale-side) + env(safe-area-inset-left));
  border-bottom: var(--hairline) solid var(--rule);
  overflow: hidden;
}
.tale-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex: none; }
.tale-meta { min-width: 0; }
.tale .card-kicker { line-height: 1.5; }
.tale .card-kicker .tale-by { color: var(--ink-3); }
.tale .card-chapter { margin: 2px 0 0; }
.tale-save { margin: -8px -10px 0 0; color: var(--ink-2); }
.tale-save[aria-pressed="true"] { color: var(--accent); }
.tale-page {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  margin: 14px calc(-1 * var(--tale-side)) 0;
  touch-action: pan-y;
  -webkit-user-select: text;
  user-select: text;
}
.tale-cols > :first-child { margin-top: 0; }
.tale-cols > p:first-child { text-indent: 0; }
.tale-cols.book h2::after {
  content: '';
  display: block;
  width: 2.2em;
  margin: 0.7em auto 0;
  border-top: 1px solid var(--ink-3);
}
.tale-cols.book > h2:first-child { margin-top: 0.4em; }
.tale-foot { flex: none; padding-top: 10px; border-top: var(--hairline) solid var(--rule); }
.tale-foot .card-blurb {
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tale-nav { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.tale-dots { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.tale-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--rule); flex: none; }
.tale-dots i.on { background: var(--ink); }
.tale-dots i.book-dot { width: 13px; height: 9px; border-radius: 1px 2px 2px 1px; background: none; border: 1px solid var(--ink-3); }
.tale-pageno { font-size: 0.78em; color: var(--ink-3); }
.tale-onward {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 36px;
  padding: 0 4px 0 10px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 0.85em;
  letter-spacing: 0.01em;
}
.tale-onward.ready { color: var(--ink); font-weight: 600; }
.tale .card-sources { margin-top: 2px; font-size: 0.7em; letter-spacing: 0.04em; }
.tale-why { font-style: normal; color: var(--accent); }
.taste-line { margin: 0; font-family: var(--font-reading); font-style: italic; font-size: 1.05em; line-height: 1.5; }