/* One reading dock; only its contents button moves to the cover actions. */
.toolbar-tools { display: contents; }
.topbar { display: none; }
.app-layout { height: 100dvh; }
.is-cover .welcome { touch-action: none; }
.is-cover .cover-stage { overflow: hidden; }
.is-cover .hero-cover { transform-origin: 0 0; user-select: none; -webkit-user-drag: none; cursor: pointer; }
.sidebar-cover { display: block; flex-shrink: 0; line-height: 0; padding: 0; border-radius: 2px; }
.sidebar-cover img { display: block; }
.sidebar-tabs button { padding-bottom: 10px; }
.sidebar-tabs button.active::after { display: none; }
.is-cover .welcome { padding-top: max(20px,env(safe-area-inset-top)); }
.cover-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: min(100%,420px); gap: 8px; }
.cover-actions > button { width: 100%; height: 48px; min-height: 48px; min-width: 0; white-space: nowrap; }
.cover-actions .primary-button, .cover-actions .secondary-button { min-width: 0; padding-inline: 12px; gap: 8px; }
.cover-actions svg { width: 19px; height: 19px; flex-shrink: 0; }
.cover-contents-label { display: none; }
.is-cover .cover-contents-label { display: inline; }
/* Keep the image area identical before reading, after return and after reset. */
.cover-progress { min-height: 44px; }
.reviews-heading { margin: 8px 0 12px; }
.reviews-heading .eyebrow { margin: 0 0 3px; font: 400 13px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; letter-spacing: 0; }
.reviews-heading p { margin: 0; font-size: 11px; line-height: 1.4; }
.toc { padding: 4px 13px 8px; }
.toc-button { --toc-row-bg: var(--panel); display: grid; grid-template-columns: minmax(0,1fr) max-content; gap: 0 8px; align-items: end; align-items: last baseline; min-height: 0; padding: 3px 13px; line-height: 1.1; background: var(--toc-row-bg); }
.toc-button.sub { min-height: 0; padding: 3px 13px 3px 27px; }
.toc-button.group { margin-top: 8px; }
.toc-button:hover { --toc-row-bg: var(--hover); }
.toc-button.active { --toc-row-bg: var(--accent-soft); }
.toc-button .toc-name { position: relative; display: block; }
/* A single leader under the final line; inline backgrounds mask its text. */
.toc-name::after { content: ""; position: absolute; inset-inline: 0 -5px; bottom: .2em; border-bottom: 1px dotted currentColor; opacity: .5; }
.toc-title { position: relative; z-index: 1; padding-inline-end: 4px; background: var(--toc-row-bg); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.toc-button .number { margin: 0; text-align: right; white-space: nowrap; }
.part-label { line-height: 1.1; margin-bottom: 0; }
.is-reviews .reading-area { overscroll-behavior: contain; }
.reviews-screen { touch-action: pan-y pinch-zoom; }
.is-cover:not(.sidebar-hidden) .sidebar { display: flex; }
.is-reading { --tool-size: 40px; --tool-gap: 6px; --dock-height: 56px; }
.is-reading .reader-footer { display: flex; justify-content: center; gap: 10px; height: calc(var(--dock-height) + env(safe-area-inset-bottom)); padding: 0 max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left)); }
.is-reading .toolbar-tools { display: flex; align-items: center; gap: var(--tool-gap); flex-shrink: 0; }
.is-reading .header-actions { display: contents; }
.is-reading .header-book, .is-reading .appearance-label { display: none; }
.is-reading .toolbar-tools .icon-button, .is-reading .toolbar-tools .brand, .is-reading .appearance-button { width: var(--tool-size); min-width: var(--tool-size); height: 48px; min-height: 48px; padding: 0; flex-shrink: 0; }
.is-reading .toolbar-tools svg { width: 20px; height: 20px; }
.is-reading .toolbar-tools .download { display: none; }
.is-reading .reading-area { overflow: hidden; }
.is-reading .page-view, .is-reading.fit-page .page-view { position: relative; display: block; min-width: 0; min-height: 0; width: 100%; height: 100%; padding: 0; }
.is-reading .page-frame { position: absolute; }
.is-reading .page-navigation { display: flex; gap: 0; flex-shrink: 0; }
.is-reading .page-navigation .icon-button { width: var(--tool-size); height: 48px; }
.is-reading #prev svg { transform: translateX(calc(.075 * (var(--page-arrow-width,var(--tool-size)) + var(--page-field-width,38px)))); }
.is-reading #next svg { transform: translateX(calc(-.075 * (var(--page-arrow-width,var(--tool-size)) + var(--page-field-width,38px)))); }
.is-reading .page-jump { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 38px; }
.is-reading .page-jump input { width: 100%; min-height: 0; height: 18px; padding: 0; font-size: 13px; line-height: 18px; }
.is-reading .page-jump>span:not(.sr-only) { display: block; font-size: 8px; line-height: 10px; }
.reading-percent { min-width: 32px; text-align: right; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.zoom-control { position: relative; display: flex; align-items: center; justify-content: center; width: 50px; height: 44px; flex-shrink: 0; }
.zoom-display { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; height: 44px; gap: 0; font-size: 10px; line-height: 13px; color: var(--muted); }
#zoom-value { display: block; width: 100%; height: 22px; min-width: 0; padding: 0; border: 0; border-radius: 3px; font: inherit; color: inherit; background: transparent; text-align: center; touch-action: manipulation; }
#zoom-value:not([readonly]) { background: var(--panel); outline: 1px solid var(--accent); }
#zoom-indicator { display: none; }
.zoom-display svg, .is-reading .toolbar-tools .zoom-display svg { width: 12px; height: 12px; margin: 0; }
.zoom-control select, .is-reading .zoom-control select { position: absolute; inset: 22px 0 0; width: 100%; height: 22px; min-height: 0; opacity: 0; padding: 0; cursor: pointer; }
.zoom-control:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
.is-reading .popover { top: auto; bottom: calc(var(--dock-height) + env(safe-area-inset-bottom) + 8px); max-height: calc(100dvh - var(--dock-height) - env(safe-area-inset-bottom) - 16px); }
.is-reading .sidebar { position: fixed; left: 0; top: 0; bottom: calc(var(--dock-height) + env(safe-area-inset-bottom)); width: 280px; box-shadow: 10px 0 40px #0001; }
.backdrop { left: 280px; }
.is-reading .backdrop { top: 0; bottom: calc(var(--dock-height) + env(safe-area-inset-bottom)); }
.is-cover .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; }
.is-cover .backdrop { top: 0; }
.tool-tip { position: fixed; z-index: 120; pointer-events: none; padding: 7px 10px; border-radius: 6px; background: var(--text); color: var(--panel); box-shadow: 0 3px 15px #0002; font-size: 11px; line-height: 1.4; max-width: min(220px,calc(100vw - 16px)); text-align: center; }
.is-reading .toast { bottom: calc(var(--dock-height) + env(safe-area-inset-bottom) + 12px); }
@media(min-width:901px) {
  .is-cover .sidebar, .is-reading .sidebar { width: 320px; }
  .backdrop { left: 320px; }
  .toc-button, .toc-button.sub { font-size: 13px; line-height: 1.1; min-height: 0; padding-block: 3px; }
  /* Keep the title's inline background clear of the small part label. */
  .part-label { font-size: 9px; line-height: 1.1; margin-bottom: 3px; }
  .reviews-heading { margin: 8px 0 16px; }
  .reviews-heading .eyebrow { margin: 0 0 4px; font: 400 20px/1.25 Georgia,serif; letter-spacing: 0; }
  .reviews-heading p { margin: 0; font-size: 13px; line-height: 1.5; }
}
@media(max-width:900px) {
  .sidebar-book { margin-bottom: 16.6667px; }
  .toc-button, .toc-button.sub { padding-block: 2.43px; }
  .toc-button.group { margin-top: 6.48px; }
  #zoom-value { display: none; }
  #zoom-indicator { display: block; width: 100%; height: 22px; line-height: 22px; transform: translateX(2px); text-align: center; pointer-events: none; }
  .zoom-control select, .is-reading .zoom-control select { inset: 0; height: 100%; }
  .is-reading { --tool-size: 36px; --tool-gap: 4px; --dock-height: 52px; }
  .is-reading .reader-footer { gap: 6px; padding-inline: max(4px,env(safe-area-inset-left)) max(4px,env(safe-area-inset-right)); }
  .is-reading .toolbar-tools .header-reviews { display: inline-flex; }
  .is-reading .toolbar-tools .download, .is-reading .toolbar-tools .fullscreen { display: none; }
  .zoom-control { width: 44px; }
  .reading-percent { min-width: 28px; font-size: 10px; }
}
@media(max-width:570px) {
  .is-cover .welcome { padding-top: max(12px,env(safe-area-inset-top)); }
  .cover-actions .primary-button, .cover-actions .secondary-button { padding-inline: 6px; gap: 4px; font-size: 12px; }
  .cover-actions .primary-button svg, .cover-actions .secondary-button svg { width: 16px; height: 16px; flex-shrink: 0; }
  .is-reading { --tool-size: clamp(28px,8.2vw,36px); --tool-gap: clamp(2px,.65vw,4px); }
  .is-reading .reader-footer { gap: 4px; }
  .is-reading .toolbar-tools svg { width: 18px; height: 18px; }
  .is-reading .toolbar-tools .zoom-display svg { width: 12px; height: 12px; }
  .is-reading .zoom-control { width: 40px; }
  .is-reading .zoom-display { font-size: 9px; line-height: 12px; }
  .is-reading .page-jump { width: var(--tool-size); }
  .is-reading { --page-field-width: var(--tool-size); }
  .is-reading .page-jump input { font-size: 11px; }
  .is-reading .page-jump>span:not(.sr-only) { font-size: 7px; }
  .reading-percent { min-width: 24px; font-size: 9px; }
}
@media(max-width:360px) {
  .cover-actions .primary-button, .cover-actions .secondary-button { padding-inline: 4px; gap: 3px; font-size: 10px; }
  .cover-actions .primary-button svg, .cover-actions .secondary-button svg { width: 14px; height: 14px; }
  .cover-actions .count-badge { padding-inline: 4px; }
  .is-reading { --tool-size: 28px; --tool-gap: 2px; }
  .is-reading .reader-footer { gap: 3px; }
  .is-reading .zoom-control { width: 30px; }
  .is-reading .page-navigation .icon-button, .is-reading .page-jump { width: 24px; }
  .is-reading { --page-field-width: 24px; --page-arrow-width: 24px; }
  .reading-percent { min-width: 22px; }
}
@media(max-height:440px) and (orientation:landscape) {
  .is-cover .cover-actions { width: 320px; max-width: 60vw; }
  .cover-actions .primary-button, .cover-actions .secondary-button { padding-inline: 4px; gap: 4px; font-size: 11px; }
  .cover-actions .primary-button svg, .cover-actions .secondary-button svg { width: 14px; height: 14px; }
}