/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.reader { display: flex; flex-direction: column; height: 100vh; }
.reader__bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--rule, #ddd); }
.reader__title { flex: 1; min-width: 0; display: flex; align-items: center; }
.reader__title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader__nav { display: flex; align-items: center; gap: 4px; }
.reader__progress { flex-shrink: 0; color: var(--muted, #666); font-variant-numeric: tabular-nums; }
.reader__progress:not(:empty) { margin-left: 6px; }
.reader__btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; font-size: 22px; line-height: 1; padding: 2px 10px; cursor: pointer; }
.reader__btn:disabled { opacity: 0.35; cursor: default; }
/* The two font buttons share one "A" glyph sized to signal smaller/larger text. */
.reader__font-glyph { font-weight: 600; line-height: 1; }
.reader__font-glyph--sm { font-size: 14px; }
.reader__font-glyph--lg { font-size: 20px; }
/* Cap the reading measure so text doesn't stretch across a wide viewport. epub.js
   renders at width:100% of this element, so the max-width limits the column width:
   ~800px per column, doubled when two columns are shown. */
.reader__body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.reader__viewport { flex: 1; min-height: 0; width: 100%; max-width: 800px; margin: 0 auto; }
.reader[data-columns="2"] .reader__viewport { max-width: 1600px; }
.reader__error { padding: 24px; text-align: center; color: var(--muted, #666); }
.reader__toc { position: relative; }
.reader__toc summary { list-style: none; }
.reader__toc summary::-webkit-details-marker { display: none; }
.reader__toc-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10; display: flex; flex-direction: column; width: min(320px, 85vw); max-height: 60vh; overflow-y: auto; padding: 6px 0; background: var(--bg, #fff); border: 1px solid var(--rule, #ddd); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }
.reader__toc-entry { display: block; width: 100%; text-align: left; padding: 6px 12px 6px calc(12px + var(--toc-depth, 0) * 16px); background: none; border: 0; cursor: pointer; color: inherit; font: inherit; font-size: 14px; }
.reader__toc-entry:hover { background: var(--rule, #eee); }
/* Overlays the top of the viewport (absolute inside .reader__body) so toggling
   it never resizes the epub.js container, which only re-measures on window
   resize. */
.reader__return { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; gap: 16px; padding: 6px 16px; background: var(--bg, #fff); border-bottom: 1px solid var(--rule, #ddd); font-size: 14px; }
.reader__return-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted, #666); text-decoration: underline; font: inherit; font-size: inherit; }
.reader__back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted, #666); text-decoration: none; }
.reader__back-icon { display: none; }

/* On phone-sized screens the toolbar is cramped and epub.js only ever renders a
   single column (its two-column spread needs a viewport wider than this), so
   trim the bar to the essentials: a back arrow, the progress, the font-size
   buttons, and page nav. The columns toggle goes (it can't do anything at this
   width); the font buttons stay, since resizing text matters most on a phone. */
@media (max-width: 720px) {
  .reader__back-icon { display: inline-flex; }
  .reader__back-text { display: none; }
  .reader__title-text { display: none; }
  .reader__columns { display: none; }
}