/* Reader geometry has one owner. Insets protect controls, never shrink artwork. */
#reader-dialog {
  --reader-canvas: var(--reader-height, 100dvh);
  --reader-art-height: calc(
    var(--reader-canvas) - var(--reader-toolbar-height, 70px) -
      var(--reader-dock-height, 68px)
  );
  --reader-end-space: calc(var(--reader-dock-height, 68px) + 55px);
  --reader-options-padding: 22px;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #0b0b0e;
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding-top: var(--reader-toolbar-height, 70px);
  scroll-padding-bottom: var(--reader-dock-height, 68px);
}
body.reader-open {
  overflow: hidden;
}
.reader-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(8px + var(--safe-top) + var(--status-clearance, 0px))
    max(16px, var(--safe-right)) 8px max(16px, var(--safe-left));
  min-height: calc(64px + var(--safe-top) + var(--status-clearance, 0px));
  background: #161619;
  border-bottom: 1px solid var(--line);
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
  transition:
    transform 0.28s var(--ease-out),
    visibility 0s;
}
.reader-title {
  flex: 1;
  min-width: 0;
}
.reader-title strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.reader-title small {
  color: var(--muted);
  font-size: 11px;
}
.reader-toolbar button {
  min-height: 48px;
  font-size: 13px;
}
.reader-toolbar a {
  font-size: 11px;
  color: var(--accent);
}
#close-reader {
  position: relative;
  z-index: 21;
  flex-shrink: 0;
  min-width: 48px;
  touch-action: manipulation;
  pointer-events: auto;
}
.reader-pages {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  padding: 0 var(--safe-right) 0 var(--safe-left);
}
.reader-page {
  position: relative;
  margin: 0;
  min-height: 80px;
  scroll-margin-top: 0;
}
.reader-page img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 80px;
  aspect-ratio: 850 / 1200;
  object-fit: contain;
  /* Pinch is handled by the reader (see reader.js), never by the page. */
  touch-action: pan-x pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.reader-page img.loaded {
  aspect-ratio: auto;
}
.reader-page figcaption {
  padding: 8px;
  text-align: center;
  color: var(--muted);
  font-size: 10px;
}
.reader-pages.seamless:not(.paged) .reader-page figcaption {
  display: none;
}
.paged .reader-page {
  display: none;
}
.paged .reader-page.current {
  display: block;
}
.paged .reader-page img {
  height: calc(var(--reader-art-height) * var(--reader-zoom, 1));
  min-height: 0;
}
/* Zoomed: the pages box is wider than the screen and scrolls both ways. The
   chrome around it stays put and at its normal size. */
#reader-dialog {
  touch-action: pan-x pan-y;
}
#reader-dialog.zoomed .reader-pages {
  max-width: none;
}
.reader-toolbar,
#reader-dialog.zoomed :is(.reader-footer, .reader-help, .image-error) {
  left: 0;
}
#reader-dialog.zoomed :is(.reader-footer, .reader-help) {
  position: sticky;
}
.reader-pages {
  transform-origin: 0 0;
}
.reader-help {
  padding: 10px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
}
.reader-footer {
  padding: 25px 16px var(--reader-end-space);
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.reader-footer button {
  margin: 10px;
  min-height: 48px;
  font-size: 13px;
}
.image-error {
  padding: 45px 20px;
  text-align: center;
  color: #d5b0a1;
  font-size: 13px;
}
.image-error button {
  min-height: 44px;
}
.reader-loading {
  min-height: 45vh;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
}
.reader-dock {
  position: fixed;
  inset: auto 0 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 56px minmax(70px, 180px) 56px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 9px max(16px, var(--safe-right)) calc(9px + var(--safe-bottom))
    max(16px, var(--safe-left));
  background: #19181d;
  border-top: 1px solid var(--line);
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
  transition:
    transform 0.28s var(--ease-out),
    visibility 0s;
}
.reader-dock button {
  min-height: 44px;
  padding: 8px;
  font-size: 20px;
}
#page-count {
  font-size: 13px;
  min-width: 55px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.reader-focus {
  position: fixed;
  z-index: 9;
  right: max(12px, var(--safe-right));
  bottom: calc(var(--reader-dock-height, 68px) + 10px);
  min-height: 44px;
  padding: 9px 13px;
  font-size: 12px;
  background: #201c24ed;
  border-color: #55434e;
}
#reader-dialog.reading-focus {
  --reader-art-height: var(--reader-canvas);
  --reader-end-space: calc(24px + var(--safe-bottom));
  scroll-padding: 0;
}
/* Hidden controls slide out (transform only: no layout work while scrolling)
   and become invisible once the slide ends, so VoiceOver skips them. */
.reading-focus .reader-toolbar {
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.22s var(--ease-out),
    visibility 0s linear 0.22s;
}
.reading-focus .reader-dock {
  transform: translateY(calc(100% + var(--ios-bottom-gap, 0px)));
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.22s var(--ease-out),
    visibility 0s linear 0.22s;
}
/* One page at a time: the toolbar leaves the flow so the page gets the screen. */
#reader-dialog.page-mode.reading-focus .reader-toolbar {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
}
/* Waiting for the next page to decode: dim after a short delay, never flash. */
.reader-pages[aria-busy="true"] .reader-page.current img {
  opacity: 0.55;
  transition: opacity 0.2s ease 0.15s;
}
@media (prefers-reduced-motion: reduce) {
  .reader-toolbar,
  .reader-dock,
  .reading-focus .reader-toolbar,
  .reading-focus .reader-dock {
    transition: none;
  }
}
/* Touch screens toggle controls by tapping the page; the button stays for
   VoiceOver and keyboards but takes no space over the artwork. */
@media (pointer: coarse) {
  #reader-dialog .reader-focus:not(:focus-visible) {
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.reading-focus .reader-focus {
  bottom: calc(10px + var(--safe-bottom));
  opacity: 0.85;
}
.reading-focus .reader-help,
.reading-focus .paged figcaption {
  display: none;
}
.reader-options-backdrop {
  position: fixed;
  inset: 0;
  z-index: 25;
  border: 0;
  border-radius: 0;
  background: #0008;
  padding: 0;
  touch-action: manipulation;
  cursor: default;
}
.reader-options {
  position: fixed;
  bottom: calc(var(--reader-dock-height, 68px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, calc(100% - 24px - var(--safe-left) - var(--safe-right)));
  max-height: calc(
    var(--reader-canvas) - var(--safe-top) - var(--status-clearance, 0px) -
      var(--reader-dock-height, 68px) - 28px
  );
  overflow: auto;
  overscroll-behavior: contain;
  z-index: 30;
  display: grid;
  gap: 16px;
  padding: var(--reader-options-padding);
  background: #211e26;
  border: 1px solid #514453;
  border-radius: 16px;
  box-shadow: 0 12px 50px #0008;
}
.reader-options-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: calc(-1 * var(--reader-options-padding));
  margin: calc(-1 * var(--reader-options-padding))
    calc(-1 * var(--reader-options-padding)) 0;
  padding: 4px 8px 4px var(--reader-options-padding);
  background: #211e26;
  border-bottom: 1px solid #ffffff10;
  z-index: 1;
}
.reader-options-heading strong {
  font-size: 13px;
  font-weight: 550;
}
.reader-options-heading button {
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 26px;
}
.reader-options > label {
  display: grid;
  gap: 9px;
  font-size: 13px;
  color: #d5ccd9;
}
.reader-options select {
  font-size: 16px;
  min-height: 46px;
  width: 100%;
}
.reader-options .seamless-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.reader-options input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}
.reader-options input:not([type="checkbox"]):not([type="range"]) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  padding: 8px;
}
.reader-options button,
.reader-options a {
  min-height: 44px;
  font-size: 12px;
}
.reader-options a {
  display: flex;
  align-items: center;
}
.page-jump,
.page-jump input {
  min-width: 0;
}
.page-jump output {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.page-jump input {
  width: 100%;
  height: 44px;
  accent-color: var(--accent);
  touch-action: pan-x;
}
.chapter-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.chapter-navigation button {
  min-width: 0;
  min-height: 48px;
  font-size: 12px;
  padding: 8px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.options-open .reader-focus {
  visibility: hidden;
  pointer-events: none;
}
.options-open .reader-dock,
.options-open .reader-toolbar {
  pointer-events: none;
}
.options-open #close-reader {
  pointer-events: auto;
}
.progress-pending {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--reader-dock-height, 68px) + 60px);
  z-index: 20;
  padding: 8px 12px;
  background: #211e26ed;
  color: var(--muted);
  border-radius: 8px;
  font-size: 11px;
}
@media (max-width: 700px), (pointer: coarse) {
  #reader-dialog {
    height: auto;
    --reader-options-padding: 16px;
  }
  .reader-toolbar {
    gap: 8px;
    min-height: calc(58px + var(--safe-top) + var(--status-clearance, 0px));
    padding: calc(6px + var(--safe-top) + var(--status-clearance, 0px))
      max(12px, var(--safe-right)) 6px max(12px, var(--safe-left));
  }
  .reader-title strong {
    font-size: 12px;
  }
  .reader-toolbar #close-reader {
    width: 48px;
    padding: 0;
    font-size: 0;
  }
  .reader-toolbar #close-reader::before {
    content: "←";
    font-size: 22px;
  }
  #reader-options-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 15px;
  }
  .reader-toolbar a,
  .reader-help {
    display: none;
  }
  .reader-dock {
    grid-template-columns: 48px minmax(70px, 160px) 48px;
    gap: 12px;
    padding: 6px max(12px, var(--safe-right)) calc(6px + var(--safe-bottom))
      max(12px, var(--safe-left));
  }
  .reader-focus {
    font-size: 11px;
  }
}
@media (display-mode: standalone) {
  #reader-dialog {
    height: auto;
  }
}
html:not(.keyboard-open)[data-ios-installed-canvas] #reader-dialog {
  top: 0;
  bottom: auto;
  height: var(--ios-installed-height);
  min-height: var(--ios-installed-height);
}
/* WebKit bug 301994 (see mobile.css): buttons stay inside the reported
   viewport, only backgrounds fill the strip below it. */
html:not(.keyboard-open)[data-ios-installed-canvas] .reader-dock {
  padding-bottom: max(
    6px,
    calc(var(--safe-bottom) - var(--ios-bottom-gap, 0px))
  );
}
html:not(.keyboard-open)[data-ios-installed-canvas] .reader-dock::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: var(--ios-bottom-gap, 0px);
  background: inherit;
  pointer-events: none;
}
html:not(.keyboard-open)[data-ios-installed-canvas]
  .reading-focus
  .reader-focus {
  bottom: max(
    10px,
    calc(10px + var(--safe-bottom) - var(--ios-bottom-gap, 0px))
  );
}
html:not(.keyboard-open)[data-ios-installed-canvas] .reader-options-backdrop {
  bottom: calc(-1 * var(--ios-bottom-gap, 0px));
}
.keyboard-open #reader-dialog {
  inset: var(--mobile-visible-top, 0px) 0 auto;
  height: var(--mobile-visible-height, 100dvh);
  max-height: var(--mobile-visible-height, 100dvh);
}
.keyboard-open .reader-options {
  position: sticky;
  top: 0;
  bottom: auto;
  left: auto;
  transform: none;
  width: calc(100% - 24px);
  max-height: calc(
    var(--mobile-visible-height, 100dvh) - var(--safe-top) - 12px
  );
  margin: 12px;
  box-shadow: none;
}
.keyboard-open .reader-dock,
.keyboard-open .reader-focus {
  visibility: hidden;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .reader-options-backdrop:hover:not(:disabled) {
    background: #0008;
  }
}

/* ---- End of chapter: what comes next, as a card. ---- */
.chapter-end {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff06;
}
.chapter-end-kicker {
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.chapter-end-title {
  font-size: 16px;
  color: var(--text);
}
.reader-footer .chapter-end-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label arrow" "title arrow";
  align-items: center;
  width: 100%;
  min-height: 64px;
  margin: 6px 0 0;
  padding: 10px 16px;
  border-radius: 12px;
  text-align: left;
  font-size: 15px;
  font-weight: 650;
  transition: transform 0.16s var(--ease-out);
}
.reader-footer .chapter-end-next[hidden] {
  display: none;
}
.chapter-end-next small {
  grid-area: label;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.75;
}
.chapter-end-next #next-chapter-title {
  grid-area: title;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chapter-end-next [aria-hidden] {
  grid-area: arrow;
  font-size: 20px;
}
.reader-footer .chapter-end-next:active {
  transform: scale(0.98);
}
.reader-footer .chapter-end-back {
  min-height: 44px;
  margin: 0;
  border: 0;
  background: none;
  color: var(--muted);
}
.chapter-end-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}