/* UX005 grid-row/visualViewport approach, without lesson finish or player bars. */
.editor>.auto-tools{display:grid;grid-column:1/-1;grid-row:2;grid-template-columns:1fr 1fr;gap:4px}
.editor>.auto-tools button{min-width:0;min-height:48px;font-size:14px;padding:4px}
.editor:not(.compact) #stage{grid-row:3/5}
.editor:not(.compact) .colors{grid-row:3}
.editor:not(.compact) .tools{grid-row:4}
body:has(.editor.compact:not([hidden])){height:var(--color-vh,100dvh);min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
body:has(.editor.compact:not([hidden]))>header{grid-row:1}
body:has(.editor.compact:not([hidden]))>footer{grid-row:3;max-height:64px;overflow:auto;min-width:0}
.editor.compact{grid-row:2;position:relative;inset:auto;margin:0;height:100%;min-height:0;overflow:auto;grid-template-rows:48px 48px minmax(40px,1fr) 52px 48px}
.compact #stage{grid-row:3}
.compact .colors{grid-row:4}
.compact .tools{grid-row:5;height:48px;grid-template-rows:48px;grid-template-columns:repeat(6,minmax(0,1fr))}
.compact .palette-panels{bottom:108px;max-height:calc(100% - 164px)}
.editor>.auto-tools .child-icon{width:24px;height:24px;margin:0}
.editor>.auto-tools .picture-button{font-size:12px;gap:4px;overflow-wrap:anywhere}
.workspace-bar .child-icon{width:24px;height:24px;margin:0}
.workspace-bar button{padding:4px;min-width:104px;font-size:12px}
.compact .palette-actions .picture-button{min-height:48px}
/* COLOR-MOBILE-003: fullscreen rows must outrank the compact window :has rule. */
body.color-expanded:has(.editor.compact:not([hidden])){position:fixed;inset:0;height:var(--color-vh,100dvh);grid-template-rows:minmax(0,1fr) auto}
body.color-expanded>footer{display:flex!important;grid-row:2!important;background:#fffdf6;z-index:11}
.color-expanded .editor.compact{position:relative;inset:auto;grid-row:1;height:100%;min-height:0;overflow:auto}
@media(orientation:landscape) and (min-width:701px){
 .editor.compact{grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:48px minmax(40px,1fr) 100px}
 .compact .workspace-bar{grid-column:1;grid-row:1}
 .editor.compact>.auto-tools{grid-column:2;grid-row:1}
 .compact #stage{grid-column:1;grid-row:2/4}
 .compact .colors{grid-column:2;grid-row:2}
 .compact .palette-actions{grid-template-columns:repeat(4,minmax(0,1fr))}
 .compact .tools{grid-column:2;grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,48px);height:100px}
 .compact .palette-actions button{flex-direction:column;font-size:10px;gap:0;padding:2px}
 .compact .palette-panels{bottom:108px;max-height:calc(100% - 164px)}
}
@media print{body.color-expanded>footer{display:none!important}}