/* App uses "real" viewport height (iOS-safe) */
.main{
  height: calc((var(--vh) * 100) - var(--headerH));
}

/* If browser supports dvh, prefer it */
@supports (height: 100dvh){
  .main{
    height: calc(100dvh - var(--headerH));
  }
}

/* Main split grid */
.main{
  display: grid;
  grid-template-rows: 55% 10px 45%;
  width: 100%;
  position: relative;
}

/* Pane borders in stacked layout */
.paneBible{ border-bottom: 1px solid var(--rule); }
.paneNotes{ border-top: 1px solid var(--rule); }

/* Divider */
.divider{
  background: var(--bg);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  cursor: row-resize;
  display:flex;
  align-items:center;
  justify-content:center;
}

.divider .grab{
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: #9ca3af;
  opacity: .7;
}

/* Notes restore button (only when notes hidden) */
.notesRestore{
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
.notesRestore:hover{ border-color: var(--accent); }

/* --- Responsive: landscape/wide -> side-by-side panes --- */
@media (orientation: landscape), (min-width: 900px){
  .main{
    grid-template-rows: 100%;
    grid-template-columns: 55% 10px 45%;
  }

  .paneBible{
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }

  .paneNotes{
    border-top: 0;
    border-left: 1px solid var(--rule);
  }

  .divider{
    cursor: col-resize;
    border-top: 0;
    border-bottom: 0;
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
  }

  .divider .grab{
    width: 4px;
    height: 54px;
  }
}