/* Reader-specific presentation choices. These override the shared Telanas shell
   only inside the reader and persist locally through reader-presentation.js. */

.reader-page {
  --reader-header-height: 58px;
  --reader-font-scale: 1;
  --reader-line-height: 1.75;
  --reader-font-family: Georgia, "Times New Roman", serif;
  min-width: 0;
  overflow-x: clip;
}

.reader-page[data-reader-theme="dark"] {
  color-scheme: dark;
  --page: #090c0f;
  --page-deep: #06080a;
  --surface: #121920;
  --surface-raised: #182129;
  --surface-soft: #1d2730;
  --text: #eef2f4;
  --muted: #9ca8b1;
  --border: #586671;
  --border-soft: #303a42;
  --metal: #b9c4cc;
  --platinum: #d7dfe4;
  --accent: #8fa9bb;
  --focus: #d7dfe4;
  --page-surface: #161d23;
  --reader-canvas: #080b0e;
}

.reader-page[data-reader-theme="light"] {
  color-scheme: light;
  --page: #e8e6e1;
  --page-deep: #ddd9d1;
  --surface: #f3f1ec;
  --surface-raised: #faf9f6;
  --surface-soft: #e3dfd7;
  --text: #1c2328;
  --muted: #5f696f;
  --border: #7e898f;
  --border-soft: #b7bec2;
  --metal: #53616a;
  --platinum: #2f3b43;
  --accent: #526c7c;
  --focus: #24343e;
  --page-surface: #f5f2ea;
  --reader-canvas: #d6d2c9;
}

.reader-page[data-reader-theme="parchment"] {
  color-scheme: light;
  --page: #cfc7b5;
  --page-deep: #aba391;
  --surface: #ded6c3;
  --surface-raised: #ebe3d1;
  --surface-soft: #c7beab;
  --text: #2b2924;
  --muted: #696257;
  --border: #817a6d;
  --border-soft: #aaa18f;
  --metal: #606a6d;
  --platinum: #3f484b;
  --accent: #66777f;
  --focus: #343f43;
  --page-surface: #eee5d0;
  --reader-canvas: #6b665d;
}

.reader-page[data-reader-typeface="serif"] {
  --reader-font-family: Georgia, "Times New Roman", serif;
}

.reader-page[data-reader-typeface="sans"] {
  --reader-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.reader-page .book-page,
.reader-page .pagination-probe {
  font-family: var(--reader-font-family);
  font-size: calc(1rem * var(--reader-font-scale));
  line-height: var(--reader-line-height);
}

.reader-page[data-reader-theme] {
  background: var(--reader-canvas);
}

.reader-settings {
  position: relative;
}

.reader-settings > summary {
  list-style: none;
}

.reader-settings > summary::-webkit-details-marker {
  display: none;
}

.reader-settings-toggle {
  min-width: 44px;
  justify-content: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
}

.reader-settings[open] .reader-settings-toggle {
  color: var(--text);
  border-color: var(--metal);
}

.reader-settings:not([open]) .reader-settings-panel {
  display: none;
}

.reader-settings-panel {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 90;
  width: min(320px, calc(100vw - 28px));
  padding: 16px;
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  box-shadow: 0 18px 42px rgba(0,0,0,.3);
}

.reader-language {
  position: relative;
}

.reader-language .visually-hidden {
  top: 0 !important;
  left: 0 !important;
}

.reader-setting {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) minmax(130px, 1.25fr);
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: .82rem;
}

.reader-setting select {
  min-height: 38px;
  padding-inline: 9px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text);
}

.reader-setting select:hover,
.reader-setting select:focus-visible {
  border-color: var(--metal);
}

/* Continuous mode can scroll far beyond the reader's starting position, so keep
   its table-of-contents control attached to the viewport rather than the page. */
.reader-page:has(.book-spread.continuous) .toc-dock {
  position: fixed;
  top: calc(var(--reader-header-height) + 16px);
  left: 0;
  z-index: 70;
}

.reader-page:has(.book-spread.continuous) .toc-panel {
  max-height: calc(100vh - var(--reader-header-height) - 32px);
  max-height: calc(100dvh - var(--reader-header-height) - 32px);
  overflow-y: auto;
}

.book-spread.continuous [data-reader-anchor] {
  scroll-margin-top: calc(var(--reader-header-height) + 24px);
}

/* At medium desktop widths there is enough horizontal room for both the open
   contents panel and the continuous page. Reserve that room instead of letting
   the fixed panel cover the text. Very wide layouts remain naturally centred. */
@media (min-width: 1100px) and (max-width: 1360px) {
  .reader-page:has(.book-spread.continuous) .reader-shell {
    transition: padding-left 140ms ease;
  }

  .reader-page:has(.book-spread.continuous) .reader-shell:has(.toc-dock.is-open, .toc-dock.is-pinned) {
    padding-left: 340px;
  }
}

@media (max-width: 980px) {
  .reader-header-inner {
    flex-wrap: wrap;
  }

  .reader-title {
    flex: 1 1 12rem;
  }

  .reader-tools {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 8px;
  }

  .reader-settings-panel {
    position: fixed;
    top: calc(var(--reader-header-height) + 8px);
    right: 14px;
    max-height: calc(100vh - var(--reader-header-height) - 24px);
    max-height: calc(100dvh - var(--reader-header-height) - 24px);
    overflow-y: auto;
  }
}

@media (max-width: 700px) {
  .reader-settings {
    flex: 0 0 auto;
  }

  .reader-settings-panel {
    top: calc(var(--reader-header-height) + 8px);
    left: 14px;
    right: 14px;
    width: auto;
  }

  .reader-home {
    flex: 0 0 auto;
  }

  .reader-title {
    flex: 1 1 0;
  }

  .reader-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
  }

  .reader-tool {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 8px;
    line-height: 1.2;
    white-space: normal;
  }

  .reader-tool[data-layout-button] {
    padding-inline: 4px;
    font-size: .9rem;
    overflow-wrap: anywhere;
  }

  .reader-settings,
  .reader-language {
    width: 100%;
    min-width: 0;
  }

  .reader-settings-toggle {
    display: grid;
    place-items: center;
  }

  .reader-language select {
    width: 100%;
    min-width: 0;
    padding-inline: 8px 24px;
    text-overflow: ellipsis;
  }

  .reader-page:has(.book-spread.continuous) .toc-dock {
    top: calc(var(--reader-header-height) + 8px);
  }

  .reader-page:has(.book-spread.continuous) .toc-panel {
    max-height: calc(100vh - var(--reader-header-height) - 24px);
    max-height: calc(100dvh - var(--reader-header-height) - 24px);
  }

  .reader-setting {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

@media (max-width: 340px) {
  .reader-tool[data-layout-button] {
    padding-inline: 2px;
    font-size: .85rem;
  }
}