/* One viewport layout for sand, mandala and every drawing exercise.
   Paper fills the available space beside or below its tool rail. */
html:has(body.is-space-embed .drawing-workspace){scrollbar-gutter:auto!important;overflow:hidden!important}
html body #page-module.page.active .drawing-exercise-prompt .drawing-exercise-reference{display:block!important;width:112px;height:112px;margin:0}
html body #page-module.page.active .drawing-exercise-prompt .drawing-exercise-reference img{object-fit:contain}
html body #page-module.page.active .drawing-exercise-prompt .drawing-exercise-reference-block{display:grid!important;grid-template-columns:112px minmax(0,1fr);gap:16px;min-width:0}
html body #page-module.page.active .drawing-sequence{flex:0 0 auto!important;max-height:26vh;overflow:auto;box-sizing:border-box}
html body #page-module.page.active:has(.drawing-workspace){overflow:hidden!important}
html body #page-module.page.active .drawing-workspace{width:100%!important;height:calc(100dvh - 132px)!important;min-height:0!important;max-height:none!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;padding:12px!important;margin:0 auto!important;overflow:hidden!important;box-sizing:border-box}
html body #page-module.page.active .drawing-random-exercise{display:flex!important;flex-direction:column!important;flex:1 1 0!important;width:100%!important;min-height:0!important;height:100%!important;gap:12px!important;overflow:hidden!important}
html body #page-module.page.active .drawing-exercise-prompt,html body #page-module.page.active .drawing-landscape-sequence{flex:0 0 auto!important;max-height:26vh;overflow:auto;box-sizing:border-box}
html body #page-module.page.active .drawing-studio{display:grid!important;grid-template-columns:52px minmax(0,1fr) 52px!important;grid-template-rows:minmax(0,1fr)!important;gap:10px!important;flex:1 1 0!important;min-width:0!important;min-height:0!important;height:100%!important;width:100%!important;max-width:1440px!important;margin:auto!important;padding:8px!important;overflow:hidden!important;box-sizing:border-box;position:relative}
html body #page-module.page.active .drawing-tool-rail{grid-column:1!important;grid-row:1!important;width:52px!important;min-width:0!important;min-height:0!important;align-self:center!important;max-height:100%!important;display:flex!important;flex-direction:column!important;gap:8px!important;overflow-y:auto!important;padding:0!important}
html body #page-module.page.active .drawing-tool-button{flex:0 0 42px!important;width:42px!important;height:42px!important;min-height:42px!important;padding:10px!important;margin:0 auto!important}
html body #page-module.page.active .drawing-guidance-button{padding:5px!important}
html body #page-module.page.active .drawing-canvas-panel{grid-column:2!important;grid-row:1!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-height:100%!important;aspect-ratio:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;overflow:hidden!important;box-sizing:border-box;container-type:normal!important}
html body #page-module.page.active .drawing-studio .drawing-canvas-panel canvas{width:var(--drawing-width,100%)!important;height:var(--drawing-height,auto)!important;max-width:100%!important;max-height:100%!important;min-height:0!important;aspect-ratio:auto!important;flex:none!important;margin:auto!important;display:block!important;object-fit:contain!important}
html body #page-module.page.active .drawing-tool-panel{position:absolute!important;left:70px!important;top:12px!important;z-index:10}
html body #page-module.page.active .drawing-tool-rail{position:static!important;transform:none!important}
/* Give the paper the workspace; tools sit beside it without a wooden mat. */
html body #page-module.page.active .drawing-studio{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;grid-template-columns:52px minmax(0,1fr)!important;padding:0!important}
html body.is-space-embed.app-shell-active:has(.drawing-workspace){padding:0!important;height:100dvh!important;overflow:hidden!important}
html body.is-space-embed.app-shell-active #page-module.page.active:has(.drawing-workspace){display:block!important;height:100dvh!important;min-height:0!important;max-height:100dvh!important;padding:0!important;overflow:hidden!important}
html body.is-space-embed.app-shell-active #page-module.page.active:has(.drawing-workspace) :is(.module-container,.module-hero){width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;padding:0!important;margin:0!important;overflow:hidden!important;flex:1 1 0!important}
html body.is-space-embed.app-shell-active #page-module.page.active .drawing-workspace{height:100%!important;padding:clamp(8px,2vw,24px)!important}
@media(max-width:650px){
 html body #page-module.page.active .drawing-exercise-prompt{grid-template-columns:1fr!important;gap:8px!important;max-height:34dvh!important}
 html body #page-module.page.active .drawing-exercise-prompt>.btn{justify-self:end}
 html body #page-module.page.active .drawing-exercise-prompt .drawing-exercise-reference-block{grid-template-columns:76px minmax(0,1fr);gap:10px}
 html body #page-module.page.active .drawing-exercise-prompt .drawing-exercise-reference{width:76px;height:76px}
 html body #page-module.page.active .drawing-workspace{height:calc(100dvh - 148px)!important;padding:6px!important}
 html body #page-module.page.active .drawing-studio{grid-template-columns:1fr!important;grid-template-rows:auto minmax(0,1fr)!important;gap:6px!important;padding:4px!important}
 html body #page-module.page.active .drawing-tool-rail{grid-column:1!important;grid-row:1!important;flex-direction:row!important;width:100%!important;justify-content:center!important;overflow-x:auto!important;overflow-y:hidden!important;gap:4px!important}
 html body #page-module.page.active .drawing-tool-rail{position:static!important;transform:none;left:auto!important;top:auto!important}
 html body #page-module.page.active .drawing-tool-button{margin:0!important;flex-basis:38px!important;width:38px!important;height:38px!important;min-height:38px!important}
 html body #page-module.page.active .drawing-canvas-panel{grid-column:1!important;grid-row:2!important}
 html body #page-module.page.active .drawing-tool-panel{left:8px!important;top:52px!important}
 html body.is-space-embed.app-shell-active #page-module.page.active .drawing-workspace{height:100%!important}
}
/* A phone turned sideways keeps drawing controls above the paper, with the
   existing breadcrumb available to leave the workspace. Other pages retain
   their normal navigation and sizing. */
@media(orientation:landscape) and (max-height:500px) and (max-width:1000px){
 html body.app-shell-active:has(#page-module.active .drawing-workspace) #main-nav{display:none!important}
 html body.app-shell-active:not(.is-space-embed) #page-module.active:has(.drawing-workspace){inset:0!important;height:100dvh!important;width:100%!important;padding:44px 8px 4px!important;border:0!important;border-radius:0!important}
 html body.app-shell-active:has(#page-module.active .drawing-workspace) .page-context-bar.is-nested{top:0!important;left:0!important;right:0!important;height:40px!important;min-height:0!important;border-radius:0!important}
 html body #page-module.page.active .drawing-workspace{height:calc(100dvh - 48px)!important;gap:4px!important;padding:0!important}
 html body #page-module.page.active .drawing-studio{grid-template-columns:1fr!important;grid-template-rows:42px minmax(0,1fr)!important;gap:4px!important}
 html body #page-module.page.active .drawing-tool-rail{grid-column:1!important;grid-row:1!important;flex-direction:row!important;width:100%!important;justify-content:center!important;gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important}
 html body #page-module.page.active .drawing-tool-button{margin:0!important}
 html body #page-module.page.active .drawing-canvas-panel{grid-column:1!important;grid-row:2!important}
 html body #page-module.page.active .drawing-tool-panel{left:8px!important;top:46px!important}
 html body #page-module.page.active .drawing-workspace>.drawing-footer-analysis{flex:none!important;height:40px!important;margin:4px auto!important;padding:8px 20px!important;font-size:14px!important}
}

/* Every tool has a visible label below its icon, including on narrow phones. */
html body #page-module.page.active .drawing-tool-button{display:flex!important;flex-direction:column!important;gap:3px!important;height:52px!important;min-height:52px!important;padding:5px 2px!important;flex-basis:52px!important;box-shadow:none!important;filter:none!important;text-shadow:none!important}
html body #page-module.page.active .drawing-tool-button svg{flex:none!important;width:21px!important;height:21px!important}
html body #page-module.page.active .drawing-tool-button>span{position:static!important;display:block!important;font:400 10px/1.2 system-ui!important;white-space:nowrap;color:inherit;pointer-events:none}
@media(max-width:650px){html body #page-module.page.active .drawing-tool-button{flex-basis:38px!important}html body #page-module.page.active .drawing-tool-panel{top:62px!important}}
@media(orientation:landscape) and (max-height:500px) and (max-width:1000px){html body #page-module.page.active .drawing-studio{grid-template-rows:52px minmax(0,1fr)!important}html body #page-module.page.active .drawing-tool-button{flex-basis:42px!important}html body #page-module.page.active .drawing-tool-panel{top:62px!important}}