/* Responsive signed-in workspace: shrink flex/grid children rather than the page. */
main,header,nav,.heading,.toolbar,.switch-family,.columns>*{min-width:0}
img{max-width:100%}
.switch-family{flex-wrap:wrap;max-width:100%}
.heading>div{min-width:0}
@media(max-width:800px){
 html,body{width:100%;margin:0}
 main{width:100%;max-width:100%;padding:24px 16px 60px}
 header{flex-wrap:wrap;gap:12px;width:100%}
 .brand{flex:1 1 180px;max-width:calc(100% - 96px)}
 .brand-logo{width:100%;max-width:280px;height:auto}
 #account{flex:0 1 auto;gap:8px;flex-wrap:wrap;max-width:100%}
 .heading,.heading>div{width:100%;max-width:100%}
 .heading p,h1,h2,h3,.panel p,.member,.record-footer{overflow-wrap:anywhere}
 .switch-family{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:10px}
 .switch-family label{grid-column:1/-1;width:100%}
 .switch-family>*{min-width:0;max-width:100%;white-space:normal}
 .toolbar{flex-wrap:wrap;align-items:stretch;width:100%}
 .date-label{flex:1 1 100%;min-width:0;justify-content:space-between}
 .date-label input{width:auto;flex:1 1 0;max-width:240px;min-width:0}
 .toolbar>.primary,.toolbar>button{margin-left:0;max-width:100%;white-space:normal}
 nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:100%}
 nav button{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;padding:10px 8px}
 .summary{grid-template-columns:repeat(2,minmax(0,1fr))}
 .columns{grid-template-columns:minmax(0,1fr)}
 .panel,.record,.report-row,.empty{min-width:0;max-width:100%}
 .actions{flex-wrap:wrap;max-width:100%}
 .actions>*{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
 .filters label{min-width:0}
 input,select,textarea{font-size:16px;max-width:100%}
 dialog{max-width:calc(100% - 24px);width:calc(100% - 24px);padding:18px}
 .profile-grid,.form-grid{grid-template-columns:minmax(0,1fr)}
 table{max-width:100%}
 .meal-scroll,.admin-scroll{max-width:100%;min-width:0;overflow-x:auto}
 footer{overflow-wrap:anywhere}
}
@media(max-width:360px){header{align-items:center}.brand{max-width:calc(100% - 88px)}.summary>div{padding:12px}.record,.panel{padding:16px}}
