/* AIL desktop layout consistency — added after every course's existing styles.
   Keep native exercise logic and native mobile menus intact. */
:root{--ail-layout-max:1800px;--ail-sidebar-width:228px;--ail-accent:#FC0701;--ail-surface:#17181b;--ail-text:#f3f4f5}
html{scrollbar-gutter:stable;overflow-y:scroll}
body{min-width:0}
/* Aligned shells, shared font hierarchy and consistent header dimensions. */
body[data-ail-new-course] .ail-integrated-header,
body[data-ail-new-course] .ail-chapterbar{
  max-width:var(--ail-layout-max)!important;width:100%!important;box-sizing:border-box!important;
  margin-inline:auto!important;
}
body[data-ail-new-course] .ail-integrated-header{
  min-height:65px!important;height:65px!important;background:#0c0c0d!important;
  border-color:#292a2d!important;padding-inline:clamp(16px,2.8vw,42px)!important;
}
body[data-ail-new-course] .ail-chapterbar{
  min-height:52px!important;background:#0d0e10!important;
}
body[data-ail-new-course] .ail-course-name,
body[data-ail-course] .ail-identity{font-weight:750!important;letter-spacing:-.015em!important;}
body[data-ail-new-course] #app,
body[data-ail-new-course] .app,
body[data-ail-new-course] .shell{
  max-width:var(--ail-layout-max)!important;width:100%!important;
  box-sizing:border-box!important;
}
/* The old Private AI Lab footer was fixed to the viewport with left:280px.
   This keeps it INSIDE its grid column instead of extending beyond the app. */
body[data-ail-course="private-ai-lab"] #app > main{
  min-width:0!important;width:100%!important;max-width:100%!important;
  display:flex!important;flex-direction:column!important;
}
body[data-ail-course="private-ai-lab"] #app > main > .content{
  width:100%!important;max-width:1330px!important;flex:1 0 auto!important;
  min-width:0!important;box-sizing:border-box!important;
}
body[data-ail-course="private-ai-lab"] #app > main > .footer-nav{
  position:relative!important;inset:auto!important;left:auto!important;right:auto!important;
  bottom:auto!important;top:auto!important;
  width:100%!important;max-width:100%!important;min-width:0!important;
  box-sizing:border-box!important;margin:0!important;flex:0 0 auto!important;
  min-height:66px!important;height:auto!important;
  padding:12px clamp(15px,4vw,61px)!important;
  display:flex!important;flex-wrap:wrap!important;gap:10px!important;
  align-items:center!important;justify-content:space-between!important;
  border-top:1px solid #35373b!important;background:#151619!important;
}
body[data-ail-course="private-ai-lab"] .footer-nav > span{
  color:#b9bcc4!important;white-space:nowrap!important;
}
/* Never show a mobile drawer's close X in the permanent desktop sidebar. */
body[data-ail-course="ai-coding"] .sidebar .mobile-close,
body[data-ail-course="strength-lab"] .sidebar .closemenu{
  display:none!important;
}
/* On desktop the left navigation is part of the DOCUMENT, not a separate sticky
   100vh scrolling frame: it scrolls away together with the course header. */
@media(min-width:931px){
  /* Shared top header mirrors the library's 228px brand rail + content header. */
  body[data-ail-new-course] .ail-integrated-header{
    display:grid!important;grid-template-columns:var(--ail-sidebar-width) minmax(110px,1fr) auto!important;
    align-items:center!important;gap:0!important;padding:0!important;
  }
  body[data-ail-new-course] .ail-header-logo{
    grid-column:1!important;display:flex!important;height:100%!important;
    align-items:center!important;padding:0 19px!important;border-right:1px solid #292a2d!important;
    background:#0c0c0d!important;
  }
  body[data-ail-new-course] .ail-head-divider{display:none!important;}
  body[data-ail-new-course] .ail-course-name{
    grid-column:2!important;min-width:0!important;margin:0!important;
    padding-left:clamp(18px,3vw,54px)!important;padding-right:12px!important;
  }
  body[data-ail-new-course] .ail-head-links{
    grid-column:3!important;min-width:0!important;padding-right:clamp(14px,2.2vw,40px)!important;
  }
}
@media(min-width:931px){
  body[data-ail-new-course] #app,
  body[data-ail-new-course] .app,
  body[data-ail-new-course] .shell{
    grid-template-columns:var(--ail-sidebar-width) minmax(0,1fr)!important;
    align-items:stretch!important;
  }
  body[data-ail-new-course] #app > .sidebar,
  body[data-ail-new-course] #app > .side,
  body[data-ail-new-course] .app > .sidebar,
  body[data-ail-new-course] .shell > .sidebar{
    position:relative!important;top:auto!important;bottom:auto!important;left:auto!important;
    height:auto!important;max-height:none!important;min-height:100%!important;
    overflow:visible!important;align-self:stretch!important;transform:none!important;
    z-index:2!important;
  }
  body[data-ail-new-course] .topbar{
    position:relative!important;top:auto!important;
  }
  /* Older courses use an aside element with no class; these also scroll normally. */
  body[data-ail-course]:not([data-ail-new-course]) .layout > aside,
  body[data-ail-course]:not([data-ail-new-course]) .layout > .sidebar,
  body[data-ail-course]:not([data-ail-new-course]) .app-shell > .sidebar,
  body[data-ail-course]:not([data-ail-new-course]) .app > .sidebar{
    position:relative!important;top:auto!important;bottom:auto!important;
    height:auto!important;max-height:none!important;min-height:100%!important;
    overflow:visible!important;align-self:stretch!important;
  }
  body[data-ail-course]:not([data-ail-new-course]) .ail-universal,
  body[data-ail-course]:not([data-ail-new-course]) nav.ail-chapter-bar{
    position:relative!important;top:auto!important;
  }
  body.ail-library-page .desktop-rail{
    position:relative!important;top:auto!important;height:auto!important;
    min-height:100%!important;align-self:stretch!important;overflow:visible!important;
  }
}
/* Each original engine has a distinct mobile drawer breakpoint; preserve it. */
@media(max-width:730px){
 body[data-ail-course="ai-coding"] .sidebar .mobile-close{
   display:flex!important;align-items:center!important;justify-content:center!important;
 }
}
@media(max-width:900px){
 body[data-ail-course="strength-lab"] .sidebar .closemenu{
   display:flex!important;align-items:center!important;justify-content:center!important;
 }
}
/* Don't let the footer or drawer generate horizontal page scrolling. */
body[data-ail-new-course] :is(.body-area,.workspace,.main,.shell,#app,.app,.content){min-width:0;}
body[data-ail-course="private-ai-lab"] .footer-nav :is(button,span){max-width:100%;}
@media(max-width:700px){
 body[data-ail-course="private-ai-lab"] .footer-nav{padding:10px 12px!important;gap:7px!important;}
 body[data-ail-course="private-ai-lab"] .footer-nav .btn{min-height:38px!important;padding:8px 11px!important;}
}

/* Preserve document scrolling at tablet widths when the native desktop rail is still visible. */
@media(min-width:731px){
  body[data-ail-course="ai-coding"] .shell{grid-template-columns:var(--ail-sidebar-width) minmax(0,1fr)!important;}
  body[data-ail-course="ai-coding"] .shell > .sidebar{position:relative!important;top:auto!important;height:auto!important;min-height:100%!important;max-height:none!important;overflow:visible!important;align-self:stretch!important;}
}
@media(min-width:721px){
  body[data-ail-course="private-ai-lab"] #app{grid-template-columns:var(--ail-sidebar-width) minmax(0,1fr)!important;}
  body[data-ail-course="private-ai-lab"] #app > .sidebar{position:relative!important;top:auto!important;height:auto!important;min-height:100%!important;max-height:none!important;overflow:visible!important;align-self:stretch!important;}
}
@media(min-width:781px){
  body[data-ail-course="the-deal-room"] #app{grid-template-columns:var(--ail-sidebar-width) minmax(0,1fr)!important;}
  body[data-ail-course="the-deal-room"] #app > .side{position:relative!important;top:auto!important;height:auto!important;min-height:100%!important;max-height:none!important;overflow:visible!important;align-self:stretch!important;}
}
@media(min-width:821px){
  body[data-ail-course="build-your-first-website"] .app-shell{grid-template-columns:var(--ail-sidebar-width) minmax(0,1fr)!important;}
  body[data-ail-course="build-your-first-website"] .app-shell > .sidebar{position:relative!important;top:auto!important;height:auto!important;min-height:100%!important;max-height:none!important;overflow:visible!important;align-self:stretch!important;}
}
/* The original old-course `aside#sidebar` selector has ID specificity. */
@media(min-width:931px){
  body[data-ail-course]:not([data-ail-new-course]) .layout > aside,
  body[data-ail-course]:not([data-ail-new-course]) .layout > aside#sidebar,
  body[data-ail-course]:not([data-ail-new-course]) .layout > .sidebar,
  body[data-ail-course]:not([data-ail-new-course]) .app-shell > .sidebar{
    overflow:visible!important;height:auto!important;max-height:none!important;
    position:relative!important;top:auto!important;min-height:100%!important;
  }
}