.right-canvas{display:flex;align-items:flex-start;position:relative}.lane{position:relative;flex:0 0 auto;padding:0 6px}.lane:last-child{border-right:none}.lane-path{flex:0 0 auto;width:max-content;min-width:0}.lane-alias{flex:0 0 auto;width:max-content;margin-left:56px}.lane-freq,.lane-size{flex:0 0 auto;width:max-content}.lane-purpose{flex:0 0 auto;width:200px}.lane-structure{flex:0 0 auto;width:max-content}.subcol-info{justify-content:flex-end}.space-node,.lane-path .path-node{width:100%}.lane-alias .attr-node{text-align:left}.rec-frame{position:absolute;background:#fff;border-radius:6px;box-shadow:0 1px 4px #0000001f;pointer-events:none;transition:background .15s,box-shadow .15s}.rec-frame.faded{background:transparent;box-shadow:none}.lane-freq .dd{justify-content:center}.lane-freq .dd .dd-val{text-align:center}.lane-purpose textarea.inline-edit{text-align:left}.lane-purpose .attr-node{width:100%}.lane-purpose textarea.inline-edit{width:100%;max-width:none;min-height:1.8em;resize:none;flex:1 1 auto;min-width:0;box-sizing:border-box;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;line-height:1.4}.lane-head{height:26px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#000;margin-bottom:8px;position:relative}.lane-head.align-right{justify-content:flex-end}.lane-head.align-center{justify-content:center}.lane-head.align-left{justify-content:flex-start}.path-stack{display:flex;flex-direction:column;gap:14px;position:relative;padding-left:18px}.attr-stack{position:relative}.grip-float{position:absolute;left:0;top:0}.attr-node{position:absolute;left:0;right:0;transform:translateY(-50%)}.alias-node{display:flex;align-items:center;gap:4px;background:transparent;border-radius:8px;padding:3px 8px}.alias-node .inline-edit{border-color:transparent;background:transparent;padding:1px 2px;font-weight:600}.alias-node .inline-edit:focus{border-color:var(--brand);background:#fff}.grip{cursor:grab;color:var(--ink-faint);user-select:none;font-size:13px;line-height:1;padding:0 2px;align-self:center;touch-action:none}.grip:hover{color:var(--brand)}.grip:active{cursor:grabbing}.reorder-ghost{opacity:.9;background:#fff;border:1px solid var(--brand);border-radius:8px;box-shadow:var(--shadow-lg)}.reordering{opacity:.3}.reorder-gap{box-sizing:border-box;width:100%;margin:2px 0;border:2px dashed var(--brand);background:#6366f124;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--brand);font-size:12px;font-weight:600;letter-spacing:.5px;pointer-events:none}.dragging-ghost{opacity:.3}.path-node.faded,.attr-node.faded{opacity:.25;filter:saturate(.4)}.path-node.active{outline:2px solid var(--brand);outline-offset:2px}.attr-node.active{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}.lane-inserter{flex:0 0 auto;width:18px;align-self:stretch;position:relative;display:flex;flex-direction:column;align-items:center}.inserter-head{height:26px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.inserter-add{border:none;background:transparent;cursor:pointer;width:18px;height:18px;border-radius:50%;font-size:16px;line-height:1;color:var(--brand);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s,background .12s}.lane-inserter:hover .inserter-add{opacity:1}.inserter-add:hover{background:#6366f124}.lane-custom .attr-node{text-align:left}.custom-attr-head{width:100%}.custom-attr-name{border-color:transparent;background:transparent;padding:1px 4px;font-weight:600;text-align:center;max-width:160px}.custom-attr-name:focus{border-color:var(--brand);background:#fff}.lane-custom.align-left .custom-attr-head{justify-content:flex-start}.lane-custom.align-center .custom-attr-head{justify-content:center}.lane-custom.align-right .custom-attr-head{justify-content:flex-end}.lane-custom .attr-node .inline-edit{width:100%;box-sizing:border-box}.lane-custom.align-left .custom-attr-name,.lane-custom.align-left .attr-node .inline-edit{text-align:left}.lane-custom.align-center .custom-attr-name,.lane-custom.align-center .attr-node .inline-edit{text-align:center}.lane-custom.align-right .custom-attr-name,.lane-custom.align-right .attr-node .inline-edit{text-align:right}.inserter-resize{position:absolute;inset:34px 0 0;cursor:col-resize;z-index:6}.inserter-resize:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:3px;height:30px;border-radius:3px;background:var(--brand);opacity:0;transition:opacity .1s}.inserter-resize:hover:before,.inserter-resize.dragging:before{opacity:.6}.lane-inserter.resize-only .inserter-resize{top:0}
