/* Keep chrome at a fixed 1x scale; scripture text size is controlled in JS. */
html, body, #root, .app-shell {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

html.lw-mobile-reader {
  touch-action: manipulation;
}

@media (max-width: 820px) {
  .main-scroll,
  .main-scroll.view-reader,
  .reader-page,
  .reader-frame {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  .reader-toolbar {
    max-width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  .reader-tools {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .app-shell:not(.presentation-mode) .chapter-heading {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1)) !important;
  }

  .app-shell:not(.presentation-mode) .reader-page > .chapter-heading::before,
  .app-shell:not(.presentation-mode) .chapter-heading::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    background: none !important;
  }

  .app-shell:not(.presentation-mode) .chapter-heading .reader-heading-identity {
    display: none !important;
  }

  .app-shell:not(.presentation-mode) .chapter-heading h1 {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .app-shell:not(.presentation-mode) .chapter-heading .reader-heading-footer {
    flex: 0 0 auto !important;
    margin: 0 0 0 auto !important;
    gap: 4px !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
  }

  .app-shell:not(.presentation-mode) .chapter-heading .reader-heading-footer > p {
    display: none !important;
  }

  .reader-heading-navigation {
    gap: 2px !important;
  }

  .reader-heading-navigation > .icon-button,
  .chapter-contents-trigger {
    min-width: 40px !important;
    min-height: 40px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .chapter-contents-trigger {
    width: auto !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    gap: 5px !important;
  }

  .appearance-settings-controls {
    width: 100% !important;
    max-width: 100% !important;
  }

  .appearance-mode-options button {
    min-height: 44px !important;
    font-size: 13px !important;
  }

  .appearance-scheme-option {
    min-height: 52px !important;
  }

  .topbar {
    gap: 6px !important;
    padding: 0 8px !important;
  }

  .quick-search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
  }

  .quick-search input {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 14px !important;
  }
}

html.lw-mobile-reader .topbar,
html.lw-mobile-reader .reader-toolbar,
html.lw-mobile-reader .left-sidebar,
html.lw-mobile-reader .right-panel,
html.lw-mobile-reader .profile-switcher,
html.lw-mobile-reader .mobile-menu-button,
html.lw-mobile-reader .primary-nav,
html.lw-mobile-reader .app-text-zoom,
html.lw-mobile-reader .passage-selectors,
html.lw-mobile-reader .reader-tools {
  touch-action: manipulation;
}

html.lw-mobile-reader .main-scroll.view-reader {
  touch-action: pan-y;
}

.lw-chapter-carousel {
  display: none !important;
}

.appearance-settings-controls,
.appearance-scheme-options,
.appearance-mode-options,
.appearance-scheme-option,
.appearance-mode-options button,
.reader-font-options,
.reader-font-options button {
  touch-action: manipulation !important;
  pointer-events: auto !important;
}

.lw-reader-font-hud {
  position: fixed;
  z-index: 100010;
  top: calc(88px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  font: 600 13px/1.2 system-ui, -apple-system, sans-serif;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.lw-reader-font-hud[data-visible="1"] {
  opacity: 1;
}

/* Updated brand-mark styling for scripture book logo */
.brand-mark,
.app-shell .brand-mark {
  background: #2b2b2b !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
}

.brand-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

.loading-brand-mark {
  border-radius: 12px !important;
  background: #2b2b2b !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

.welcome-introduction > img {
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}