/* Expanded canvas keeps docked tools in the same fullscreen element. */
header{height:60px}main{padding:16px 20px 12px}.sessionbar{margin-bottom:15px}#title{font-size:24px;padding:3px 0}.workspace{height:calc(100dvh - 174px);min-height:520px;max-height:none}.canvas-wrap{min-height:260px}.board-toolbar{height:auto;min-height:55px;gap:7px;flex-wrap:wrap}.board-toolbar button{font-size:12px;padding:8px}.board-tag{display:none}.segmented button{font-size:13px}.board-toolbar [aria-pressed=true]:not(#fullscreenBtn){background:#eaf4dd}.board-toolbar #fullscreenBtn{margin-left:auto;background:#153444;color:white}.fullscreen-only{display:none}.new-people{padding:8px;background:#f0f5f7;border:1px solid #dce5e9;border-radius:7px;margin-bottom:12px}.new-people summary{font-size:13px;font-weight:700;cursor:pointer;margin-bottom:8px}.new-people label{font-size:12px;margin:7px 0}.new-people select{font-size:13px;padding:5px;margin:4px 0}.person-controls{padding:12px;background:#f0f5f7;border-radius:8px;margin-bottom:18px}.person-controls label{font-size:13px;margin-bottom:10px}.person-controls .muted{font-size:12px;margin:0}.tools button span{min-width:20px;font-size:16px}.tool-group button span[style*="edf5f4"],.tool-group button span[style*="ffffff"]{color:#456170!important}
.workspace.properties-collapsed{grid-template-columns:205px minmax(0,1fr)}.workspace.properties-collapsed>.details{display:none}.workspace.toolkit-collapsed{grid-template-columns:minmax(0,1fr) 300px}.workspace.toolkit-collapsed>.toolbox{display:none}.workspace.properties-collapsed.toolkit-collapsed{grid-template-columns:minmax(0,1fr)}
.workspace.expanded{position:fixed;inset:0;z-index:100;height:100dvh;width:100vw;min-height:0;max-height:none;border:0;border-radius:0;background:#fff;grid-template-columns:205px minmax(0,1fr) 300px}.workspace.expanded.properties-collapsed{grid-template-columns:205px minmax(0,1fr)}.workspace.expanded.toolkit-collapsed{grid-template-columns:minmax(0,1fr) 300px}.workspace.expanded.properties-collapsed.toolkit-collapsed{grid-template-columns:minmax(0,1fr)}.workspace.expanded .board-section{min-height:0}.workspace.expanded .canvas-wrap{min-height:0}.workspace.expanded .toolbox,.workspace.expanded .details{max-height:100dvh;overflow:auto}.workspace.expanded .fullscreen-only{display:inline-block}.workspace.expanded .exportbar{padding:8px 14px}.workspace.expanded .fieldbar{padding:7px 14px}.workspace.expanded .fieldbar label{display:flex;align-items:center;gap:8px}.workspace.expanded .fieldbar select{margin:0}.workspace-expanded{overflow:hidden}#toast{z-index:200}
@media(max-width:850px){.workspace{height:auto;min-height:520px}.workspace.properties-collapsed{grid-template-columns:150px minmax(0,1fr)}.workspace.toolkit-collapsed{grid-template-columns:1fr}.workspace.expanded{grid-template-columns:150px minmax(0,1fr)}.workspace.expanded.properties-collapsed{grid-template-columns:150px minmax(0,1fr)}.workspace.expanded.toolkit-collapsed{grid-template-columns:1fr}.workspace.expanded>.details{position:absolute;right:0;top:58px;bottom:0;width:min(310px,80vw);background:white;z-index:5;box-shadow:-10px 0 25px #0002}.workspace.expanded .details #sessionPanel{display:block}.workspace.expanded .toolbox{max-height:100dvh}.workspace.expanded .board-toolbar{min-height:58px}.workspace.expanded .exportbar>span{display:none}}
@media(max-width:560px){main{padding:12px 8px}.workspace.properties-collapsed{grid-template-columns:1fr}.workspace.expanded{grid-template-columns:1fr}.workspace.expanded.properties-collapsed{grid-template-columns:1fr}.workspace.expanded>.toolbox{position:absolute;top:110px;left:0;bottom:0;width:155px;z-index:4;background:white;max-height:none;box-shadow:8px 0 20px #0002}.workspace.expanded .tool-group button{width:100%}.workspace.expanded .fieldbar label{display:block}.workspace.expanded .exportbar button{font-size:11px}.workspace.expanded .exportbar select{font-size:12px}.workspace.expanded #fullscreenSave{display:none}.workspace.expanded .board-toolbar{padding:7px}.workspace.expanded .canvas-wrap{min-height:150px}}
/* Compact normal-browser header and session row. The expanded workspace keeps its own controls. */
body:not(.workspace-expanded) header{height:54px;padding:0 22px}
body:not(.workspace-expanded) .brand{font-size:17px;gap:9px}
body:not(.workspace-expanded) .brandmark{font-size:25px}
body:not(.workspace-expanded) .edition{font-size:9px;margin-left:5px;padding-left:12px}
body:not(.workspace-expanded) main{padding:12px 20px 10px}
body:not(.workspace-expanded) .sessionbar{margin-bottom:10px;gap:12px}
body:not(.workspace-expanded) .session-copy .eyebrow{display:none}
body:not(.workspace-expanded) #title{font-size:23px;line-height:1.2;padding:0}
body:not(.workspace-expanded) .subline{font-size:12px;gap:8px;margin-top:3px}
body:not(.workspace-expanded) .session-actions{gap:5px}
body:not(.workspace-expanded) .session-actions button{font-size:12px;padding:7px 9px}
body:not(.workspace-expanded) .workspace{height:min(1200px,calc(100dvh - 160px))}
@media(max-width:850px){body:not(.workspace-expanded) main{padding:10px 12px 8px}body:not(.workspace-expanded) .workspace{height:auto}}
@media(max-width:560px){body:not(.workspace-expanded) header{height:50px;padding:0 12px}body:not(.workspace-expanded) .brand{font-size:14px}body:not(.workspace-expanded) .brandmark{display:none}body:not(.workspace-expanded) main{padding:9px 8px 7px}body:not(.workspace-expanded) #title{font-size:20px}body:not(.workspace-expanded) .sessionbar{margin-bottom:8px}body:not(.workspace-expanded) .session-actions button{font-size:11px;padding:6px 7px}}
body:not(.workspace-expanded) .session-copy{display:block;flex:1 1 min(1100px,100%);min-width:0}
body:not(.workspace-expanded) .session-meta{display:flex;align-items:baseline;gap:12px;min-height:16px}
body:not(.workspace-expanded) .session-copy .eyebrow{display:block;flex:0 0 auto;font-size:9px;letter-spacing:1.2px;white-space:nowrap}
body:not(.workspace-expanded) .session-copy #title{display:block;width:100%;min-width:0;max-width:1100px}
body:not(.workspace-expanded) .session-copy .subline{margin:0;white-space:nowrap}
body:not(.workspace-expanded) .session-actions{margin-left:auto;flex:0 0 auto}
@media(max-width:1100px){body:not(.workspace-expanded) .session-meta{gap:8px}body:not(.workspace-expanded) .session-copy #title{font-size:21px}}
@media(max-width:850px){body:not(.workspace-expanded) .session-meta{flex-wrap:wrap;row-gap:2px}body:not(.workspace-expanded) .session-copy .subline{flex-basis:auto}}
@media(max-width:560px){body:not(.workspace-expanded) .sessionbar{display:block}body:not(.workspace-expanded) .session-copy{display:block}body:not(.workspace-expanded) .session-meta{gap:6px}body:not(.workspace-expanded) .session-copy .eyebrow{display:block;font-size:8px}body:not(.workspace-expanded) .session-copy #title{width:100%;min-width:0;max-width:none}body:not(.workspace-expanded) .session-copy .subline{margin-top:2px}body:not(.workspace-expanded) .session-actions{margin-top:7px}}
@media(min-width:851px){body:not(.workspace-expanded) .sessionbar{display:flex;flex-wrap:nowrap;align-items:center;gap:14px}body:not(.workspace-expanded) .session-copy{display:flex;flex:1 1 auto;align-items:center;gap:16px;min-width:0}body:not(.workspace-expanded) .session-meta{flex:0 0 auto;white-space:nowrap}body:not(.workspace-expanded) .session-copy #title{flex:1 1 auto;width:100%;min-width:0;max-width:none}body:not(.workspace-expanded) .session-actions{flex:0 0 auto;margin:0}}
/* Put the drill title above the board details at every viewport width. */
@media(min-width:851px){body:not(.workspace-expanded) .session-copy{flex-direction:column;align-items:stretch;gap:3px}body:not(.workspace-expanded) .session-meta{flex:0 0 auto}body:not(.workspace-expanded) .session-copy #title{flex:0 0 auto}}