/* Reader controls are intentionally different for the cover and the devotional pages. */
.reader-cover-mode{justify-content:center;gap:18px}
.reader-cover-actions{width:min(100%,360px);padding:0 8px 10px}
.reader-cover-actions .primary{width:100%;min-height:50px}
.reader-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;width:min(100%,620px);margin-top:14px}
.reader-controls button{min-width:0}
.reader-day-label{min-width:100px;text-align:center;margin:0!important;color:#42584a;font-size:14px;font-weight:800}
.reader-tools{display:flex;justify-content:center;gap:18px;width:100%;padding:8px 0 4px}
.reader-tools .text-button{padding:8px 2px;color:#315f49;font-size:14px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.reader-frame:fullscreen{display:flex!important;flex-direction:column;align-items:center;justify-content:center;width:100vw!important;height:100dvh!important;max-width:none!important;margin:0!important;padding:16px!important;border:0!important;border-radius:0!important;background:#15281f!important}
.reader-frame:fullscreen img{max-height:calc(100dvh - 170px)!important;max-width:100%!important;width:auto!important;object-fit:contain}
.reader-frame:fullscreen .reader-controls,.reader-frame:fullscreen .reader-tools,.reader-frame:fullscreen .reader-cover-actions{position:relative;z-index:2}
@media(max-width:650px){
  .app-shell.reader-active .reader-cover-mode{justify-content:center;gap:14px}
  .app-shell.reader-active .reader-cover-mode .reader-cover-page{max-height:min(66svh,620px)}
  .app-shell.reader-active .reader-cover-actions{width:min(100%,310px);padding-bottom:4px}
  .app-shell.reader-active .reader-controls{grid-template-columns:1fr auto 1fr;gap:7px;margin-top:10px}
  .app-shell.reader-active .reader-controls button{padding:10px 6px;font-size:13px}
  .app-shell.reader-active .reader-day-label{min-width:84px;font-size:12px}
  .app-shell.reader-active .reader-tools{gap:16px;padding:6px 0 2px}
  .app-shell.reader-active .reader-tools .text-button{font-size:13px}
  .app-shell.reader-active .reader-frame:fullscreen{height:100dvh!important;padding:10px!important}
  .app-shell.reader-active .reader-frame:fullscreen img{max-height:calc(100dvh - 150px)!important}
  .app-shell.reader-active .reader-frame:fullscreen .reader-cover-page{max-height:calc(100dvh - 90px)!important}
}