/* Agape Bible - desktop layout (1024 px and wider), loaded after the iOS layer.
   A phone keeps its floating tab bar; a desktop has a sidebar with every page instead, the bars and pages
   sit beside it, there is no bar at the bottom, and sheets open as dialogs in the middle of the window. */
.desk-nav { display: none; }

@media (min-width: 1024px) {
  :root { --side-w: 248px; }
  body, body.nav-float, body.nav-menu { --tab-total: 0px; }
  body.read { --side-w: 0px; }

  /* ---------- no tab bar: a sidebar ---------- */
  .tabbar, body.nav-float .tabbar, .nav-fab { display: none !important; }
  .desk-nav { display: flex; flex-direction: column; gap: 2px; position: fixed; z-index: 46; top: 0; bottom: 0; inset-inline-start: 0; width: 248px;
    padding: calc(14px + var(--safe-t)) 12px 18px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--group-bg); color: var(--chrome-ink); border-inline-end: .5px solid var(--hairline); font-family: var(--font-ui);
    transition: transform .35s var(--ease), opacity .3s; }
  body.read .desk-nav { transform: translateX(-100%); opacity: 0; pointer-events: none; }
  body.read .desk-nav[dir="rtl"] { transform: translateX(100%); }
  .dn-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 20px; font-size: 17px; letter-spacing: -.2px; }
  .dn-brand b { font-weight: 750; }
  .dn-brand img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 2px 8px rgba(40, 25, 5, .22); }
  .dn-group { display: flex; flex-direction: column; gap: 2px; }
  .dn-sep { height: .5px; margin: 12px 10px; background: var(--hairline); flex: none; }
  .dn-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 8px 12px; border: 0; border-radius: 10px;
    background: transparent; color: var(--chrome-ink); font-family: var(--font-ui); font-size: 15px; font-weight: 500; text-align: start; cursor: pointer;
    transition: background .15s, color .15s; }
  .dn-item:hover { background: var(--fill); }
  .dn-item:active { opacity: .7; }
  .dn-item:focus-visible { outline: 2px solid var(--tint); outline-offset: 1px; }
  .dn-item.active { background: var(--tint-soft); color: var(--tint); font-weight: 650; }
  .dn-ico { display: inline-flex; flex: none; width: 22px; height: 22px; color: var(--tint); }
  .dn-ico svg { width: 22px; height: 22px; }
  .dn-item.active .dn-ico svg { stroke-width: 2; }
  .dn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---------- the bars, the chapter and the pages sit beside the sidebar ---------- */
  .navbar { inset-inline-start: var(--side-w); transition: transform .35s var(--ease), opacity .3s, border-color .25s, box-shadow .25s, inset .35s var(--ease); }
  .layout { inset-inline-start: var(--side-w) !important; }
  .page-view { inset-inline-start: var(--side-w) !important; }
  .pv-body > .lt, .pv-body > .pv-inner, .pv-body > div { max-width: 900px; margin-inline: auto; }
  .play-bar { inset-inline-start: calc(var(--side-w) + 12px) !important; }
  body.nav-float .pst-form, .pst-form { bottom: 16px; }

  /* ---------- sheets (books, display): a dialog in the middle of the window, not a sheet from the bottom ---------- */
  .sheet { top: 50%; bottom: auto; left: calc(50% + var(--side-w) / 2); right: auto; width: min(560px, calc(100vw - var(--side-w) - 48px)); max-width: none; margin: 0;
    max-height: min(760px, calc(100vh - 80px)); border-radius: 18px; padding: 0;
    transform: translate(-50%, -47%) scale(.97); opacity: 0; visibility: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .28), 0 0 0 .5px var(--hairline);
    transition: transform .28s var(--ease), opacity .2s, visibility 0s .28s; }
  html[dir="rtl"] .sheet { left: calc(50% - var(--side-w) / 2); }
  .sheet.open { transform: translate(-50%, -50%); opacity: 1; visibility: visible; transition: transform .28s var(--ease), opacity .2s; }
  .sheet.tall { height: min(760px, calc(100vh - 80px)); max-height: none; }
  .sheet .sheet-grabber { display: none; }
  .sheet .sheet-head { padding-top: 10px; }
}