/* Shared spacing for app pages and menus. Media stages keep their own layout. */
.appCompactPage,.appCompactMenus,.appCompactFeed,.appCompactAdmin{--app-gap:12px;--app-radius:16px;--app-control-font:16px}
html:is([data-vobix-font=large],[data-vobix-font=xlarge]) :is(.appCompactPage,.appCompactMenus,.appCompactFeed,.appCompactAdmin){--app-control-font:18px}
.appCompactPage{box-sizing:border-box}
.appCompactPage :is(main,section,article,nav,form,fieldset){min-width:0}
.appCompactPage :is(input,select,textarea,button,.phaseButton,.action){box-sizing:border-box;max-width:100%}
.appCompactSection:not(.vobixAccessibilityPage)>main{box-sizing:border-box;width:100%;max-width:900px;margin-inline:auto;padding:12px max(14px,env(safe-area-inset-right,0px)) calc(16px + var(--vobix-safe-bottom,env(safe-area-inset-bottom,0px))) max(14px,env(safe-area-inset-left,0px))}
.appCompactSection:not(.vobixAccessibilityPage)>main.narrow{max-width:680px}
body.appCompactSection:not(.vobixAccessibilityPage)>:is(header,.head,.top,.labHeader){min-height:56px;padding:calc(6px + var(--vobix-safe-top,env(safe-area-inset-top,0px))) max(12px,env(safe-area-inset-right,0px)) 6px max(12px,env(safe-area-inset-left,0px));gap:8px;box-sizing:border-box;align-items:center}
body.appCompactSection:not(.vobixAccessibilityPage)>:is(header,.head,.top,.labHeader)>:is(b,.brand,.vobixWordmark,span){font-size:19px;line-height:1.25;min-width:0;text-align:center}
body.appCompactSection:not(.vobixAccessibilityPage)>:is(header,.head,.top,.labHeader)>:is(a,button){min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;font-size:14px;line-height:1.25;border-radius:12px;flex-shrink:0}
body.appCompactSection:not(.vobixAccessibilityPage) :is(h1,.sectionIntro h1,.shieldHero h1){font-size:clamp(22px,4.8vw,26px);line-height:1.25;margin:0 0 10px;overflow-wrap:anywhere}
body.appCompactSection:not(.vobixAccessibilityPage) :is(h2,.phaseCard h2){font-size:20px;line-height:1.3;margin:0 0 8px;overflow-wrap:anywhere}
body.appCompactSection:not(.vobixAccessibilityPage) h3{font-size:17px;line-height:1.35;margin:8px 0}
body.appCompactSection:not(.vobixAccessibilityPage) :is(.sectionIntro,.intro){margin:0 0 12px}
body.appCompactSection:not(.vobixAccessibilityPage) :is(.phaseCard,.card,.panel,.testCard,.shieldHero,.securityWelcome){padding:14px;border-radius:var(--app-radius);margin-bottom:12px}
body.appCompactSection:not(.vobixAccessibilityPage) :is(.phaseCard,.card,.panel,.testCard,.shieldHero,.securityWelcome)>p{margin-block:8px;line-height:1.45}
body.appCompactSection:not(.vobixAccessibilityPage) :is(.phaseActions,.actions,.sectionQuickLinks,.labGrid,.accountLinks,.shieldOptions){gap:8px;margin-block:12px}
body.appCompactSection:not(.vobixAccessibilityPage) :is(.phaseButton,.action,button.secondary){min-height:44px;padding:9px 12px;font-size:var(--app-control-font);line-height:1.35;border-radius:12px}
body.appCompactSection:not(.vobixAccessibilityPage) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){min-height:44px;padding:10px 12px;font-size:var(--app-control-font);border-radius:10px}
body.appCompactSection:not(.vobixAccessibilityPage) label{margin-block:10px 6px;line-height:1.4}
body.appCompactSection .accountLinks>a{padding:12px 14px;gap:3px;border-radius:14px;min-height:60px}
body.appCompactSection .accountLinks span{font-size:14px;line-height:1.4}
body.appCompactSection .securityGroup{margin-bottom:10px;border-radius:16px}
body.appCompactSection .securityGroup>summary{min-height:48px;padding:12px 14px;font-size:var(--app-control-font);line-height:1.35}
body.appCompactSection .securityGroup[open]{padding:0 14px 14px}
body.appCompactSection .securityGroup>section,body.appCompactSection .securityGroup>.phaseCard{padding:12px 0;margin:0;border-radius:0}
body.appCompactSection.shieldPage main #shieldSetup{padding:14px;margin-top:12px;border-radius:16px}
body.appCompactSection.shieldPage .shieldPlans{gap:8px}
body.appCompactSection.shieldPage a.shieldPlanButton{min-height:116px;padding:12px 8px;gap:6px}
body.appCompactSection .labToolbar{gap:8px;margin-bottom:12px}
body.appCompactSection .testCard .cardTop{gap:8px}
body.appCompactSection .testCard .testIcon{font-size:21px}
body.appCompactSection .testCard .cardTop h2{font-size:18px;min-width:100px;margin:0}
body.appCompactSection.vobixHub .hubGroup{margin:16px 0}
body.appCompactSection.vobixHub .hubGrid{gap:8px}
body.appCompactSection.vobixHub .hubCard{flex-direction:row;align-items:center;gap:10px;min-height:76px;padding:12px;border-radius:14px}
body.appCompactSection.vobixHub .hubIcon{width:34px;height:34px;flex-basis:34px;border-radius:10px;font-size:20px}
body.appCompactSection.vobixHub .hubIcon svg{width:21px;height:21px}
body.appCompactSection.vobixHub .hubCard small{line-height:1.4}
body.appCompactSection .assistantHome{max-width:680px}
body.appCompactSection .assistantHome>header{margin:0 0 14px;gap:8px}
body.appCompactSection .assistantMark{width:38px;height:38px;border-radius:13px;font-size:24px;margin:0 auto 12px;box-shadow:none}
body.appCompactSection .assistantHome>h1,body.appCompactSection .assistantHome>p{text-align:center}
body.appCompactSection .assistantChoices{gap:8px;margin-top:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
body.appCompactSection .assistantChoices button{min-height:86px;padding:12px;border-radius:14px;gap:4px;font-size:15px;line-height:1.35}
body.appCompactSection .assistantNote{margin-top:14px;font-size:13px;line-height:1.45}
/* Popups share aligned actions and modest headings, with their existing scrolling. */
body.appCompactMenus :is(.settingsBox,.inboxMenu,#chatOptionsMenu,.historyActionsDialog,.qrShareCard){--vobix-menu-font:15px;--vobix-menu-row:44px;border-radius:16px}
body.appCompactMenus .settingsBox{width:min(440px,100%);padding:14px}
body.appCompactMenus .settingsBox>.settingsDragHandle{top:-14px;margin:-14px -14px 14px}
body.appCompactMenus .settingsBox :is(h2,.settingsView h2){font-size:21px;line-height:1.3;margin:10px 0 12px}
body.appCompactMenus .settingsMenuButton{padding:11px 12px;margin:6px 0;border-radius:12px;line-height:1.35}
body.appCompactMenus .settingsBox .row{gap:8px;padding-block:10px;align-items:center}
body.appCompactMenus .settingsBox :is(.save,.settingsExit){min-height:44px;padding:10px 12px;border-radius:12px}
body.appCompactMenus .settingsBox :is(input,select,textarea){max-width:100%;min-width:0}
html[data-vobix-font=large] body.appCompactMenus :is(.settingsBox,.inboxMenu,#chatOptionsMenu,.historyActionsDialog,.qrShareCard){--vobix-menu-font:17px;--vobix-menu-row:48px}
html[data-vobix-font=xlarge] body.appCompactMenus :is(.settingsBox,.inboxMenu,#chatOptionsMenu,.historyActionsDialog,.qrShareCard){--vobix-menu-font:19px;--vobix-menu-row:48px}
/* Admin uses the same rhythm while lists keep their natural scroll. */
body.appCompactAdmin main{width:min(1180px,calc(100% - 28px));padding-top:14px;gap:12px}
body.appCompactAdmin .topbar-inner{min-height:56px;gap:8px;padding-block:6px}
body.appCompactAdmin .welcome{margin-block:8px 14px;gap:10px}
body.appCompactAdmin .welcome h1{font-size:26px;line-height:1.25;margin:0 0 8px}
body.appCompactAdmin .admin-nav{gap:8px;margin-block:12px}
body.appCompactAdmin .admin-nav a{min-height:48px;padding:10px 12px;border-radius:12px}
body.appCompactAdmin :is(.panel,.metric){padding:14px;border-radius:16px}
body.appCompactAdmin .panel-head{gap:8px;margin-bottom:12px}
body.appCompactAdmin .panel-head h2{font-size:19px;line-height:1.3}
body.appCompactAdmin .section-heading{margin:16px 0 10px}
body.appCompactAdmin .section-heading h2{font-size:22px}
body.appCompactAdmin .table-wrap{max-width:100%;overflow-x:auto}
body.appCompactAdmin :is(input,select,textarea){max-width:100%}
body.appCompactFeed .networkHeader{gap:8px;padding-inline:14px;min-height:56px}
body.appCompactFeed #settingsPanel :is(.panel,.phaseCard){padding:14px;border-radius:16px}
body.appCompactFeed #settingsPanel .panelTitle h2{font-size:21px}
@media(max-width:600px){
 body.appCompactSection :is(.accountLinks,.sectionQuickLinks){grid-template-columns:1fr}
 body.appCompactSection .labGrid{grid-template-columns:1fr}
 body.appCompactSection .assistantChoices button{font-size:14px}
 body.appCompactSection.vobixHub .hubGrid{grid-template-columns:1fr}
 body.appCompactAdmin .panel-head{flex-wrap:wrap}
 body.appCompactAdmin .admin-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:360px){body.appCompactSection:not(.vobixAccessibilityPage)>:is(header,.head,.top,.labHeader){flex-wrap:wrap}body.appCompactSection .assistantChoices{grid-template-columns:1fr}body.appCompactSection .assistantChoices button{min-height:64px}}
@media(prefers-reduced-motion:no-preference){.appCompactSection :is(.phaseButton,.hubCard,.accountLinks>a,.assistantChoices button){transition:background-color .15s ease,transform .15s ease}.appCompactSection :is(.phaseButton,.assistantChoices button):active{transform:scale(.98)}}
/* Header rows keep long navigation labels separate from the page title. */
body.appCompactSection>header:has(>b):has(>a:nth-child(3)){display:grid;grid-template-columns:64px minmax(0,1fr) 100px}
body.appCompactSection>header:has(>b):has(>a:nth-child(3))>b{font-size:18px}
body.appCompactSection>header:has(>b):has(>a:nth-child(3))>a{padding-inline:6px;white-space:normal;text-align:center}
body.appCompactSection>header>a.brand{gap:6px;min-width:0;font-size:16px;padding-inline:0;flex:1 1 auto}
body.appCompactSection>header>a.brand img{width:30px;height:30px;flex:none}
body.appCompactSection .servicesHeader{display:flex;flex-direction:column;align-items:center;gap:4px}
body.appCompactSection .servicesHeader .servicesBrand{gap:7px;padding:0;font-size:20px;line-height:1.2;min-height:40px}
body.appCompactSection .servicesHeader .servicesBrand img{width:30px;height:30px}
body.appCompactSection .servicesHeader nav{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;width:100%}
body.appCompactSection .servicesHeader nav a{min-height:44px;padding:8px 10px;font-size:14px;line-height:1.25}
@media(max-width:600px){
 body.appCompactAdmin main .welcome{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
 body.appCompactAdmin main .welcome>div{width:100%;min-width:0}
 body.appCompactAdmin .welcome h1{overflow-wrap:anywhere}
 body.appCompactAdmin main .welcome-status{justify-content:center;align-items:center}
 body.appCompactAdmin .welcome>button{justify-self:center;min-height:44px}
 body.appCompactSection>header:has(>a.brand):not(.careHeader){flex-wrap:nowrap}
 body.appCompactSection>.careHeader{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
 body.appCompactSection>.careHeader>.brand{grid-column:1/-1;grid-row:1;justify-self:center}
 body.appCompactSection>.careHeader>.careBack{grid-column:1;grid-row:2}
 body.appCompactSection>.careHeader>.headerActions{grid-column:2;grid-row:2;display:flex;justify-content:flex-end;gap:8px}
}
html.vobixInstalled :is(body.appCompactPage,body.appCompactAdmin,body.appCompactFeed){--vobix-safe-top:max(28px,env(safe-area-inset-top,0px));--vobix-safe-bottom:max(48px,env(safe-area-inset-bottom,0px))}
body.appCompactSection .assistantHome{padding-top:calc(8px + var(--vobix-safe-top,env(safe-area-inset-top,0px)))}
body.appCompactSection>header:has(>a.brand):not(.careHeader)>a.brand{flex:1 1 0;min-width:0;flex-shrink:1;gap:4px;font-size:15px}
body.appCompactSection>header:has(>a.brand):not(.careHeader)>a:not(.brand){font-size:13px;padding-inline:8px}
@media(max-width:360px){body.appCompactSection>header:has(>a.brand):not(.careHeader)>a.brand{flex-wrap:wrap;justify-content:flex-start;line-height:1.2}body.appCompactSection>header:has(>a.brand):not(.careHeader)>a.brand img{width:26px;height:26px}}

/* Center primary page identity while keeping forms, lists and card copy readable. */
body.appCompactSection:not(.vobixAccessibilityPage) :is(.sectionIntro,.shieldHero){text-align:center}
body.appCompactSection:not(.vobixAccessibilityPage)>main>:is(.tag,h1):not(.securitySrOnly){text-align:center}
body.appCompactSection:not(.vobixAccessibilityPage) :is(.sectionIntro,.shieldHero)>p{margin-inline:auto;max-width:680px}
body.appCompactSection:not(.vobixAccessibilityPage)>main>:last-child{scroll-margin-bottom:calc(24px + var(--vobix-safe-bottom,env(safe-area-inset-bottom,0px)))}


/* 2026-10-05: readable mobile headings.
   Never split normal titles or plan names letter-by-letter. */
body.appCompactPage :is(h1,h2,h3,summary,b,strong),
body.appCompactMenus :is(h1,h2,h3,summary,b,strong,.chatOptionText){
 overflow-wrap:normal!important;
 word-break:normal!important;
 hyphens:none!important;
}
body.appCompactPage :is(p,small,label),
body.appCompactMenus :is(p,small,label){
 overflow-wrap:break-word;
 word-break:normal;
}
body.appCompactSection:not(.vobixAccessibilityPage)>header{
 width:100%;
}
body.appCompactSection:not(.vobixAccessibilityPage)>header>:is(b,.brand,.vobixWordmark,span){
 min-width:0;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 text-align:center;
}
body.appCompactSection:not(.vobixAccessibilityPage)>main{
 overflow-x:hidden;
}