.role-preview-control{display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:290px}.role-preview-control button{padding:8px 10px;min-height:36px;font-size:12px}.role-preview-label{flex-basis:100%;font-size:11px;font-weight:700;color:#fff0bf}#rolePreviewDialog{width:min(560px,calc(100vw - 24px));max-height:85dvh;overflow:auto}#rolePreviewDialog label{display:block;margin:14px 0}#rolePreviewDialog select{display:block;width:100%;min-width:0}#rolePreviewDialog h2{margin:0;font-size:22px}@media(max-width:850px){.role-preview-control{max-width:145px;gap:4px}.role-preview-control button{padding:6px;font-size:11px}.role-preview-label{font-size:10px}#appView header .header-right:has(.role-preview-control){flex-wrap:wrap}}

/* Keep administrator preview tools out of the mobile brand/profile row. */
@media(max-width:850px){
 #appView>header:has(.role-preview-control){display:grid;grid-template-columns:minmax(0,1fr) auto;height:auto;column-gap:8px;row-gap:8px}
 #appView>header:has(.role-preview-control)>.brand{grid-column:1;grid-row:1;min-width:0}
 #appView>header:has(.role-preview-control)>.header-right{display:contents}
 #appView>header:has(.role-preview-control) .profile-shortcut{grid-column:2;grid-row:1;justify-self:end}
 #appView>header .role-preview-control{grid-column:1 / -1;grid-row:2;max-width:none;width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:6px 0;border-top:1px solid #ffffff20}
 #appView>header .role-preview-label{flex:1 1 100%;font-size:11px;line-height:1.35;font-weight:500}
 #appView>header .role-preview-control button{min-height:36px;padding:6px 10px;font-size:11px;line-height:1.2;white-space:nowrap}
 #appView>header:has(.role-preview-control)>.history-search{grid-column:1 / -1;grid-row:3;width:100%;min-width:0;margin:0}
 #appView>header:has(.role-preview-control) .history-search input{min-width:0;width:100%}
}