/* The mode selector stays in the navigation, including collapsed navigation. */
.tool-personal .sidebar { display:flex; flex-direction:column; overflow-y:auto; }
.tool-personal .sidebar nav { flex:0 0 auto; }
.tool-personal #staffModeHome { padding:var(--zg-space-3); margin-top:auto; }
.staff-demo-toolbar { display:flex; flex-wrap:wrap; gap:var(--zg-space-2); }
.staff-demo-toolbar .zg-btn { flex:1; }
#staffModeLabel { flex-basis:100%; color:var(--zg-text-on-dark); font-size:var(--zg-font-caption); }
.tool-personal .sidebar-foot { position:static; padding:var(--zg-space-3); }
.nav-collapsed #staffModeHome { padding:var(--zg-space-1); }
.nav-collapsed .staff-demo-toolbar { flex-direction:column; }
.nav-collapsed .staff-demo-toolbar .zg-btn { padding-inline:var(--zg-space-1); }
.nav-collapsed #staffModeLabel { display:none; }
.staff-demo-notice { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--zg-space-3); margin-bottom:var(--zg-space-4); grid-column:1 / -1; }
.staff-demo-notice p { margin:0; }
.staff-demo-notice[hidden] { display:none; }
@media(max-width:760px){.tool-personal #staffModeHome{margin-top:0}.staff-demo-toolbar{max-width:100%}.staff-demo-toolbar .zg-btn{flex:0 1 auto}}
/* The demo explanation must precede the editor, whose rows are explicit. */
.staff-editor-open:has(.staff-demo-notice:not([hidden])) > .staff-demo-notice { grid-row:2; }
.staff-editor-open:has(.staff-demo-notice:not([hidden])) > .page-header { grid-row:3; }
.staff-editor-open:has(.staff-demo-notice:not([hidden])) > .card,
.staff-editor-open:has(.staff-demo-notice:not([hidden])) > .dialog[open]:not(:modal) { grid-row:4; }

/* Keep the demo notice subordinate to the workspace on wide screens. */
.tool-personal .staff-demo-notice { padding:var(--zg-space-2) var(--zg-space-3); gap:var(--zg-space-2) var(--zg-space-4); }
.tool-personal .staff-demo-notice p { flex:1 1 28rem; font-size:var(--zg-font-body-sm); }
.tool-personal .staff-demo-notice #staffDemoReset { flex:0 0 auto; }