body[data-page="evaluation"] { --site-width: 1440px; }
.graph-controls { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; padding: .8rem 0; border-top: 1px solid var(--rule); }
.graph-controls button { background: transparent; border: 1px solid var(--rule); padding: .45rem .7rem; border-radius: 6px; font-size: .76rem; }
.graph-controls button:hover { background: #e8e9df; }
.graph-controls output { min-width: 3.2rem; font-size: .75rem; color: var(--muted); text-align: center; }
.graph-controls .jump-start { margin-left: auto; }
.flow-viewport { width: 100%; height: max(560px,calc(100svh - 275px)); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--rule); background: #f8f8f3; scrollbar-width: thin; }
.flow-canvas { margin-inline: auto; }
.flow-canvas svg { display: block; width: 100%; height: 100%; }
.flow-node rect,.flow-node > path { fill: #f8f8f3; stroke: #8b907c; stroke-width: 1.4; }
.flow-node.score rect { fill: #e9ecdf; }
.flow-node.decision > path { fill: #f1ecdf; }
.flow-node.terminal rect { fill: #dedfcf; }
.flow-title { font-size: 20px; fill: #252920; text-anchor: middle; }
.flow-detail { font-size: 16px; fill: #5f6558; text-anchor: middle; }
.flow-edge { fill: none; stroke: #626951; stroke-width: 1.5; }
.return-edge { stroke-dasharray: 7 5; }
.edge-label { font-size: 15px; fill: #626951; paint-order: stroke; stroke: #f8f8f3; stroke-width: 5px; stroke-linejoin: round; }
.flow-section text { font-size: 21px; fill: #626951; }
.flow-section path { stroke: #c4c8b7; stroke-width: 1; }
.graph-legend { font-size: .75rem; color: var(--muted); line-height: 1.8; margin-top: .85rem; }
@media(max-width:600px) { .graph-controls { gap: .45rem; } .graph-controls .jump-start { margin-left: 0; } .flow-viewport { height: 70svh; min-height: 450px; } }