/* v16 — make tablet Bible area match the desktop single-column journaling layout */

@media screen and (min-width:721px) and (max-width:1400px){
  .chapter-page{
    border:1px solid #dfd0c6 !important;
    border-radius:12px !important;
    box-shadow:0 18px 42px rgba(74,50,57,.11), inset 0 0 0 1px rgba(255,255,255,.72) !important;
    background:
      radial-gradient(circle at 20% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 36%),
      linear-gradient(180deg,#fffdf9 0%,#fcf8f2 100%) !important;
  }

  .chapter-page::before{
    display:block !important;
  }

  .verse-block{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) var(--journal-margin, 160px) !important;
    column-gap:24px !important;
    align-items:start !important;
    border-bottom:0 !important;
    padding:7px 0 17px !important;
    position:relative !important;
  }

  .verse-block::after{
    content:"" !important;
    display:block !important;
    grid-column:2 !important;
    grid-row:1 / span 6 !important;
    min-height:100% !important;
    pointer-events:none !important;
  }

  .above-note{
    grid-column:1 !important;
    width:auto !important;
    min-height:34px !important;
    margin:0 0 8px !important;
    padding:7px 8px !important;
    border:0 !important;
    border-bottom:0 !important;
    background:transparent !important;
    color:#715d65 !important;
    line-height:1.45 !important;
    font-size:12px !important;
  }

  .verse-text{
    grid-column:1 !important;
    padding:3px 6px 7px !important;
    font-size:18px !important;
    line-height:1.72 !important;
    letter-spacing:.005em !important;
    background:none !important;
    background-image:none !important;
    box-shadow:none !important;
  }

  .verse-text sup{
    margin-right:7px !important;
    font-size:10px !important;
  }

  .verse-actions{
    grid-column:1 !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:9px !important;
    margin-top:5px !important;
    padding:0 5px !important;
    display:flex !important;
    flex-wrap:wrap !important;
  }

  .verse-actions > div{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:6px !important;
  }

  .verse-actions > span{
    display:inline-block !important;
    font-size:10px !important;
  }

  .verse-actions button{
    min-height:28px !important;
    padding:7px 12px !important;
    font-size:11px !important;
    gap:7px !important;
  }

  .sticky-editor{
    grid-column:1 !important;
  }
}

@media screen and (min-width:721px) and (max-width:1400px) and (orientation:landscape){
  .chapter-page{
    --journal-margin: 160px;
    width:calc(100% - 16px) !important;
    max-width:none !important;
    margin:18px auto 28px !important;
    padding:40px 28px 64px !important;
  }
}

@media screen and (min-width:721px) and (max-width:1150px) and (orientation:landscape){
  .chapter-page{
    --journal-margin: 138px;
    padding:36px 18px 58px !important;
  }

  .verse-block{
    column-gap:18px !important;
  }
}

@media screen and (min-width:721px) and (max-width:1100px) and (orientation:portrait){
  .chapter-page{
    --journal-margin: 138px;
    width:calc(100% - 12px) !important;
    max-width:none !important;
    margin:6px auto 68px !important;
    border-left:1px solid #dfd0c6 !important;
    border-right:1px solid #dfd0c6 !important;
    border-radius:12px !important;
    padding:28px 16px 72px !important;
    min-height:calc(100vh - 108px) !important;
  }

  .chapter-page::before{
    inset:14px !important;
  }

  .verse-block{
    column-gap:16px !important;
  }

  .verse-text{
    font-size:17px !important;
    line-height:1.68 !important;
  }

  .verse-actions > div{
    flex-wrap:wrap !important;
  }
}

@media screen and (min-width:721px) and (max-width:850px) and (orientation:portrait){
  .chapter-page{
    --journal-margin: 118px;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .verse-block{
    column-gap:12px !important;
  }

  .above-note{
    min-height:28px !important;
  }

  .verse-text{
    font-size:16.5px !important;
  }

  .verse-actions button{
    min-height:27px !important;
    padding:6px 10px !important;
    font-size:10px !important;
  }
}