/* Shared sizing rules preserve the approved cards and compact table headers. */
.column,#main,.panel,.panel-body,.field,.table-wrap,.dialog-body{min-width:0}
#main{container:workspace / inline-size}
html:not([data-page=communications]) .column:has(>.quick-conversation) #main{padding-block-end:calc(88px + env(safe-area-inset-bottom,0px))}
.quick-conversation{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
#main>:not(.employee-chat):not(.ux-chat-trigger){max-width:100%}
:where(#main,.dialog-body) :is(.form-grid,.facts,.content-grid,.detail-grid,.aside-stack,.af-two,.mr-grid,.manager-home-grid,.catalogue-layout,.setup-editor-fields)>*{min-width:0}
:where(#main,.dialog-body) :is(p,dd,h1,h2,h3,strong,small){overflow-wrap:break-word;word-break:normal}
.facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.facts>div,.review-facts>div{min-width:0}
.facts dd{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.account-settings .facts{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px 24px}
.account-identity{align-items:flex-start}.account-identity .avatar{flex:none}
.photo-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.photo-controls :is(.caption,.photo-error){flex-basis:100%;margin:0;overflow-wrap:anywhere}
.photo-controls .btn{margin:0;white-space:normal}
.table-wrap,.responsive-table-wrap{width:100%;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain}
.table-wrap:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.table-wrap table{max-width:none}
.table-wrap td{white-space:normal;overflow-wrap:anywhere}
:where(#main,.dialog-body) :is(.tabs,.ops-tabs,.interest-tabs,.comm-tabs,.filter-pills,.heading-actions,.inline-actions,.form-footer){max-width:100%;flex-wrap:wrap}
:where(#main,.dialog-body) :is(input,select,textarea){max-width:100%}
:where(#main,.dialog-body) :is(.btn,.text-link){overflow-wrap:break-word}
.context-control{flex-wrap:wrap}.context-control select{min-width:0;max-width:100%}
.topbar{min-width:0}.crumb{min-width:0;overflow:hidden;text-overflow:ellipsis}.top-actions{flex-shrink:0}
.dialog-head{min-width:0;gap:12px}.dialog-head h2{min-width:0;overflow-wrap:anywhere}.dialog-head>.icon-btn{flex:none}
#dialog{overscroll-behavior:contain;scrollbar-gutter:stable}
#dialog .dialog-body{max-width:100%}
.dialog-body :is(img,canvas,video){max-width:100%}
.photo-crop{min-width:0;max-width:100%}
.photo-crop canvas{max-width:100%;height:auto}

/* Adapt to the available content width, including zoom and an open sidebar. */
@container workspace (max-width:900px){
 .af-two,.ad-tool-grid,.mr-grid,.content-grid,.detail-grid,.split-editor{grid-template-columns:minmax(0,1fr)}
 .mf-workspace .manager-home-grid{grid-template-columns:minmax(0,1fr)}
 .mr-metrics,.ad-home-metrics,.stats,.stats.three,.af-metrics,.mf-people-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mf-workspace :is(.mf-approval-filters,.mf-demand-filters){grid-template-columns:repeat(2,minmax(0,1fr))}
 .catalogue-workspace .catalogue-layout{grid-template-columns:minmax(0,1fr)}
 .news-filters{flex-wrap:wrap}.news-filters>.field{flex:1 1 200px}
 .ops-toolbar{flex-wrap:wrap}.ops-toolbar>.field{flex:1 1 180px;min-width:0}
 .messaging-workspace{grid-template-columns:240px minmax(0,1fr)}
}
@container workspace (max-width:640px){
 .facts,.aside-stack,.mr-workload,.mr-person-phases,.mr-sla-measures,.bundle-grid,.de-paths,.de-people,.comm-fields,.support-shortcuts,.support-clock-grid{grid-template-columns:minmax(0,1fr)}
 .mf-workspace :is(.mf-approval-filters,.mf-demand-filters){grid-template-columns:minmax(0,1fr)}
 .employee-home-two .home-two-cards{grid-template-columns:minmax(0,1fr)}
 .home-two-actions{grid-template-columns:minmax(0,1fr)}
 .home-announcement{grid-template-columns:minmax(0,1fr)}
 .home-announcement-visual{min-height:210px;border-inline-end:0;border-block-end:1px solid var(--line)}
 .home-announcement-copy{padding:20px}
 .service-grid,.service-grid.four{grid-template-columns:minmax(0,1fr)}
 .catalogue-workspace .service-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
 .transaction-type-options{max-width:100%;flex-wrap:wrap}
 .ops-toolbar>.field,.news-filters>.field{flex-basis:100%}
 .messaging-workspace{grid-template-columns:minmax(0,1fr)}
 .messaging-workspace[data-chat-open=true] .messaging-list-pane{display:none}
 .messaging-workspace[data-chat-open=false] .messaging-conversation{display:none}
 .messaging-back{display:flex}.messaging-list-pane{border:0}
}
@container workspace (max-width:400px){
 .mr-metrics,.ad-home-metrics,.stats,.stats.three,.af-metrics,.mf-people-overview,.af-shortcuts,.news-summary{grid-template-columns:minmax(0,1fr)}
 .home-two-hero{padding:26px 16px}.home-two-hero h1{font-size:26px}
 .home-two-card{padding:16px!important}.home-two-card-art{position:static!important;width:100%!important;height:130px!important;margin-bottom:14px!important}.home-two-drawing{height:130px!important}
 .home-announcement-actions{align-items:stretch;flex-direction:column;gap:8px}
 .home-announcement-actions>.btn{justify-content:center}.home-announcement-actions>.text-link{justify-content:center;min-height:40px}
}

/* A drawer leaves tablets enough space to use the same page layouts. */
@media(max-width:1024px){
 .layout,.layout:has(>.employee-sidebar){display:block}
 .sidebar,.employee-sidebar{position:fixed;inset-inline-start:0;top:0;width:min(280px,calc(100vw - 48px));height:100dvh;max-height:100dvh;transform:translateX(-110%);visibility:hidden;z-index:50;transition:transform .18s,visibility .18s;box-shadow:0 0 60px #0003}
 [dir=rtl] .sidebar,[dir=rtl] .employee-sidebar{transform:translateX(110%)}
 .menu-open .sidebar,.menu-open .employee-sidebar{transform:translateX(0);visibility:visible}
 .mobile-menu{display:inline-flex;flex:none}
 .menu-open .mobile-backdrop{display:block;position:fixed;inset:0;background:#17362b66;z-index:40}
 html[data-page=communications] .topbar{flex-basis:auto;flex-shrink:0}
 .topbar{height:auto;min-height:64px;padding:12px 18px;gap:10px;flex-wrap:wrap}
 .crumb{flex:1}.top-actions{margin-inline-start:auto}
 main{padding:24px 22px 32px}
}
@media(max-width:640px){
 main{padding:20px 16px 28px}
 .topbar{padding:10px 12px;gap:8px}.top-actions{gap:4px}.top-actions .role-select{width:110px;max-width:110px}
 .top-search{width:36px;min-width:36px;max-width:36px;padding:0;border:0;background:none;margin:0;justify-content:center}.top-search :is(span,kbd){display:none}
 .page-heading{align-items:flex-start;flex-direction:column;gap:12px}.heading-actions{width:100%}
 .form-grid{grid-template-columns:minmax(0,1fr)}.form-grid>.full{grid-column:1/-1}
 .form-footer{gap:8px}.form-footer .btn{white-space:normal}
 .account-settings .panel-body{padding:18px}.account-identity h3{font-size:19px}
 #dialog:not(.ux-notification-panel):not(.column-filter-popup){width:calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:18px}
 #dialog .dialog-head{align-items:flex-start}.dialog-body :is(.form-grid,.comm-fields,.setup-editor-fields,.facts){grid-template-columns:minmax(0,1fr)}
 #dialog .dialog-body :is(.full,fieldset){min-width:0;grid-column:1/-1}
 .settings-tabs{display:flex;gap:6px}.settings-tabs .tab{flex:1 1 130px;justify-content:center;white-space:normal}
 .context-control .demo-pill{margin-inline-start:0}
}
@media(max-width:420px){
 .topbar .crumb{flex-basis:calc(100% - 44px)}.topbar .top-search{margin-inline-start:auto}.topbar .top-actions{gap:8px}
 .context-control>small{flex-basis:100%}.context-control select{flex:1}
 .photo-controls .btn{flex:1 1 140px;justify-content:center}
}
@media(pointer:coarse) and (max-width:640px){
 .btn,.icon-btn,.tab,.ops-tab{min-height:44px}.icon-btn{min-width:40px}
 :where(#main,.dialog-body) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select,textarea){font-size:16px;min-height:44px}
}
@media(prefers-reduced-motion:reduce){.sidebar,.employee-sidebar{transition:none}}