/* LEONARDO WORKSHOP 0.5 — Group drop targets, title alignment, scroll-free panels and nested Layers. */
:root{--workshop-ink:#262626;--workshop-panel:#f2e7d4}
/* Groups are translucent regions, not cards. The label joins the upper right border precisely. */
#groupsLayer .group{box-sizing:border-box;border:2px solid #faf9f5;border-radius:22px;overflow:visible;isolation:isolate;transition:background-color .15s ease,border-color .15s ease}
#groupsLayer .group-title{position:absolute!important;z-index:3;right:-2px!important;top:auto!important;bottom:calc(100% - 2px)!important;max-width:min(70%,360px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;padding:10px 21px 9px!important;min-height:37px;line-height:17px!important;font-size:12px!important;letter-spacing:.3px;border:2px solid currentColor;border-bottom:0!important;border-radius:22px 22px 0 0!important;color:#faf9f5!important;background:#262626!important;box-shadow:none;pointer-events:auto;cursor:grab;user-select:none}
#groupsLayer .group-title:active{cursor:grabbing}
#groupsLayer .group-drop-hint{opacity:0;position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);padding:13px 17px;border-radius:13px;background:#262626;color:#faf9f5;font-size:12px;font-weight:800;letter-spacing:.6px;white-space:nowrap;pointer-events:none;transition:opacity .13s ease;box-shadow:0 10px 24px #221c1847}
#groupsLayer .group:before{content:'';position:absolute;inset:0;z-index:1;border-radius:20px;background:#2626264d;opacity:0;transition:opacity .13s ease;pointer-events:none}
#groupsLayer .group.group-drop-ready{border-color:#262626!important}
#groupsLayer .group.group-drop-ready:before,#groupsLayer .group.group-drop-ready .group-drop-hint{opacity:1}
/* Main tools and Properties are fitted to their available space; only Layers scrolls. */
#sidebar{overflow:hidden;min-height:0}
#sidebar>.aside-head{flex:0 0 auto;padding:11px 17px 7px;min-height:46px}
#toolsView,#inspectorView{overflow:hidden!important;overscroll-behavior:contain;min-height:0;flex:1 1 auto;padding:7px 15px 7px!important;scrollbar-width:none!important}
#toolsView::-webkit-scrollbar,#inspectorView::-webkit-scrollbar{display:none!important}
.panel-scaler,.property-page{transform-origin:top left;box-sizing:border-box}
#toolsView .aside-hint{font-size:10px;line-height:1.4;margin:0 0 8px}
#toolsView .tools{gap:5px}
#toolsView .tools button{height:45px;flex-shrink:0;border-radius:22px;padding:0 8px 0 3px;font-size:12px}
#toolsView .tools button i{width:38px;height:39px;border-radius:17px;font-size:17px;flex:none}
#toolsView .quick-tools{margin-top:7px;gap:10px}
#toolsView .quick-tools button{height:35px}
#toolsView .aside-divider{margin:11px 0}
#toolsView .utility{gap:5px}
#toolsView .utility button{min-height:32px;padding:6px 5px;font-size:10px}
#sidebar .layers-panel{padding:10px 13px 7px;flex:0 0 clamp(115px,22vh,215px);min-height:90px;max-height:32%;}
#sidebar .layers-panel .hierarchy{overflow-y:auto!important;min-height:0;max-height:initial;scrollbar-width:thin;scrollbar-color:#b8a58c transparent;flex:1}
#sidebar .aside-bottom{flex:0 0 auto;padding:8px 15px;min-height:32px}
#sidebar .hierarchy .nested-entry{display:flex;gap:6px;align-items:center;margin:2px 0;padding-right:8px;min-width:0;height:33px;background:transparent;border:0;color:#262626}
#sidebar .hierarchy .nested-entry.active{background:#e0d6c3;color:#262626;font-weight:800}
#sidebar .hierarchy .nested-entry:hover{background:#e6d8c3}
#sidebar .hierarchy .layer-open-canvas{flex:0 0 26px;width:26px!important;height:27px;min-height:27px;padding:0!important;border-radius:8px;border:1px solid #d5c6ae;background:#f6eedf;color:#262626}
/* Property inspector: choose a category rather than scrolling through a tall control stack. */
#inspectorView{display:flex;flex-direction:column;gap:4px}
#inspectorView .property-nav{display:flex;align-content:flex-start;gap:4px;flex-wrap:wrap;flex:0 0 auto;padding:2px 0 8px;border-bottom:1px solid #d5ccba;max-height:107px;overflow:hidden}
#inspectorView .property-nav button{color:#262626;background:#e6d9c7;border:1px solid #d4c5b1;border-radius:10px;min-height:28px;padding:4px 8px;font-size:9px;font-weight:800;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
#inspectorView .property-nav button.active{background:#262626;color:#faf9f5;border-color:#262626}
#inspectorView .property-pages{flex:1;min-height:0;overflow:hidden;position:relative}
#inspectorView .property-page{display:block}
#inspectorView .property-page.hidden{display:none!important}
#inspectorView .inspector-section{border-bottom:0;padding:12px 0 3px}
#inspectorView .property-page>div.inspector-section{padding-top:9px}
@media(max-width:750px){#sidebar .layers-panel{max-height:175px}#sidebar .aside-head{min-height:40px}#toolsView .tools button{height:42px}#toolsView .tools button i{height:37px}}
@media(prefers-reduced-motion:reduce){#groupsLayer .group,#groupsLayer .group:before,#groupsLayer .group-drop-hint{transition:none}}

/* A group title whose top would be outside the visible canvas moves just inside the outline. */
#groupsLayer .group.group-title-inside .group-title{top:-2px!important;bottom:auto!important;border-radius:0 0 18px 18px!important;border:2px solid #262626!important;border-top:0!important}
/* Screen-space drag feedback sits above content; it cannot be covered by other tools. */
.group-drop-overlay{position:absolute;z-index:450;pointer-events:none;display:grid;place-items:center;border:2px solid #262626b0;border-radius:22px;background:#26262650;box-shadow:inset 0 0 0 2px #faf9f544;transition:background-color .12s ease}
.group-drop-overlay.hidden{display:none!important}
.group-drop-overlay span{background:#262626;color:#faf9f5;font-size:12px;letter-spacing:.7px;font-weight:800;padding:13px 17px;border-radius:13px;box-shadow:0 5px 20px #2626264d;text-align:center;white-space:nowrap}
@media(max-width:650px){.group-drop-overlay span{font-size:10px;padding:9px 12px}}