/* LEONARDO WORKSHOP — STUDIO 0.4 | Layered editing, hierarchy and precision */
:root{--ws-accent:#262626;--ws-outline:#262626;--ws-panel:#f2e7d4;--ws-border:#d5ccba}
/* Canvas foreground layering. Connected lines disappear *under* their destination tools. */
#world{isolation:isolate}
#connections{z-index:1!important;pointer-events:none}
#groupsLayer{position:relative;z-index:0}
#itemsLayer{position:relative;z-index:2}
#alignmentGuides{position:relative;z-index:11;pointer-events:none}
.snap-guide{position:absolute;background:#262626;opacity:.7;pointer-events:none;box-shadow:0 0 0 1px #faf9f5a5}
.snap-guide.v{height:90000px;width:1px;top:-45000px}
.snap-guide.h{width:90000px;height:1px;left:-45000px}
/* Selected objects are clearly distinguishable, including multi-selection. */
.item.multi-selected .item-body{outline:3px solid var(--ws-outline)!important;outline-offset:5px;box-shadow:0 0 0 7px #26262620!important}
.item.multi-selected .drag-corner{display:block!important}
.item.selected .item-body{outline:2px solid var(--ws-outline);outline-offset:3px}
.item.selected.spreadsheet .item-body{outline-offset:2px}
.item.spreadsheet .size-grip,.item.document .size-grip{display:none!important}
/* Spreadsheets are data-sized, never squeezed into an arbitrary visual rectangle. */
.item.spreadsheet .item-body{overflow:hidden;box-shadow:0 2px 6px #40372b17}
.item.spreadsheet .sheet-table.full-grid{table-layout:fixed;min-width:100%;width:100%;height:100%}
.item.spreadsheet .sheet-table.full-grid tbody tr{height:30px}
.item.spreadsheet .full-grid td input:not([type=checkbox]){min-height:23px}
/* A custom precision inspector without raw coordinates. */
.sheet-size-note{padding:12px 14px;background:#e8dbc9;border-radius:10px;color:#6f6356;line-height:1.6}
.inspector-section .control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.inspector-section .control-grid button{min-width:0;width:100%;padding:10px 5px;min-height:44px;line-height:1.25;font-size:10px;overflow-wrap:anywhere;white-space:normal;letter-spacing:0}
.page-actions button{display:flex;justify-content:center;align-items:center;height:42px;overflow:hidden}
.page-actions svg{display:block;width:21px;height:21px;flex:none}
.palette-custom .inspect-field input[type=color]{display:block;width:100%}
/* Multi-selection toolbar lives above the canvas, like a restrained floating command bar. */
.multi-bar{position:absolute;z-index:650;top:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;max-width:calc(100% - 20px);padding:9px 10px;background:var(--ws-panel);box-shadow:0 8px 28px #372f2730;border:1px solid var(--ws-border);border-radius:13px;color:var(--ws-accent)}
.multi-bar span{font-size:10px;letter-spacing:1px;font-weight:800;margin-right:4px;white-space:nowrap}
.multi-bar button{border:1px solid #d1c2ad;border-radius:9px;padding:8px 12px;background:#faf9f5;color:var(--ws-accent);font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap}
.multi-bar button:hover{background:#d8cbbb}.multi-bar button.danger{background:#663535;color:white;border-color:#663535}
/* Workflow layer hierarchy. Designed like a familiar editor hierarchy without congestion. */
.layers-heading-main{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;font-size:12px;letter-spacing:1px;margin-bottom:9px;color:#262626}
.layers-heading-main small{font-size:8px;letter-spacing:.4px;color:#8c7e6b;font-weight:500}
.hierarchy{font-size:11px;line-height:1.35;margin-top:4px;padding-bottom:10px}
.hierarchy .layer-entry,.hierarchy .layer-root,.hierarchy .nested-entry{height:36px;padding:0 9px;width:100%;border:0;display:flex;align-items:center;gap:8px;background:transparent;text-align:left;color:#262626;border-radius:9px;cursor:pointer}
.hierarchy .layer-root{background:#e8dbc8;border:1px solid #d5c6ae;font-weight:800;margin-bottom:10px}
.hierarchy .layer-root span{margin-left:auto;opacity:.6;font-size:9px}
.hierarchy .layer-entry:hover,.hierarchy .nested-entry:hover{background:#e8dbc7}
.hierarchy .layer-entry.active{background:#e0d6c3;outline:1px solid #758da988}
.hierarchy .layer-icon{display:inline-flex;justify-content:center;align-items:center;flex:none;font-size:13px;color:#262626;width:17px}
.hierarchy .layer-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hierarchy .layer-name[contenteditable=true]{outline:1px solid #262626;background:#faf9f5;padding:4px;cursor:text}
.hierarchy .layer-grip{font-size:11px;opacity:0;color:#736858}
.hierarchy .layer-entry:hover .layer-grip{opacity:.75}
.hierarchy .layer-child{padding-left:29px}
.hierarchy .group-entry{font-weight:800;background:#e8dbc7;margin-top:5px}
.hierarchy .group-entry button{font-size:15px;padding:0 3px;border:none;color:#262626;background:none;width:18px;height:30px;cursor:pointer}
.hierarchy .layer-count{margin-left:auto;color:#8a7966;font-size:9px}
.hierarchy .layer-divider{border-top:1px solid #d2c5b4;padding-top:12px;margin:13px 0 3px;color:#7c715f;font-weight:800;letter-spacing:1px;font-size:9px}
.hierarchy .nested-entry{font-size:10px}
/* Context menu belongs to the canvas, not to the browser. */
.workshop-context{position:absolute;z-index:1000;width:224px;max-width:calc(100% - 20px);background:#f2e7d4;color:#262626;border:1px solid #d5c9b6;border-radius:15px;box-shadow:0 14px 36px #26262638;padding:6px;overflow:hidden}
.context-caption{font-size:9px;text-transform:uppercase;letter-spacing:1.15px;font-weight:800;color:#998978;padding:11px 10px 9px;border-bottom:1px solid #d7cbb8;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.context-entry{height:36px;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:0;border-radius:8px;background:transparent;text-align:left;color:#262626;padding:0 10px;cursor:pointer;font-weight:650;font-size:11px}
.context-entry small{font-size:9px;color:#918371;font-weight:400}
.context-entry:hover,.context-entry:focus-visible{background:#e0d6c3;outline:0}
.context-entry.danger{color:#a04646}.context-entry.danger:hover{background:#eb64641c}
/* Drag selection box and group titles. */
.selection-box{z-index:15;border:1.5px solid #262626!important;background:#26262618!important}
#multiBar.hidden,#contextMenu.hidden{display:none!important}
@media(max-width:800px){.multi-bar{top:12px;gap:3px;padding:7px;flex-wrap:wrap;justify-content:center}.multi-bar span{font-size:9px}.multi-bar button{padding:7px 9px}.layers-heading-main{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.snap-guide,.item.multi-selected .item-body{transition:none}}

/* Layer hierarchy stays available even while a tool's inspector is open. */
.layers-panel{flex:0 0 auto;padding:14px 17px 12px;border-top:1px solid #d3c6b3;min-height:95px;max-height:245px;display:flex;flex-direction:column;background:#f2e7d4}
.layers-panel .hierarchy{overflow-y:auto;min-height:0;max-height:185px;padding-right:4px;scrollbar-width:thin;scrollbar-color:#ad9d88 transparent}
.layers-panel .layers-heading-main{margin-bottom:4px}
@media(max-width:800px){.layers-panel{max-height:180px}}
/* Override the older full-width navigation-button rule for hierarchy disclosure controls. */
#navigation .layer-entry button[data-exp]{width:22px!important;min-width:22px!important;flex:0 0 22px;display:inline-flex!important;align-items:center;justify-content:center;margin:0;padding:0;background:transparent;border:0;height:30px}