/* Kingdom Atmosphere — global layout stability v2
   Purpose: one authoritative relationship between the shared sidebar and page content.
   This file intentionally does not redesign product surfaces. It only fixes geometry,
   overflow, gutters, and responsive behavior that were being re-declared inconsistently. */
:root{
  --ks-layout-gutter:clamp(18px,2vw,32px);
  --ks-layout-mobile-gutter:clamp(12px,4vw,18px);
}
html{scrollbar-gutter:stable}
html,body{max-width:100%;overflow-x:clip}
body.ks-has-unified-shell{min-width:0}
body.ks-has-unified-shell :where(main,section,article,aside,header,footer,div,nav){min-width:0}
body.ks-has-unified-shell :where(img,video,canvas,svg){max-width:100%}
body.ks-has-unified-shell :where(input,select,textarea){max-width:100%}

/* Desktop: make the sidebar variable the single source of truth.
   These are the custom top-level shells that historically used their own hard-coded
   244/252/260px offsets or no shared-shell offset at all. */
@media(min-width:981px){
  body.ks-has-unified-shell :where(
    main.ks-student-home,
    main.ksl-shell,
    main.ksq-shell,
    main.ks-bible-main,
    main.pub-app,
    main.ka-explore,
    main.ka-people,
    main.ka-commerce-shell,
    main.ka-course-bridge,
    main.kg-shell,
    main.kg-create-shell,
    main.od
  ){
    margin-left:var(--ks-sidebar-current,252px)!important;
    margin-right:0!important;
    width:calc(100vw - var(--ks-sidebar-current,252px))!important;
    box-sizing:border-box!important;
    transition:margin-left .24s ease,width .24s ease!important;
  }

  /* Book/Academy surfaces need a real outer gutter, not a second sidebar offset. */
  body.ks-has-unified-shell.ks-academy-v2 main.ks-wrap.ka-shell{
    width:calc(100vw - var(--ks-sidebar-current,252px) - (var(--ks-layout-gutter) * 2))!important;
    max-width:1280px!important;
    margin-left:calc(var(--ks-sidebar-current,252px) + var(--ks-layout-gutter))!important;
    margin-right:var(--ks-layout-gutter)!important;
    box-sizing:border-box!important;
  }

  /* Dashboard keeps its intentional 1320px cap while following collapse state. */
  body.ks-has-unified-shell.ks-student-home-page main.ks-student-home{
    width:min(1320px,calc(100vw - var(--ks-sidebar-current,252px) - (var(--ks-layout-gutter) * 2)))!important;
    margin-left:calc(var(--ks-sidebar-current,252px) + var(--ks-layout-gutter))!important;
    margin-right:var(--ks-layout-gutter)!important;
  }

  /* My Learning previously filled straight to the viewport edge. */
  body.ks-has-unified-shell.ks-study-learning-page main.ksl-shell{
    width:calc(100vw - var(--ks-sidebar-current,252px) - (var(--ks-layout-gutter) * 2))!important;
    margin-left:calc(var(--ks-sidebar-current,252px) + var(--ks-layout-gutter))!important;
    margin-right:var(--ks-layout-gutter)!important;
  }

  /* Quiz uses a reading-width canvas but follows the real sidebar width. */
  body.ks-has-unified-shell.ks-quiz-page main.ksq-shell{
    width:min(980px,calc(100vw - var(--ks-sidebar-current,252px) - (var(--ks-layout-gutter) * 2)))!important;
    margin-left:calc(var(--ks-sidebar-current,252px) + var(--ks-layout-gutter))!important;
    margin-right:var(--ks-layout-gutter)!important;
  }

  /* Bible owns its own inner gutters, so only repair the outer rail math. */
  body.ks-has-unified-shell.ks-bible-page main.ks-bible-main{
    width:calc(100vw - var(--ks-sidebar-current,252px))!important;
    margin-left:var(--ks-sidebar-current,252px)!important;
    margin-right:0!important;
  }

  /* Preserve the profile's intentionally narrow centered reading column. */
  body.ks-has-unified-shell.ka-ministry-profile-page main.ks-wrap.ka-profile-shell{
    width:min(1040px,calc(100vw - var(--ks-sidebar-current,252px) - 40px))!important;
    max-width:1040px!important;
    margin-left:calc(var(--ks-sidebar-current,252px) + max(20px,(100vw - var(--ks-sidebar-current,252px) - 1040px)/2))!important;
    margin-right:0!important;
  }
}

/* Book detail: prevent the cover/title/actions from forcing the page wider than the viewport. */
body.ks-has-unified-shell.ks-academy-v2 .ka-topbar,
body.ks-has-unified-shell.ks-academy-v2 .ka-top-actions,
body.ks-has-unified-shell.ks-academy-v2 .ka-book-detail,
body.ks-has-unified-shell.ks-academy-v2 .ka-detail-copy{min-width:0}
body.ks-has-unified-shell.ks-academy-v2 .ka-top-actions{flex-wrap:wrap;justify-content:flex-end}
body.ks-has-unified-shell.ks-academy-v2 .ka-book-detail{
  grid-template-columns:minmax(220px,300px) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
}
body.ks-has-unified-shell.ks-academy-v2 .ka-detail-copy h1{overflow-wrap:anywhere;text-wrap:balance}
body.ks-has-unified-shell.ks-academy-v2 .ka-detail-description{max-width:72ch}

/* Prevent wide grids/flex rows from creating page-level horizontal scrolling. */
body.ks-has-unified-shell :where(
  .ksh-topbar,.ksh-dashboard-layout,.ksh-action-grid,.ksh-right-rail,
  .ks-planner-grid,.ksl-layout,.ksq-layout,.ks-bible-reader-shell,
  .ka-book-detail,.ka-book-grid,.ka-program-grid,.ka-research-grid,
  .pub-workspace,.pub-studio-head,.ka-commerce-grid,.ka-commerce-item,
  .ms-layout,.ka-explore-grid,.ka-research-entry-grid
)>*{min-width:0}

@media(max-width:980px){
  :root,html.ks-sidebar-collapsed{--ks-sidebar-current:0px}
  html{scrollbar-gutter:auto}
  body.ks-has-unified-shell{width:100%;overflow-x:clip}

  /* Every unified-shell page returns to the viewport on mobile. */
  body.ks-has-unified-shell :where(
    main.ks-wrap,main.wrap,main.ks-student-home,main.ksl-shell,main.ksq-shell,
    main.ks-bible-main,main.pub-app,main.ka-explore,
    main.ka-people,main.ka-commerce-shell,main.ka-course-bridge,
    main.kg-shell,main.kg-create-shell,main.od,.ka-research-shell
  ){
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  /* Keep content away from the physical screen edge while allowing page-owned cards to breathe. */
  body.ks-has-unified-shell :where(main.ks-wrap,main.wrap){
    padding-left:var(--ks-layout-mobile-gutter)!important;
    padding-right:var(--ks-layout-mobile-gutter)!important;
  }

  /* The floating menu occupies the top-left corner; top bars must not sit underneath it. */
  body.ks-has-unified-shell :where(.ka-topbar,.ksh-topbar,.ks-top,.ka-profile-topbar){
    min-width:0;
  }
  body.ks-has-unified-shell .ka-topbar{
    padding-left:56px!important;
    gap:10px!important;
  }
  body.ks-has-unified-shell .ka-top-actions{
    max-width:100%;
    gap:6px!important;
  }
  body.ks-has-unified-shell .ka-top-actions :where(a,button){flex:0 0 auto}

  /* Forms and horizontal action rows should wrap instead of widening the page. */
  body.ks-has-unified-shell :where(.ka-hero-actions,.ka-detail-stats,.ks-actions,.ksh-top-actions,.pub-studio-actions,.ka-commerce-topbar nav){
    flex-wrap:wrap;
    max-width:100%;
  }

  /* Tables/scrollers may scroll locally, never the entire document. */
  body.ks-has-unified-shell :where(table,.ks-table,.ka-table){max-width:100%}
  body.ks-has-unified-shell :where(.ks-table-wrap,.ka-table-wrap,[data-horizontal-scroll]){overflow-x:auto;overscroll-behavior-inline:contain}
}

@media(max-width:760px){
  body.ks-has-unified-shell.ks-academy-v2 main.ks-wrap.ka-shell{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding-left:var(--ks-layout-mobile-gutter)!important;
    padding-right:var(--ks-layout-mobile-gutter)!important;
    gap:18px!important;
  }
  body.ks-has-unified-shell.ks-academy-v2 .ka-topbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center!important;
    padding-top:10px!important;
  }
  body.ks-has-unified-shell.ks-academy-v2 .ka-top-actions{
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    flex-wrap:nowrap;
    justify-content:flex-start;
  }
  body.ks-has-unified-shell.ks-academy-v2 .ka-top-actions::-webkit-scrollbar{display:none}
  body.ks-has-unified-shell.ks-academy-v2 .ka-book-detail{
    grid-template-columns:minmax(0,1fr)!important;
    gap:24px!important;
    padding-top:14px!important;
  }
  body.ks-has-unified-shell.ks-academy-v2 .ka-book-detail-cover{
    position:relative!important;
    top:auto!important;
    width:min(250px,72vw)!important;
    margin:0 auto!important;
  }
  body.ks-has-unified-shell.ks-academy-v2 .ka-detail-copy h1{
    font-size:clamp(2.35rem,12vw,3.6rem)!important;
    line-height:.98!important;
  }
  body.ks-has-unified-shell.ks-academy-v2 .ka-detail-description{
    font-size:.98rem!important;
    line-height:1.65!important;
  }
  body.ks-has-unified-shell.ks-academy-v2 .ka-movement{border-radius:16px!important}
  body.ks-has-unified-shell.ks-academy-v2 .ka-movement summary{padding:16px!important}
  body.ks-has-unified-shell.ks-academy-v2 .ka-chapters{padding:0 16px 12px!important}

  /* Dashboard/mobile cards should use the full readable width without edge collisions. */
  body.ks-has-unified-shell.ks-student-home-page main.ks-student-home{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:72px var(--ks-layout-mobile-gutter) 90px!important;
  }
  body.ks-has-unified-shell.ks-study-learning-page main.ksl-shell,
  body.ks-has-unified-shell.ks-quiz-page main.ksq-shell{
    width:100%!important;
    margin:0!important;
    padding-left:var(--ks-layout-mobile-gutter)!important;
    padding-right:var(--ks-layout-mobile-gutter)!important;
  }
}

@media(max-width:480px){
  body.ks-has-unified-shell :where(.ka-btn,.ka-btn-ghost,.ks-btn,.ks-btn2){max-width:100%}
  body.ks-has-unified-shell.ks-academy-v2 .ka-detail-stats{gap:7px!important}
  body.ks-has-unified-shell.ks-academy-v2 .ka-detail-stats span{padding:8px 10px!important;font-size:.76rem!important}
  body.ks-has-unified-shell.ks-academy-v2 .ka-hero-actions>a,
  body.ks-has-unified-shell.ks-academy-v2 .ka-hero-actions>form,
  body.ks-has-unified-shell.ks-academy-v2 .ka-hero-actions>span{flex:1 1 100%;width:100%}
  body.ks-has-unified-shell.ks-academy-v2 .ka-hero-actions .ka-btn,
  body.ks-has-unified-shell.ks-academy-v2 .ka-hero-actions .ka-btn-ghost{width:100%}
}

@media(prefers-reduced-motion:reduce){
  body.ks-has-unified-shell :where(main.ks-student-home,main.ksl-shell,main.ksq-shell,main.ks-bible-main,main.pub-app,main.ka-explore,main.ka-people,main.ka-commerce-shell,main.ka-course-bridge,main.kg-shell,main.kg-create-shell,main.od){transition:none!important}
}