/* Fluid client layout. Limits follow the viewport; no horizontal clipping masks. */
:root{
 --sp-content-max:960px;
 --sp-gutter:clamp(18px,4.5vw,28px);
 --sp-safe-top:env(safe-area-inset-top,0px);
 --sp-safe-right:env(safe-area-inset-right,0px);
 --sp-safe-bottom:env(safe-area-inset-bottom,0px);
 --sp-safe-left:env(safe-area-inset-left,0px);
}
html{ -webkit-text-size-adjust:100%;text-size-adjust:100% }
body{min-width:0}
#main>:is(.page,.wbPage){padding-left:var(--sp-safe-left);padding-right:var(--sp-safe-right)}
.viewBody>section{padding-left:max(var(--sp-gutter),var(--sp-safe-left));padding-right:max(var(--sp-gutter),var(--sp-safe-right))}
.app,.viewBody{width:100%;max-width:var(--sp-content-max);min-width:0}
.app{min-height:100vh;min-height:100dvh;padding-bottom:calc(88px + var(--sp-safe-bottom))}
.viewBody{padding-bottom:calc(32px + var(--sp-safe-bottom))}
#main,.viewBody>section,.sheetBody,.sheetBody>form{min-width:0;max-width:100%}
.viewOverlay,.sheetOverlay,body .authGate{top:var(--sp-visual-top,0px);bottom:var(--sp-keyboard-inset,0px)}
.viewTop{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;min-height:64px;padding:calc(8px + var(--sp-safe-top)) max(12px,var(--sp-safe-right)) 8px max(12px,var(--sp-safe-left))}
.viewTop strong{min-width:0;text-align:center;overflow-wrap:anywhere;line-height:1.4}
.viewTop>button{width:44px;min-height:44px;height:auto}
.sheet{width:100%;max-width:640px;max-height:90vh;max-height:calc(var(--sp-visual-height,100dvh) - max(16px,var(--sp-safe-top)));padding-right:max(var(--sp-gutter),var(--sp-safe-right));padding-left:max(var(--sp-gutter),var(--sp-safe-left));padding-bottom:calc(18px + var(--sp-safe-bottom));overscroll-behavior:contain}
.sheetHeader>div{min-width:0;flex:1;overflow-wrap:anywhere}
.sheetHeader .iconCircle{flex:0 0 44px;width:44px;height:44px}
.sheetBody{padding-bottom:4px}
.bottomNav{width:100%;max-width:var(--sp-content-max);height:auto;min-height:64px;padding:6px max(4px,var(--sp-safe-right)) calc(6px + var(--sp-safe-bottom)) max(4px,var(--sp-safe-left))}
.navBtn{min-width:0;min-height:44px;height:auto;overflow-wrap:anywhere}
.toast{max-width:calc(100% - 2 * var(--sp-gutter));overflow-wrap:anywhere;text-align:center;bottom:calc(88px + var(--sp-safe-bottom))}
body .authGate,.languageGate{overflow:auto;overscroll-behavior:contain}
/* Vite may append bundled auth CSS after public links; keep fluid rules specific. */
body .authGate{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding-top:max(24px,var(--sp-safe-top));padding-right:max(24px,var(--sp-safe-right));padding-bottom:max(24px,var(--sp-safe-bottom));padding-left:max(24px,var(--sp-safe-left))}
.authGate.is-hidden{display:none}
.authPanel,.languagePanel{min-width:0;max-width:100%;margin-block:auto}
.authPanel{flex-shrink:0}
.languagePanel h1{overflow-wrap:anywhere}

/* The complete shared directory family, not just the developer data centre. */
.viewBody>.dataCenter{padding:clamp(20px,5vw,30px) max(var(--sp-gutter),var(--sp-safe-right)) calc(48px + var(--sp-safe-bottom)) max(var(--sp-gutter),var(--sp-safe-left));margin:0 auto}
.companyRecordsHeader,.peopleRecordsHeader{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px}
.companyRecordsHeader>div,.peopleRecordsHeader>div{flex:1 1 13rem;min-width:0}
.companyRecordsHeader h1,.peopleRecordsHeader h1{font-size:clamp(1.5rem,6vw,2rem);line-height:1.35;overflow-wrap:anywhere}
.companyRecordsHeader .recordNewButton,.peopleRecordsHeader .recordNewButton{flex:0 1 auto;max-width:100%;height:auto;min-height:44px;padding:12px 16px;white-space:normal;overflow-wrap:anywhere;margin-left:auto}
.dataRowCopy,.dataRowCopy strong,.dataRowCopy>span,.dataRowCopy small,.recordDetail p{min-width:0;overflow-wrap:anywhere}
.dataRow.editable{grid-template-columns:minmax(0,1fr) auto}
.recordStatusTabs{flex-wrap:wrap}
.recordStatusTabs button{flex:1 1 4.5rem;height:auto;min-height:44px;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.recordCount,.dataSummary{overflow-wrap:anywhere}

/* Page controls stay visible and keep their hit areas at larger text sizes. */
.recordPageButtons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.recordPageNumber{grid-column:1/-1;grid-row:1;justify-self:center;white-space:normal;overflow-wrap:anywhere;text-align:center;padding:4px}
.recordPagination button{min-width:0;height:auto;min-height:44px;font-size:1rem;padding:10px 6px;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.recordPageJump{display:flex;flex-wrap:wrap;gap:8px}
.recordPageJump label{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.recordPageJump input{width:4.5em;max-width:100%;height:auto;min-height:44px}

/* Grids respond to their available content width, including nested sheets. */
#viewBody :is(.financeFormPair,.opsEditorGrid,.settingsGrid,.masterTradeStages,.qDateGrid,.realFormGrid,.rosterTwo,.paySetupGrid,.opsSortFields),
#sheetBody :is(.financeFormPair,.opsEditorGrid,.settingsGrid,.masterTradeStages,.qDateGrid,.realFormGrid,.rosterTwo,.paySetupGrid,.opsSortFields){grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.featureRoles,.roleChooser>div,.tradeChooser>div{grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr))}
#viewBody label,#sheetBody label{min-width:0}
#viewBody :is(input,select,textarea),#sheetBody :is(input,select,textarea),.authGate .authForm input{min-width:0;max-width:100%;box-sizing:border-box}
#viewBody :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea),
#sheetBody :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea),.authGate .authForm input{font-size:max(16px,1rem)}
#viewBody textarea,#sheetBody textarea{width:100%;resize:vertical}
.clientModuleHead,.realHeader,.financeSectionHead{flex-wrap:wrap;gap:12px}
.clientModuleHead>div,.realHeader>div,.financeSectionHead>div{min-width:0;flex:1 1 12rem}
.clientModuleHead h1,.realModule header h1{overflow-wrap:anywhere}
.clientModuleHead .clientPrimaryAction,.financeSectionHead .clientPrimaryAction{max-width:100%;height:auto;min-height:44px;white-space:normal;overflow-wrap:anywhere}
.rosterSheetActions,.sigActions,.dataActions,.companyFeatureActions,.invoiceActions{flex-wrap:wrap}
.rosterHero{flex-wrap:wrap}
.rosterHero>div:first-child{min-width:0;flex:1 1 12rem;overflow-wrap:anywhere}
.rosterHeroActions{min-width:0;max-width:100%;flex-wrap:wrap;gap:8px}
.rosterHeroActions .rosterSecondary{min-width:0;max-width:100%;height:auto;min-height:44px;padding:10px 14px;white-space:normal;overflow-wrap:anywhere}
.rosterSheetActions button,.sigActions button,.dataActions button{max-width:100%;height:auto;min-height:44px;white-space:normal;overflow-wrap:anywhere}
#main .page.messagesPage>.tabs.messagePrimaryTabs>button,.clientStatusTabs button,.payrollTabs button{height:auto;min-height:44px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.featureCheck span,.featureRoles label,.roleChooser label,.tradeChooser label{overflow-wrap:anywhere}

/* Keep long financial values and names inside their own cards. */
.dashboardFinanceGrid,.financeMetrics,.companyMasterGrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))}
.dashboardFinanceMetric,.financeMetric,.settlementValues>span,.payrollValue{min-width:0;max-width:100%;overflow-wrap:anywhere}
.dashboardFinanceMetric strong,.dashboardCashSection strong,.settlementValues b,.payrollValue strong{white-space:normal;overflow-wrap:anywhere}
.dashboardBuilderSummary{flex-wrap:wrap}
.dashboardBuilderGross{max-width:100%;min-width:0;margin-left:auto}
.dashboardBuilderGross strong{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.dashboardFinanceLine,.financeLedgerLine,.payrollTotals span,.payrollCard summary{flex-wrap:wrap}
.dashboardFinanceLine>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
@media(max-width:380px){.recordPageButtons{grid-template-columns:repeat(2,minmax(0,1fr))}.companyRecordsHeader .recordNewButton,.peopleRecordsHeader .recordNewButton{width:100%;margin-left:0}.rosterMainActions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-height:500px){.authPanel{margin-block:12px}.languageGate{align-items:flex-start!important}.sheet{border-radius:18px 18px 0 0}}