/* Mobile reflow contract: controls wrap; text remains visible. Diagram/document
   canvases and horizontally scrollable data tables retain their own geometry. */
@media (max-width:900px){
 :root[data-design] #page :is(.page-head,.oc-heading,.w35-heading,.r39-heading,.t20-heading,.c71-heading){
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px;min-width:0;max-width:100%;
 }
 :root[data-design] #page :is(.page-head,.oc-heading,.w35-heading,.r39-heading,.t20-heading,.c71-heading)>:is(div,h1){min-width:0;max-width:100%;flex:1 1 100%}
 :root[data-design] #page :is(.page-head,.oc-heading,.w35-heading,.r39-heading,.t20-heading,.c71-heading) h1{font-size:clamp(24px,6vw,28px)!important;line-height:1.25!important;overflow-wrap:anywhere;margin:0 0 8px}
 :root[data-design] #page :is(.page-head,.oc-heading,.w35-heading,.r39-heading,.t20-heading,.c71-heading) p{line-height:1.5;white-space:normal;overflow-wrap:anywhere}
 :root[data-design] #page :is(.oc-head-actions,.page-head>.actions,.w35-heading-actions){display:flex!important;flex-wrap:wrap!important;flex:1 1 100%;width:100%;min-width:0;gap:8px!important}
 :root[data-design] #page :is(.oc-head-actions,.page-head>.actions,.w35-heading-actions)>:is(button,a){
  display:inline-flex;flex:1 1 180px!important;width:auto!important;min-width:0!important;max-width:100%;height:auto!important;min-height:48px!important;
  font-size:15px!important;line-height:1.4!important;padding:12px 16px!important;white-space:normal!important;overflow-wrap:anywhere;gap:8px;justify-content:center;margin:0!important;
 }
 :root[data-design] #page .oc-head-actions>[data-oc=refresh]{display:inline-flex}
 :root[data-design] #page :is(.oc-head-actions,.page-head>.actions,.w35-heading-actions)>:is(button,a)>svg{flex:0 0 20px;width:20px;height:20px}
 :root[data-design] #page :is(.w35-heading,.r39-heading,.t20-heading,.c71-heading)>button{flex:1 1 180px;min-width:0;max-width:100%;height:auto;min-height:48px;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
 :root[data-design] #page :is(.card,.panel,.stack,.grow,.form,.form-grid,.w13-form-grid,.profile-fields,.m22-position-groups,.m22-position-grid,.t20-person,.r39-page,.d37-page,.c71-catalog,.o62-detail){min-width:0;max-width:100%;box-sizing:border-box}
 :root[data-design] #page :is(.card,.panel,.stack,.form-grid,.w13-form-grid,.profile-fields)>*{min-width:0}
 :root[data-design] :is(#page,#modal) :is(h1,h2,h3,h4,p,label,legend,summary){overflow-wrap:anywhere}
 :root[data-design] #page :is(.m22-position-grid,.m22-leader-controls){grid-template-columns:minmax(0,1fr)}
 :root[data-design] #page .m22-position-grid button{width:100%;max-width:100%;min-width:0;min-height:48px;height:auto;white-space:normal;line-height:1.4;overflow-wrap:anywhere;padding:12px}
 :root[data-design] #page .m22-position-groups h2{font-size:20px!important;line-height:1.35}
 :root[data-design] #page :is(.oc-toolbar,.oc-context){flex-wrap:wrap;gap:8px}
 :root[data-design] #page .oc-tabs{max-width:100%;min-width:0;flex-wrap:wrap}
 :root[data-design] #page .oc-tabs button{flex:1 1 140px;min-width:0;white-space:normal!important;overflow-wrap:anywhere;min-height:44px;height:auto;line-height:1.4}
 :root[data-design] #page .oc-search{min-width:0;flex:1 1 100%;width:100%;order:3}
 :root[data-design] #page .oc-search-results{min-width:0;width:100%;max-width:100%}
 :root[data-design] #page .oc-search-results :is(b,small){overflow-wrap:anywhere}
 :root[data-design] #page .oc-search-box input{width:100%;min-width:0}
 :root[data-design] #page .oc-inspector{max-width:100%}
 :root[data-design] #page :is(.oc-side-actions,.form-actions,.actions,.w13-editor-actions,.w35-actions,.w35-file-actions,.r39-detail-head,.t20-person-actions,.report-toolbar12,.w13-pagination,.r39-pager){flex-wrap:wrap;gap:8px;min-width:0;max-width:100%}
 :root[data-design] #page :is(.oc-side-actions,.form-actions,.actions,.w13-editor-actions,.w35-actions,.w35-file-actions,.report-toolbar12,.r39-pager)>:is(button,a),
 :root[data-design] #modal :is(.actions,.form-actions)>:is(button,a){min-width:0;max-width:100%;min-height:44px;height:auto;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
 :root[data-design] #page :is(.admin-tabs,.tabs,.t20-tabs,.w35-tabs,.w35-buckets,.r29-tabs){flex-wrap:wrap!important;min-width:0;max-width:100%;gap:8px}
 :root[data-design] #page :is(.admin-tabs,.tabs,.t20-tabs,.w35-tabs,.w35-buckets,.r29-tabs)>button{flex:1 1 140px;min-width:0;max-width:100%;min-height:44px;height:auto;white-space:normal!important;overflow-wrap:anywhere;line-height:1.4;padding:10px 12px}
 :root[data-design] #page :is(.w13-editor,.w13-detail-grid){grid-template-columns:minmax(0,1fr)}
 :root[data-design] #page :is(.w13-analytic-card .grow,.w13-open,.m22-brand-form label,.m22-brand-list label){min-width:0;max-width:100%}
 :root[data-design] #page .w13-open{width:100%}
 :root[data-design] #page :is(.w13-file,.file-row,.item,.admin-row>.row,.card>.row.between){flex-wrap:wrap;min-width:0;gap:12px}
 :root[data-design] #page :is(.file-row,.w13-file) :is(a,strong,small),
 :root[data-design] #page :is(.person-mini,.recipient-list button) :is(div,span,strong,b,small){min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal}
 :root[data-design] #page .person-mini{max-width:100%;min-width:0;white-space:normal;height:auto}
 :root[data-design] #page .file-row>.grow{flex-basis:150px}
 :root[data-design] #page :is(.w35-settings,.w35-filters,.r29-filters,.b26-filters,.analytics-filterbar,.c71-filters,.d37-fields){min-width:0;max-width:100%}
 :root[data-design] #page :is(.w35-settings,.w35-filters,.r29-filters,.b26-filters,.analytics-filterbar,.c71-filters,.d37-fields)>*{min-width:0;max-width:100%;box-sizing:border-box}
 :root[data-design] #page :is(.w35-filters,.r29-filters,.b26-filters,.analytics-filterbar)>button{height:auto;min-height:44px;white-space:normal;line-height:1.4}
 :root[data-design] #page :is(.r39-layout,.d37-card){max-width:100%;min-width:0}
 :root[data-design] #page .r39-row>div{flex-wrap:wrap;gap:6px}
 :root[data-design] #page .r39-row p{white-space:normal;overflow-wrap:anywhere}
 :root[data-design] #page :is(.badge,.w35-status,.w13-status){max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
 :root[data-design] #page :is(.d37-entry,.d37-actions button,.w35-settings>button){max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;min-height:44px;height:auto}
 :root[data-design] #modal :is(button:not(.icon-button),a){max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
 :root[data-design] #modal .dialog-body :is(.row,.form-actions){flex-wrap:wrap;gap:12px}
 :root[data-design] #modal :is(.row,.form-actions)>*{min-width:0;max-width:100%}
 :root[data-design] #modal :is(.recipient-list,.checklist-users) :is(label,button){white-space:normal;overflow-wrap:anywhere}
 :root[data-design] #page :is(.card,.panel)>img{max-width:100%;height:auto}
}
@media (max-width:600px){
 :root[data-design] #page .oc-tabs{width:100%}
 :root[data-design] #page .oc-tabs button{flex-basis:100%}
 :root[data-design] #page :is(.oc-head-actions,.page-head>.actions,.w35-heading-actions)>:is(button,a){flex-basis:100%!important;width:100%!important}
 :root[data-design] #page :is(.r29-filters,.b26-filters,.analytics-filterbar,.w35-filters){display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px}
 :root[data-design] #page :is(.r29-filters,.b26-filters,.analytics-filterbar,.w35-filters)>*{grid-column:auto!important;width:100%;margin:0}
 :root[data-design] #page :is(.w13-file,.w13-editor-actions)>button{flex:1 1 100%}
 :root[data-design] #page .t20-person-actions{margin-left:0!important}
 :root[data-design] #page .oc-heading .oc-eyebrow{font-size:11px;letter-spacing:.08em}
 :root[data-design] #page .oc-workspace{min-height:540px;height:75dvh}
}