/* v17 — use the page width intentionally: wider scripture + true journaling margin */

/* Desktop and tablets share the same wide-margin Bible proportions. */
@media screen and (min-width:721px){
  .chapter-page{
    --journal-share: 22%;
    --journal-gap: 24px;
    width:min(1180px, calc(100% - 28px)) !important;
    max-width:1180px !important;
    padding-left:42px !important;
    padding-right:42px !important;
  }

  .verse-block{
    display:grid !important;
    grid-template-columns:minmax(0, 78%) minmax(120px, 22%) !important;
    column-gap:var(--journal-gap) !important;
    align-items:start !important;
    border-bottom:0 !important;
    padding:7px 0 17px !important;
  }

  /* Scripture, typed note box, sticky note, and verse controls stay together. */
  .above-note,
  .verse-text,
  .verse-actions,
  .sticky-editor{
    grid-column:1 !important;
    min-width:0 !important;
  }

  /* Turn the former empty area into a deliberate freehand journaling margin. */
  .verse-block::after{
    content:"" !important;
    display:block !important;
    grid-column:2 !important;
    grid-row:1 / span 8 !important;
    align-self:stretch !important;
    min-height:100% !important;
    border-left:1px solid rgba(111,83,96,.18) !important;
    background:linear-gradient(90deg, rgba(248,241,235,.34), rgba(255,253,249,0) 72%) !important;
    pointer-events:none !important;
  }

  .verse-text{
    width:100% !important;
    max-width:none !important;
    line-height:1.68 !important;
  }

  .above-note{
    width:100% !important;
    max-width:none !important;
  }

  .verse-actions{
    width:100% !important;
    max-width:none !important;
  }

  /* This helper was floating in the unused right side and made it look empty. */
  .verse-actions > span{
    display:none !important;
  }
}

/* Large desktop: give scripture a little more of the page. */
@media screen and (min-width:1200px){
  .chapter-page{
    width:min(1260px, calc(100% - 36px)) !important;
    max-width:1260px !important;
    padding-left:48px !important;
    padding-right:48px !important;
  }

  .verse-block{
    grid-template-columns:minmax(0, 80%) minmax(150px, 20%) !important;
    column-gap:28px !important;
  }
}

/* Landscape tablets keep the same visual language but protect reading width. */
@media screen and (min-width:721px) and (max-width:1150px) and (orientation:landscape){
  .chapter-page{
    width:calc(100% - 12px) !important;
    max-width:none !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .verse-block{
    grid-template-columns:minmax(0, 82%) minmax(105px, 18%) !important;
    column-gap:16px !important;
  }
}

/* Portrait tablets: still a wide-margin Bible, just with a slimmer journal rail. */
@media screen and (min-width:721px) and (max-width:1100px) and (orientation:portrait){
  .chapter-page{
    width:calc(100% - 12px) !important;
    max-width:none !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .verse-block{
    grid-template-columns:minmax(0, 83%) minmax(95px, 17%) !important;
    column-gap:14px !important;
  }

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

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

  .verse-block{
    grid-template-columns:minmax(0, 84%) minmax(82px, 16%) !important;
    column-gap:10px !important;
  }
}