/* WPI v61 — organized course navigation + stable responsive lesson canvas */

/* Lesson pages should use the available canvas instead of collapsing into a narrow center column. */
.student-board{
  grid-template-columns:clamp(285px,20vw,330px) minmax(0,1fr)!important;
  min-width:0!important;
  overflow:visible!important;
}
.lesson-workspace{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  overflow:clip!important;
}
.lesson-body{
  width:100%!important;
  max-width:1540px!important;
  margin:0 auto!important;
  padding:clamp(34px,4vw,58px) clamp(24px,4vw,64px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) clamp(235px,18vw,285px)!important;
  gap:clamp(24px,3vw,42px)!important;
  align-items:start!important;
  justify-content:stretch!important;
}
.lesson-content{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}
.lesson-content>*{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
.lesson-notes{
  width:100%!important;
  min-width:0!important;
  position:sticky!important;
  top:106px!important;
}

/* Class flow: readable, balanced blocks across all generated lessons. */
.class-roadmap{
  width:100%!important;
  max-width:none!important;
  grid-template-columns:repeat(auto-fit,minmax(175px,1fr))!important;
  margin:0 0 44px!important;
}
.class-roadmap>div{
  min-width:0!important;
  min-height:98px!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  align-items:start!important;
  gap:10px!important;
  padding:20px 16px!important;
}
.class-roadmap>div:last-child{border-right:0!important}
.concept-block{
  width:100%!important;
  max-width:none!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  gap:20px!important;
  padding:30px 0!important;
}
.concept-block>div:last-child,
.concept-block>div:last-child>*{min-width:0!important;max-width:none!important}
.objective-card,.deep-dive,.lesson-toolkit,.mistake-list,.completion-standard,.education-note,.resource-pack,.implementation-plan,.advisor-questions,.vocabulary{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
.lesson-toolkit,.mistake-list,.completion-standard{
  padding:clamp(26px,3vw,38px)!important;
}
.vocabulary{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px 28px!important;
}
.vocabulary>div{min-width:0!important}
.lesson-next{
  width:100%!important;
  min-width:0!important;
  gap:16px!important;
}

/* Organized curriculum rail. */
.course-rail{
  width:100%!important;
  min-width:0!important;
  padding:26px 18px 46px!important;
  scrollbar-width:thin;
}
.course-outline{
  display:grid!important;
  gap:9px!important;
  margin-top:20px!important;
}
.course-outline details{
  display:block!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.035)!important;
  overflow:hidden!important;
}
.course-outline details[open]{
  border-color:rgba(195,137,60,.58)!important;
  background:rgba(195,137,60,.08)!important;
}
.course-outline summary{
  min-height:50px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:9px!important;
  padding:13px 14px!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  list-style:none!important;
  color:#fff!important;
  font-weight:800!important;
  line-height:1.35!important;
}
.course-outline summary::-webkit-details-marker{display:none!important}
.course-outline summary::after{
  content:'+';
  color:#e1ba78!important;
  font-size:18px!important;
  line-height:1!important;
}
.course-outline details[open]>summary::after{content:'−'}
.wpi61-class-count{
  display:block!important;
  margin-top:4px!important;
  color:#b9c9d8!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.04em!important;
}
.course-outline details>a{
  min-height:48px!important;
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  align-items:center!important;
  gap:9px!important;
  margin:0 8px 7px!important;
  padding:10px 11px!important;
  border-radius:10px!important;
  color:#dbe8f2!important;
  text-decoration:none!important;
  line-height:1.35!important;
  touch-action:manipulation!important;
}
.course-outline details>a:hover{
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
}
.course-outline details>a.is-current,
.course-outline details>a[aria-current='page']{
  background:#c3893c!important;
  color:#120525!important;
  font-weight:900!important;
  box-shadow:0 7px 24px rgba(0,0,0,.2)!important;
}
.course-outline details>a.is-current i,
.course-outline details>a[aria-current='page'] i{
  border-color:rgba(18,5,37,.35)!important;
  color:#120525!important;
}
.wpi61-course-position{
  margin:14px 0 0!important;
  padding:11px 12px!important;
  border:1px solid rgba(195,137,60,.28)!important;
  border-radius:10px!important;
  color:#d9e2eb!important;
  background:rgba(0,0,0,.14)!important;
  font-size:11px!important;
  line-height:1.45!important;
}
.wpi61-course-position strong{color:#e1ba78!important}

/* Mobile course drawer controls are hidden on larger screens. */
.wpi61-course-toggle,.wpi61-course-backdrop{display:none!important}

@media(max-width:1100px){
  .student-board{grid-template-columns:270px minmax(0,1fr)!important}
  .lesson-body{
    grid-template-columns:1fr!important;
    max-width:1080px!important;
  }
  .lesson-notes{
    display:block!important;
    position:static!important;
    width:100%!important;
  }
}

@media(max-width:820px){
  html,body{max-width:100%!important;overflow-x:hidden!important}
  html.wpi61-course-open,body.wpi61-course-open{overflow:hidden!important;overscroll-behavior:none!important}
  .student-board{
    display:block!important;
    width:100%!important;
    min-height:100vh!important;
    padding-top:76px!important;
    overflow:visible!important;
  }
  .lesson-workspace{
    display:block!important;
    width:100%!important;
    overflow:visible!important;
  }
  .course-rail{
    display:block!important;
    position:fixed!important;
    z-index:100006!important;
    top:76px!important;
    left:0!important;
    bottom:0!important;
    width:min(88vw,370px)!important;
    height:calc(100dvh - 76px)!important;
    max-height:none!important;
    padding:22px 16px 44px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    transform:translateX(-105%)!important;
    transition:transform .24s ease!important;
    box-shadow:18px 0 55px rgba(0,0,0,.42)!important;
  }
  html.wpi61-course-open .course-rail,
  body.wpi61-course-open .course-rail{transform:translateX(0)!important}
  .course-rail>h2,.course-progress,.course-outline details:not([open]){display:block!important}
  .course-outline details{display:block!important}
  .course-outline{margin-top:16px!important}
  .wpi61-course-toggle{
    display:flex!important;
    position:sticky!important;
    z-index:45!important;
    top:76px!important;
    width:calc(100% - 28px)!important;
    min-height:50px!important;
    margin:12px 14px 0!important;
    padding:11px 15px!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    border:1px solid rgba(195,137,60,.5)!important;
    border-radius:12px!important;
    background:#14082b!important;
    color:#fff!important;
    box-shadow:0 9px 28px rgba(0,0,0,.18)!important;
    font:800 13px/1.2 Arial,sans-serif!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
  }
  .wpi61-course-toggle b{
    color:#e1ba78!important;
    font-size:11px!important;
    letter-spacing:.04em!important;
  }
  .wpi61-course-backdrop{
    display:block!important;
    position:fixed!important;
    z-index:100005!important;
    inset:76px 0 0!important;
    background:rgba(6,3,13,.62)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .2s ease,visibility .2s ease!important;
  }
  html.wpi61-course-open .wpi61-course-backdrop,
  body.wpi61-course-open .wpi61-course-backdrop{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .lesson-topbar{display:none!important}
  .lesson-hero{
    width:100%!important;
    padding:34px 18px 28px!important;
    gap:18px!important;
  }
  .lesson-hero h1{
    max-width:100%!important;
    font-size:clamp(32px,9vw,44px)!important;
    line-height:1.02!important;
    overflow-wrap:break-word!important;
  }
  .lesson-hero p,.lesson-hero span{max-width:100%!important}
  .lesson-hero>button,.lesson-hero>a{width:100%!important;min-height:48px!important}
  .lesson-tabs{
    width:100%!important;
    padding:0 10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    flex-wrap:nowrap!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .lesson-tabs::-webkit-scrollbar{display:none!important}
  .lesson-tabs button,.lesson-tabs a{
    flex:0 0 auto!important;
    min-height:48px!important;
    padding:14px 14px!important;
    white-space:nowrap!important;
    touch-action:manipulation!important;
  }
  .lesson-body{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    padding:30px 18px 42px!important;
  }
  .lesson-content{width:100%!important;max-width:none!important}
  .class-roadmap{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    margin-bottom:36px!important;
  }
  .class-roadmap>div{
    width:100%!important;
    min-height:0!important;
    border-right:0!important;
    border-bottom:1px solid #d5e0e8!important;
    padding:17px 14px!important;
  }
  .class-roadmap>div:last-child{border-bottom:0!important}
  .concept-block{
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:13px!important;
    padding:24px 0!important;
  }
  .objective-card,.deep-dive,.lesson-toolkit,.mistake-list,.completion-standard,.education-note,.resource-pack>div,.implementation-plan,.advisor-questions,.vocabulary{
    width:100%!important;
    max-width:none!important;
    padding:22px 18px!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  .vocabulary{grid-template-columns:1fr!important;gap:14px!important}
  .vocabulary>div{grid-template-columns:1fr!important;gap:5px!important}
  .mistake-list>div{grid-template-columns:1fr!important;gap:7px!important}
  .lesson-notes{
    display:block!important;
    position:static!important;
    margin-top:28px!important;
    width:100%!important;
    max-width:none!important;
  }
  .lesson-next{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:22px 18px 36px!important;
  }
  .lesson-next a,.lesson-next button{width:100%!important;min-height:50px!important}
}

@media(max-width:420px){
  .lesson-body{padding-left:14px!important;padding-right:14px!important}
  .lesson-hero{padding-left:15px!important;padding-right:15px!important}
  .concept-block{grid-template-columns:38px minmax(0,1fr)!important}
  .course-rail{width:92vw!important}
}