/* Shared layout for the garage and room. Keep the scene large and tools compact. */
body.garage .topbar{height:48px;min-height:48px;padding:8px 12px}
body.garage .editor-layout{display:grid;grid-template-columns:208px minmax(0,1fr) 240px;max-width:2200px;margin:auto;padding:12px;gap:12px;align-items:start}
body.garage .workspace{grid-column:2;grid-row:1;position:sticky;top:12px;min-width:0;container-type:normal}
body.garage .studio{display:contents}
body.garage .catalog{grid-column:1;grid-row:1;position:sticky;top:12px;max-height:calc(100dvh - 72px);overflow:auto}
body.garage .note-column{grid-column:3;grid-row:1;position:sticky;top:12px;display:flex;flex-direction:column;gap:8px;max-height:calc(100dvh - 72px);overflow:auto;min-width:0}
body.garage .note-column .notebook,body.garage .note-column .catalog{position:static;max-height:none;overflow:visible;grid-column:auto;grid-row:auto}
body.garage .workspace .canvas-wrap{width:100%;max-width:none;height:var(--scene-height,calc(100dvh - 160px));aspect-ratio:auto;margin:0;border:0;outline:0}
body.garage .workspace canvas#garden,body.garage .workspace canvas#room{width:100%;height:100%;aspect-ratio:auto;display:block}
body.garage .item-controls{background:var(--ui-panel);padding:8px;box-shadow:3px 4px #26332b45;min-width:0}
body.garage .item-controls .inspector{padding:0;min-height:0;margin:0;border:0;background:none;box-shadow:none}
body.garage .item-controls #placementControls{display:grid;grid-template-columns:minmax(0,1fr) 77px;padding:0;min-height:0;margin:8px 0 0;gap:6px;border:0;background:none;box-shadow:none}
body.garage .placement-controls label{display:flex;align-items:center;gap:4px;min-width:0;white-space:nowrap;font-size:11px}
body.garage .placement-controls #supportParent,body.garage .placement-controls #supportLevel{width:0;min-width:0;max-width:none;flex:1}
body.garage .arrange-controls{display:grid;grid-template-columns:1fr;padding:8px;gap:7px;margin:0;min-height:0}
body.garage .arrange-controls .weather-controls{display:grid;grid-template-columns:1fr;gap:4px;border:0;padding:0;margin:0;width:100%}
body.garage .arrange-controls .scene-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
body.garage .weather-controls>label{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:4px;white-space:nowrap;font-size:11px}
body.garage .weather-controls select{width:100%;min-width:0;max-width:100%;flex:none}
body.garage .actor-toggles{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;grid-column:1/-1;min-width:0}
body.garage .actor-toggles label{display:inline-flex;align-items:center;justify-content:flex-start;gap:4px;white-space:nowrap;width:auto;font-size:11px;margin:0;flex:none}
body.garage .actor-toggles input{width:14px;height:14px;margin:0}
body.garage .workspace-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 20px;min-height:36px;margin-top:8px;padding:6px 8px;border:0;background:var(--ui-panel);box-shadow:3px 4px #26332b45;font-size:11px;container-type:inline-size}
body.garage .workspace-toolbar>*{border:0!important;margin:0;min-width:0;min-height:24px;padding:0!important;flex:none}
body.garage .workspace-toolbar .toolbar-view,body.garage .workspace-toolbar .toolbar-layout{display:flex;align-items:center;gap:12px;flex:none}
body.garage .workspace-toolbar .toolbar-layout{margin-left:auto}
body.garage .workspace-toolbar .tool-group{display:flex;align-items:center;gap:4px}
body.garage .workspace-toolbar .tool-options{width:auto;gap:4px}
body.garage .workspace-toolbar .tool-options label{display:flex;align-items:center;gap:4px;font-size:11px;margin:0;white-space:nowrap}
body.garage .workspace-toolbar .layout-transfer{display:flex;gap:4px;margin-left:0}
body.garage .workspace-toolbar button,body.garage .workspace-toolbar summary{font-size:11px;white-space:nowrap}
body.garage .workspace-toolbar .edit-camera-controls{display:flex;align-items:center;flex-wrap:nowrap;width:auto;gap:7px;padding:0;border:0}
body.garage .edit-camera-controls>div{display:flex;align-items:center;gap:3px;flex:none}
body.garage .edit-camera-controls>div+div{border-left:1px solid #d6d0b53b;padding-left:7px}
body.garage .edit-camera-controls button{width:24px!important;min-width:24px!important;height:24px!important;min-height:24px!important;padding:0!important;line-height:24px!important;font-size:11px!important}
body.garage .edit-camera-controls button[data-edit-camera="reset"]{width:36px!important;min-width:36px!important;font-size:11px!important}
body.garage .edit-camera-controls .camera-pan button:last-child,body.garage .edit-camera-controls .camera-zoom button:last-child{width:24px!important;min-width:24px!important;font-size:11px!important}
body.garage .workspace-toolbar .tool-reset,body.garage .workspace-toolbar .layout-transfer{border-left:1px solid #d6d0b53b!important;padding-left:8px!important}
body.garage .workspace>.inspector{padding:5px 8px;min-height:32px;height:auto;margin-bottom:8px;gap:6px}
body.garage .inspector .hint{display:none}
body.garage .inspector #objectControls{display:flex;align-items:center;gap:6px;margin:0 0 0 auto}
body.garage .inspector #objectControls[hidden]{display:none}
body.garage .inspector h2{font-size:11px;line-height:1.5;margin:0}
body.garage .inspector .section-title{margin:0;min-width:0}
body.garage .inspector .control-row{display:flex;gap:4px;margin:0}
body.garage .inspector .size-control,body.garage .inspector .size-control>div{margin:0;gap:4px;width:auto;flex:none}
body.garage .layout-transfer .transfer-body{width:min(280px,calc(100vw - 32px))}
body.garage.editor .catalog{display:flex;flex-direction:column;height:calc(100dvh - 72px);max-height:calc(100dvh - 72px);overflow:hidden}
body.garage.editor .catalog>h2,body.garage.editor .catalog>input,body.garage.editor .catalog>.categories{flex:none}
body.garage.editor .catalog .asset-grid{flex:1;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;align-content:start}

@container(max-width:580px){
 body.garage .workspace-toolbar .toolbar-view,body.garage .workspace-toolbar .toolbar-layout{width:100%;margin-left:0;justify-content:flex-start}
 body.garage .workspace-toolbar .toolbar-layout{position:relative}
 body.garage .workspace-toolbar .toolbar-layout>.layout-transfer:first-child{border-left:0!important;padding-left:0!important}
 body.garage .workspace-toolbar .layout-transfer .transfer{position:static}
 body.garage .workspace-toolbar .transfer-body{left:0;right:auto;max-width:100%}
}

@media(max-width:900px){
 body.garage .editor-layout{grid-template-columns:1fr;padding:8px;gap:8px}
 body.garage .workspace{grid-column:1;grid-row:1;position:static}
 body.garage .workspace .canvas-wrap{height:clamp(320px,58svh,540px)}
 body.garage .studio{display:flex;flex-direction:column;gap:8px;grid-column:1;grid-row:2;max-height:none;overflow:visible;padding:0}
 body.garage .catalog,body.garage .note-column{position:static;max-height:none;overflow:visible;grid-column:1;grid-row:auto}
 body.garage .editor-layout>.catalog{grid-row:2}
 body.garage .editor-layout>.note-column{grid-row:3}
 body.garage .studio .catalog{order:0}
 body.garage .studio .note-column{order:1}
 body.garage .workspace>.arrange-controls{margin-bottom:8px}
 body.garage .arrange-controls .weather-controls{grid-template-columns:repeat(3,minmax(0,1fr))}
 body.garage .weather-controls>label{grid-template-columns:minmax(0,1fr);gap:3px}
 body.garage .catalog .asset-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 body.garage.editor .catalog{height:clamp(340px,55svh,560px);max-height:none}
}
@media(min-width:700px) and (max-width:900px) and (max-height:550px){
 body.garage .editor-layout{grid-template-columns:150px minmax(0,1fr) 180px}
 body.garage .workspace{grid-column:2;grid-row:1;position:sticky;top:8px}
 body.garage .workspace .canvas-wrap{height:var(--scene-height,calc(100dvh - 150px))}
 body.garage .studio{display:contents}
 body.garage .catalog{grid-column:1;grid-row:1}
 body.garage .note-column{grid-column:3;grid-row:1}
 body.garage .editor-layout>.catalog{grid-row:1}
 body.garage .editor-layout>.note-column{grid-row:1}
 body.garage .catalog,body.garage .note-column{position:sticky;top:8px;max-height:calc(100dvh - 64px);overflow:auto}
 body.garage .note-column .catalog{position:static;max-height:none;overflow:visible;grid-column:auto;grid-row:auto}
 body.garage .arrange-controls .weather-controls{grid-template-columns:1fr}
 body.garage .weather-controls>label{grid-template-columns:28px minmax(0,1fr)}
 body.garage.editor .catalog{height:calc(100dvh - 64px);max-height:calc(100dvh - 64px)}
 body.garage.editor .catalog>.categories{max-height:96px;overflow-y:auto;overscroll-behavior:contain}
 body.garage .catalog .asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.garage .scene-tabs button{font-size:10px;padding:0 2px!important}
}
@media(max-width:360px){
 body.garage .workspace-toolbar{gap:5px 12px;font-size:10px}
 body.garage .workspace-toolbar .toolbar-layout{gap:8px}
 body.garage .workspace-toolbar .edit-camera-controls{gap:4px}
 body.garage .edit-camera-controls>div+div{padding-left:4px}
 body.garage .workspace-toolbar .tool-reset,body.garage .workspace-toolbar .layout-transfer{padding-left:5px!important}
 body.garage .workspace-toolbar button,body.garage .workspace-toolbar summary,body.garage .workspace-toolbar .tool-options label{font-size:10px}
}