/* VobixChat: responsive and accessible shield layout. No security state is changed here. */
html:has(body.shieldPage),html:has(body.genesisSimple){overflow-x:hidden}
body.shieldPage,body.genesisSimple{box-sizing:border-box;max-width:100%;overflow-x:hidden}
body.shieldPage *,body.genesisSimple *{box-sizing:border-box}
body.shieldPage>main,body.genesisSimple>main{width:min(100%,720px);max-width:100%;margin-inline:auto;padding-inline:clamp(12px,4vw,24px);padding-bottom:calc(30px + env(safe-area-inset-bottom,0px));}
body.shieldPage :is(section,details,nav,form),body.genesisSimple :is(section,details,nav,form){max-width:100%;min-width:0}
body.shieldPage :is(h1,h2,h3,p,summary,a,label),body.genesisSimple :is(h1,h2,h3,p,summary,a,label){overflow-wrap:anywhere}
body.shieldPage :is(input,textarea,select,button),body.genesisSimple :is(input,textarea,select,button){max-width:100%}
body.shieldPage :is(textarea,input:not([type=checkbox]):not([type=radio])),body.genesisSimple :is(textarea,input:not([type=checkbox]):not([type=radio])){min-width:0}
body.shieldPage :is(button,.action),body.genesisSimple :is(button,.action){min-height:44px}
body.shieldPage :is(button,a,summary,input,textarea,select):focus-visible,body.genesisSimple :is(button,a,summary,input,textarea,select):focus-visible{outline:3px solid #21a7eb;outline-offset:2px}
body.shieldPage .shieldHero,body.genesisSimple>main>.eyebrow,body.genesisSimple>main>h1{text-align:center}
body.shieldPage #shieldSetup{width:100%;margin-inline:auto}
body.shieldPage #setupActivate{display:block;width:100%;max-width:420px;margin-inline:auto}
@media(max-width:380px){body.shieldPage>main,body.genesisSimple>main{padding-inline:12px}body.shieldPage h1,body.genesisSimple h1{font-size:clamp(21px,7vw,28px)}}