/* My Inner Foundation — tablet/mobile course reader scroll fix V10
   Fixes tablet failure modes where the sidebar remains visible but the lesson
   body is pushed below the fold or left blank by max-width:900 mobile rules.
   V10 also adds a conservative phone scroll safety net for all *-course.html
   readers so content can always scroll vertically on mobile. */
@media (min-width:701px) and (max-width:1180px){
  html,body{width:100%!important;min-width:0!important;overflow-x:hidden!important;-webkit-text-size-adjust:100%}
  *,*::before,*::after{box-sizing:border-box}
  img,svg,video,iframe{max-width:100%!important;height:auto}
  textarea,input,select,button{max-width:100%!important;box-sizing:border-box!important}
  table{display:block!important;max-width:100%!important;overflow-x:auto!important}

  html[data-mf-page="course"] body{
    background:#f0eae0!important;
    min-width:0!important;
    height:100vh!important;
    height:100dvh!important;
    overflow:hidden!important;
  }

  /* Standard generated course readers: keep a real two-pane tablet layout.
     This intentionally overrides the older @media(max-width:900) rule that changed
     .layout to one column while leaving the sidebar visible. */
  html[data-mf-page="course"] .layout{
    display:grid!important;
    grid-template-columns:minmax(210px,32vw) minmax(0,1fr)!important;
    grid-auto-flow:column!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:calc(100dvh - 59px)!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  html[data-mf-page="course"] .sb{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    grid-column:1!important;
    grid-row:1!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    height:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    border-right:1px solid rgba(100,82,55,.16)!important;
  }
  html[data-mf-page="course"] .main{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    height:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    margin:0!important;
    transform:none!important;
    background:#f0eae0!important;
  }

  html[data-mf-page="course"] .lv{
    width:100%!important;
    max-width:min(760px,100%)!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:44px clamp(24px,4vw,48px) 104px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  html[data-mf-page="course"] .lv.active{display:block!important;visibility:visible!important;opacity:1!important}
  html[data-mf-page="course"] .lv:not(.active){display:none!important}
  html[data-mf-page="course"] .lv-title{font-size:clamp(31px,4.4vw,46px)!important;line-height:1.08!important;max-width:100%!important}
  html[data-mf-page="course"] .lv-body,html[data-mf-page="course"] .lv-body p,html[data-mf-page="course"] .lv-body li{font-size:clamp(17px,2vw,19px)!important;line-height:1.82!important}
  html[data-mf-page="course"] .lv-refl,html[data-mf-page="course"] .lv-prac{max-width:100%!important}

  /* Alternate shell/sidebar readers. */
  html[data-mf-page="course"] .shell{
    display:flex!important;
    flex-direction:row!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:calc(100dvh - 119px)!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  html[data-mf-page="course"] .shell>.sidebar{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    flex:0 0 clamp(210px,32vw,290px)!important;
    width:clamp(210px,32vw,290px)!important;
    max-width:290px!important;
    height:100%!important;
    overflow:hidden!important;
    transform:none!important;
  }
  html[data-mf-page="course"] .shell>.sidebar[style*="display:none"],html[data-mf-page="course"] .shell>.sidebar[style*="display: none"]{display:none!important}
  html[data-mf-page="course"] .shell .main{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    flex:1 1 auto!important;
    min-width:0!important;
    height:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html[data-mf-page="course"] .main-inner{
    width:100%!important;
    max-width:min(820px,100%)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:38px clamp(24px,4vw,44px) 96px!important;
    box-sizing:border-box!important;
  }
  html[data-mf-page="course"] .screen.on{display:block!important;visibility:visible!important;opacity:1!important}
  html[data-mf-page="course"] .screen:not(.on){display:none!important}

  html[data-mf-page="course"] .mob-bar{display:none!important}
  html[data-mf-page="course"] .overlay{display:none!important}
  html[data-mf-page="course"] .overlay.open{display:block!important}
}
@media (min-width:701px) and (max-width:860px){
  html[data-mf-page="course"] .layout{grid-template-columns:minmax(190px,34vw) minmax(0,1fr)!important}
  html[data-mf-page="course"] .shell>.sidebar{flex-basis:clamp(190px,34vw,235px)!important;width:clamp(190px,34vw,235px)!important}
  html[data-mf-page="course"] .lv{padding:38px 24px 96px!important}
  html[data-mf-page="course"] .main-inner{padding:32px 24px 92px!important}
  html[data-mf-page="course"] .lv-title{font-size:clamp(29px,5vw,40px)!important}
}
@media (max-width:700px){
  /* Phone scroll safety net for every course reader.
     This does not redesign the page; it only prevents the common mobile lock
     where body/layout/main keep desktop 100vh + overflow:hidden values. */
  html[data-mf-page="course"],
  html[data-mf-page="course"] body{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-text-size-adjust:100%;
  }

  html[data-mf-page="course"] *,
  html[data-mf-page="course"] *::before,
  html[data-mf-page="course"] *::after{box-sizing:border-box}
  html[data-mf-page="course"] img,
  html[data-mf-page="course"] svg,
  html[data-mf-page="course"] video,
  html[data-mf-page="course"] iframe{max-width:100%!important;height:auto}
  html[data-mf-page="course"] textarea,
  html[data-mf-page="course"] input,
  html[data-mf-page="course"] select,
  html[data-mf-page="course"] button{max-width:100%!important;box-sizing:border-box!important}
  html[data-mf-page="course"] table{display:block!important;max-width:100%!important;overflow-x:auto!important}

  /* Standard generated course readers. */
  html[data-mf-page="course"] .layout{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  html[data-mf-page="course"] .sb{
    display:none!important;
  }
  html[data-mf-page="course"] .main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    margin:0!important;
    transform:none!important;
  }
  html[data-mf-page="course"] .lv{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  html[data-mf-page="course"] .lv.active{display:block!important;visibility:visible!important;opacity:1!important}
  html[data-mf-page="course"] .lv:not(.active){display:none!important}

  /* Alternate shell/sidebar readers. */
  html[data-mf-page="course"] .shell{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  html[data-mf-page="course"] .shell>.sidebar{
    display:none!important;
  }
  html[data-mf-page="course"] .shell .main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  html[data-mf-page="course"] .main-inner,
  html[data-mf-page="course"] .lesson-display .lesson-inner,
  html[data-mf-page="course"] .lesson-inner{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  html[data-mf-page="course"] .screen.on{display:block!important;visibility:visible!important;opacity:1!important}
  html[data-mf-page="course"] .screen:not(.on){display:none!important}

  html[data-mf-page="course"] .mob-bar{display:flex}
  html[data-mf-page="course"] .overlay{overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
}