/* Shared layout contract: CSS viewport, readable content, natural document scrolling.
   Wide: fluid capped content; <=1100: stack work panes; <=760: compact controls.
   Homepage composition remains in home.css; business content is never screen-scaled. */
:root{--layout-gutter:clamp(16px,2.2vw,36px);--layout-gap:clamp(14px,1.6vw,24px);--layout-content:1600px;--layout-dialog-gap:16px}
:is(.sc-app,.daily-app,.ig-app) main,#knowledge-pages-design .kd-main{width:100%;max-width:var(--layout-content);margin-inline:auto;padding:var(--layout-gutter);align-self:start;min-width:0}
body>.main{padding:var(--layout-gutter);max-width:var(--layout-content);min-width:0}
:is(.sc-app,.daily-app,.ig-app) :is(.panel,.hero,.field,.split>*,.two-col>*,.stage-grid>*,.sc-work-grid>*,.sc-detail-grid>*,.daily-form-grid>*,.daily-work-grid>*,.ig-work>*){min-width:0}
:is(.sc-app,.daily-app,.ig-app) :is(.split,.two-col,.stage-grid,.sc-work-grid,.sc-detail-grid,.daily-form-grid,.daily-work-grid,.ig-work){gap:var(--layout-gap)}
:is(.sc-app,.daily-app,.ig-app) :is(.hero h1,.panel h2,.project-row h3),#knowledge-pages-design :is(h1,h2,h3),body>.main :is(h1,h2,h3){overflow-wrap:anywhere}
:is(.sc-app,.daily-app,.ig-app) :is(input,select,textarea),#knowledge-pages-design :is(input,select,textarea),body>.main :is(input,select,textarea){min-width:0;max-width:100%}
:is(.sc-app,.daily-app,.ig-app) :is(.actions,.panel-heading,.stage-title,.sc-actions,.daily-plan-toolbar){flex-wrap:wrap}
:is(.sc-app,.daily-app,.ig-app) .table-wrap,body>.main .table-wrap{min-width:0;max-width:100%;overflow-x:auto}
:is(.sc-app,.daily-app,.ig-app) .overlay{padding:var(--layout-dialog-gap);overflow-y:auto;overscroll-behavior:contain}
:is(.sc-app,.daily-app,.ig-app) :is(.entry-dialog,.daily-dialog,.ig-dialog),dialog{box-sizing:border-box;max-height:calc(100svh - 32px);overflow-y:auto;overscroll-behavior:contain;overflow-wrap:anywhere}
:is(.sc-app,.daily-app,.ig-app) .account-menu,body>.topbar .account-menu,#knowledge-pages-design #account-menu{max-width:calc(100vw - 32px);max-height:calc(100svh - 100px);overflow:auto;overflow-wrap:anywhere}
body>#rail{overflow-y:auto;overscroll-behavior:contain}
:is(.sc-app,.daily-app,.ig-app) .rail{min-width:0}
:is(.sc-app,.daily-app,.ig-app) .shell{min-height:calc(100svh - 76px)}
.login-layout{grid-template-columns:minmax(0,1fr) minmax(320px,450px);gap:clamp(24px,4vw,70px);padding-block:clamp(24px,5svh,60px)}
.login-card{min-width:0}.login-header{flex-wrap:wrap}.login-header .brand{min-width:0}
@media(min-width:1900px){body>.main{margin-right:auto;margin-left:max(var(--rail),calc((100vw - var(--layout-content) + var(--rail))/2))}}
@media(max-width:1100px){
 :is(.sc-app,.daily-app,.ig-app) :is(.stage-grid,.sc-work-grid,.sc-detail-grid,.daily-form-grid,.daily-work-grid,.ig-work,.brand-editor,.progress-layout){grid-template-columns:minmax(0,1fr)}
 #knowledge-pages-design :is(.kd-answer-grid,.kd-import-grid,.kd-version-grid){grid-template-columns:minmax(0,1fr)}
 body>.main :is(.workspace-grid,.prep-grid){grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
 :root{--layout-gutter:16px;--layout-gap:16px}
 :is(.sc-app,.daily-app,.ig-app) :is(.hero,.stage-title){align-items:flex-start;flex-direction:column}
 :is(.sc-app,.daily-app,.ig-app) :is(.panel,.hero){padding:20px 16px}
 :is(.sc-app,.daily-app,.ig-app) :is(.split,.two-col,.fields,.check-list){grid-template-columns:minmax(0,1fr)}
 :is(.sc-app,.daily-app,.ig-app) :is(input,select,textarea),#knowledge-pages-design :is(input,select,textarea),body>.main :is(input,select,textarea){font-size:16px}
 :is(.sc-app,.ig-app) .steps{display:flex;overflow-x:auto;max-width:100%}
 :is(.sc-app,.ig-app) .steps button{flex:0 0 auto;min-width:110px}
 :is(.sc-app,.ig-app) .steps button b{font-size:13px}
 :is(.sc-app,.daily-app,.ig-app) .account>span:not(.avatar){display:none}
 .login-layout{display:block;padding:12px 20px 30px;max-width:530px}
 .login-card{padding:28px 22px}
 body>.main :is(.task-list){max-height:none}
}
@media(max-height:700px) and (min-width:761px){
 .login-header{padding-block:16px}.login-intro{padding-top:0}.login-layout{padding-block:16px;align-items:start}.login-card{padding-block:26px}.login-caption{margin-top:20px}.login-footer{padding-bottom:18px}
 :is(.sc-app,.daily-app,.ig-app) .hero{padding-block:22px}
}