/* Route surfaces use the available viewport. Keep component-sized dialogs,
   media, form controls and conversation bubbles under their own sizing rules. */
:root{--page-gutter:clamp(16px,1.5vw,32px)}
.app-shell{width:100%!important;max-width:none!important}
.app-view{min-width:0}

/* Scope page sizing to the route root so a nested dialog cannot inherit it.
   Important declarations keep the policy stable when feature CSS loads later. */
.app-shell .app-view > .page,
.app-shell .app-view > :is(.teachersone-page,.piima-page,.ai-admin-workspace,.teachershelp-page){
  box-sizing:border-box;
  width:100%!important;
  max-width:none!important;
  min-width:0;
  margin-inline:0!important;
}

/* These are audited inner route wrappers, not generic cards or panels. */
.app-view :is(.app-launcher-main,.learning-customer-v2.wide-tests,
  .teachersone-solution-panel,.vone-resume,
  .spk-hero,.spk-setup-grid,.spk-history,.spk-session-head,.spk-session-grid,
  .spk-live-feedback,.spk-report-hero,.spk-report-grid,.spk-report-actions,
  .spk-report-billing,.spk-ielts-progress,.spk-ielts-rules,.spk-ielts-bands,
  .spk-cefr-progress,.spk-cefr-rules){
  box-sizing:border-box;
  width:100%!important;
  max-width:none!important;
  min-width:0;
  margin-inline:0!important;
}

.app-shell .app-view > .el-page{
  box-sizing:border-box;
  width:calc(100% - var(--page-gutter) * 2)!important;
  max-width:none!important;
  min-width:0;
  margin-inline:var(--page-gutter)!important;
}

.app-view > :is(.imageone-editor-section-nav,.videoone-editor-section-nav){
  box-sizing:border-box;
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
  padding-inline:var(--page-gutter)!important;
}

@media(min-width:761px){
  .app-shell .app-view > .test-player{
    box-sizing:border-box;
    width:calc(100% - var(--page-gutter) * 2)!important;
    max-width:none!important;
    min-width:0;
    margin-inline:var(--page-gutter)!important;
  }
  .app-shell .app-view > :is(.page,.teachersone-page,.piima-page,.ai-admin-workspace,.teachershelp-page),
  .app-view .app-launcher-main{
    padding-inline:var(--page-gutter)!important;
  }
}

/* The standalone admin document has its own shell and lazy styles. */
.uo-admin-content > :is(.ai-admin-workspace,.uo-admin-math-map,.uo-admin-tests-workspace){
  box-sizing:border-box;
  width:100%!important;
  max-width:none!important;
  min-width:0;
  margin-inline:0!important;
  padding-inline:0!important;
}
.uo-admin-content{padding-inline:var(--page-gutter)!important}

/* Also shared with the separately served privacy policy document. */
body.privacy-page > :is(main.wrap,footer),
body.privacy-page > .bar > .bar-inner{
  width:calc(100% - var(--page-gutter) * 2)!important;
  max-width:none!important;
  margin-inline:var(--page-gutter)!important;
}