.group-filter,.view-switch{display:flex;align-items:center;gap:6px}.group-filter>button:first-child{min-width:170px;justify-content:space-between}.view-switch{padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:9px}.view-switch button{border:0;padding:7px 11px;font-size:12px}.view-switch button.active{background:var(--accent-soft);color:var(--accent)}.group-picker-list{display:grid;gap:7px;margin-top:15px;max-height:45vh;overflow:auto}.group-picker-list button{text-align:left;display:flex;justify-content:space-between;padding:13px}.group-picker-list small{color:var(--muted)}.group-picker-list button.active{border-color:var(--accent);background:var(--accent-soft)}.group-members{display:grid;gap:9px;max-height:48vh;overflow:auto}.group-members label{display:flex;flex-direction:row;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:8px}.group-members input{width:18px;height:18px}.group-members small{margin-left:auto;color:var(--muted)}
#group-board{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}.board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line)}.board-toolbar strong,.board-toolbar small{display:block}.board-toolbar small{font-size:11px;color:var(--muted);margin-top:4px}.board-toolbar button{font-size:11px;padding:8px 10px}.board-layout{display:grid;grid-template-columns:175px minmax(280px,1fr) 225px;min-height:560px;height:min(70vh,760px)}.board-palette,.board-inspector{padding:14px;overflow:auto;font-size:12px}.board-palette{border-right:1px solid var(--line)}.board-inspector{border-left:1px solid var(--line);display:flex;flex-direction:column;gap:12px}.board-inspector h3,.board-inspector h4,.board-inspector p{margin:0}.board-inspector h3{font-size:16px;overflow-wrap:anywhere}.board-inspector h4{font-size:11px;color:var(--muted);margin-top:10px}.board-inspector button{font-size:11px;padding:9px}.board-inspector label{font-size:11px;margin-bottom:10px}.board-inspector input{font-size:12px;padding:8px;width:100%}.board-palette input{font-size:11px;padding:9px;margin:12px 0}.board-palette .help{font-size:10px;margin-top:15px}.board-palette-tabs{display:flex;gap:4px;margin-bottom:10px}.board-palette-tabs button{font-size:10px;padding:7px;border:0}.board-palette-tabs .active{color:var(--accent);background:var(--accent-soft)}.board-source{display:flex;gap:6px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:7px;margin-bottom:8px;background:var(--canvas);cursor:grab}.board-source>span{display:block;min-width:0;flex:1}.board-source strong{display:block;font-size:10px;overflow-wrap:anywhere;line-height:1.5}.board-source small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.board-source .icon{width:16px;height:16px;color:var(--accent);margin-bottom:5px}.board-source button{width:24px;height:27px;padding:0;flex:none}
.board-viewport{position:relative;overflow:hidden;background-color:#edf3f4;background-image:radial-gradient(#bdd0d3 1px,transparent 1px);background-size:20px 20px;touch-action:none;min-width:0;cursor:grab}.board-world{position:absolute;inset:0;width:10000px;height:10000px;transform-origin:0 0}.board-wires{position:absolute;inset:0;overflow:visible;pointer-events:none}.board-wire{stroke:#008e9b;stroke-width:3;fill:none;filter:drop-shadow(0 2px 2px #008e9b18)}.board-wire.pending{stroke-dasharray:8 5}.graph-node{position:absolute;width:220px;min-height:165px;background:var(--surface);border:1px solid #b9d0d4;border-top:4px solid #008e9b;border-radius:10px;box-shadow:0 5px 14px #17394012;color:var(--text)}.graph-node.schedule{border-top-color:#cc951b}.graph-node.display{border-top-color:#356bc3}.graph-node.selected{outline:2px solid #009ca8;outline-offset:3px}.graph-node-head{display:flex;align-items:center;gap:7px;padding:12px;border-bottom:1px solid var(--line);cursor:grab;min-height:45px;user-select:none}.graph-node-head strong{font-size:11px;line-height:1.45;overflow-wrap:anywhere}.graph-node-head .icon{width:17px;height:17px;flex:none}.graph-node-body{padding:12px;display:grid;gap:8px;pointer-events:none}.graph-node-body>strong{font-size:20px}.graph-node-body small{font-size:10px;color:var(--muted)}.node-content-kind{font-size:11px;overflow-wrap:anywhere}.graph-port{position:absolute;top:48px;width:29px;height:29px;padding:0;border:2px solid #fff;border-radius:50%;background:#0096a3;color:#fff;z-index:2;box-shadow:0 0 0 1px #7cabb1;cursor:crosshair;display:grid;place-items:center;font-size:17px}.graph-port.input{left:-15px}.graph-port.output{right:-15px}.mock-display{height:61px;border:5px solid #263e46;border-bottom-width:8px;border-radius:4px;background:#e4f5f3;color:#316b70;position:relative;display:grid;place-items:center}.mock-display>div{display:flex;gap:8px;align-items:center;font-size:11px}.mock-display:after{content:'';position:absolute;bottom:-14px;left:40%;width:20%;height:6px;background:#263e46;border-radius:2px}.graph-node-status{display:flex;align-items:center;gap:6px;font-size:10px;margin-top:7px}.board-empty{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:12px;padding:25px;pointer-events:none;color:#456872;font-size:12px;text-align:center;background:#edf3f48a}.board-empty strong{font-size:18px}.board-empty small{font-size:10px}.board-zoom{position:absolute;bottom:35px;left:12px;display:flex;align-items:center;background:var(--surface);padding:4px;border:1px solid var(--line);border-radius:8px;gap:6px;box-shadow:0 2px 8px #0001}.board-zoom button{padding:5px 8px;font-size:11px;border:0}.board-zoom span{font-size:10px;min-width:34px;text-align:center}.board-tip{position:absolute;bottom:9px;left:13px;font-size:9px;color:#486c73;pointer-events:none}.board-commands{display:grid;grid-template-columns:1fr 1fr;gap:6px}.node-connections{display:grid;gap:7px}.node-connections>div{display:flex;align-items:center;gap:5px;padding:7px;background:var(--canvas);border-radius:5px}.node-connections span{flex:1;font-size:10px;overflow-wrap:anywhere}.node-connections button{padding:4px 7px}.board-days{display:flex;gap:3px;margin:10px 0}.board-days label{display:block;text-align:center;flex:1;font-size:9px}.board-days input{width:15px;height:15px;accent-color:var(--accent)}.board-review-plans{display:grid;gap:10px}.board-review-plans>div{padding:12px;border:1px solid var(--line);border-radius:8px}.board-review-plans p{font-size:12px;margin-top:5px}.board-readonly{opacity:.7}.audio-unlock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;padding:16px 24px;border:0;border-radius:10px;background:#0099a6;color:white;pointer-events:auto}
@media(max-width:1050px){.board-layout{grid-template-columns:145px minmax(230px,1fr) 185px}.board-palette,.board-inspector{padding:10px}.board-toolbar{flex-wrap:wrap}.board-toolbar .toolbar-group{flex-wrap:wrap}}@media(max-width:760px){.board-layout{grid-template-columns:130px minmax(220px,1fr);height:auto}.board-viewport{height:500px}.board-inspector{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);max-height:350px}.board-toolbar .toolbar-group button{font-size:10px}.group-filter>button:first-child{min-width:140px}}
/* Pan only through the graph transform: keyboard focus must not scroll clipped nodes. */
#group-board,.board-viewport{overflow:clip}
[data-theme=dark] .board-viewport{background-color:#14282e;background-image:radial-gradient(#29444b 1px,transparent 1px)}[data-theme=dark] .board-empty{background:#14282e88;color:#b8d5db}