/* Extend the existing purple learning palette; keep the canvas the main activity. */
.flow-page .flow-wrap{width:min(1600px,calc(100% - 32px));margin:auto}.flow-intro{padding:16px 0}.flow-intro h1{font:700 clamp(24px,3vw,36px)/1.2 'Fredoka',sans-serif;margin:8px 0}.flow-intro p{margin:6px 0;color:#57516d}.flow-intro a{color:var(--purple)}
.flow-page button,.flow-page input,.flow-page select,.flow-page textarea{font:inherit}.flow-page button,.flow-page select{min-height:44px}.flow-page button{border:1px solid #cec8e5;background:white;color:var(--ink);padding:9px 12px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer}.flow-page button:hover{border-color:var(--purple);background:#f0edff}.flow-page button:disabled{opacity:.45;cursor:not-allowed}.flow-page :focus-visible{outline:3px solid #376abc;outline-offset:3px}.flow-page .primary{background:var(--purple);color:white;border-color:var(--purple)}.flow-page .danger{color:#a52535}.flow-page label{display:grid;gap:5px;font-size:14px;font-weight:700}.flow-page input,.flow-page select,.flow-page textarea{width:100%;min-width:0;padding:10px;border:1px solid #cec8e5;border-radius:8px;background:white;color:var(--ink);font-size:16px}.flow-page textarea{resize:vertical}.flow-page [hidden]{display:none!important}
.flow-start,.flow-toolbar,.flow-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.flow-start{margin:0 0 12px}.flow-start label{flex:1;max-width:350px}.flow-start select{max-width:100%}.flow-shell{display:grid;grid-template-columns:255px minmax(0,1fr);gap:14px;align-items:start}.flow-panel{background:white;border:1px solid var(--line);border-radius:16px;padding:14px}.flow-panel summary{font-weight:700;cursor:pointer;min-height:32px}.flow-panel-content{display:grid;gap:12px;padding-top:8px}.flow-panel h2{font-size:16px;margin:4px 0}.flow-add{display:grid;grid-template-columns:1fr 1fr;gap:6px}.flow-add button:first-child{grid-column:1/-1}.flow-panel fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}.flow-panel legend{font-size:14px;font-weight:700;margin-bottom:8px}.flow-small{font-size:14px;color:#5c5570;line-height:1.5;margin:4px 0}.flow-canvas-column{min-width:0}.flow-toolbar{padding:10px;background:#fff;border:1px solid var(--line);border-radius:14px 14px 0 0}.flow-toolbar output{min-width:45px;font-size:14px;text-align:center}.flow-toolbar .spacer{flex:1}.flow-viewport{position:relative;background-color:#f7f6fc;background-image:radial-gradient(#d9d3eb 1px,transparent 1px);background-size:24px 24px;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;overflow:hidden;height:clamp(480px,68vh,850px)}#flowCanvas{display:block;width:100%;height:100%;touch-action:none;user-select:none}#flowCanvas [data-node]{cursor:grab}#flowCanvas [data-node]:active{cursor:grabbing}#flowCanvas [data-node]:focus-visible{outline:none}#flowCanvas [data-node]:focus-visible .node-outline{stroke:#2667cf;stroke-width:4}#flowCanvas [data-edge]{cursor:pointer}.flow-empty{position:absolute;inset:30% 20px auto;text-align:center;pointer-events:none}.flow-empty button{pointer-events:auto;margin:4px}.flow-help{font-size:14px;color:#57516d;margin:8px 0}.flow-status{min-height:25px;color:#433a71;font-size:14px;margin:6px 0}.flow-export{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 22px}.flow-export p{flex-basis:100%;margin:0}.flow-reference{padding:24px 0 42px}.flow-reference h2{font:700 25px 'Fredoka',sans-serif}.flow-templates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.flow-template{background:white;border:1px solid var(--line);border-radius:14px;padding:16px}.flow-template h3{font-size:17px;margin:0 0 8px}.flow-template p{font-size:14px;min-height:42px}.flow-template a{display:block;color:var(--purple);font-size:14px;margin-top:10px}.flow-example{display:block;max-width:360px;width:100%;height:auto;margin:8px 0}.flow-guide{display:grid;grid-template-columns:1fr 1fr;gap:30px}.flow-page dialog{width:min(460px,calc(100% - 28px));max-height:85vh;overflow:auto;border:1px solid var(--line);border-radius:18px;padding:24px;color:var(--ink)}.flow-page dialog::backdrop{background:#24204488}.flow-page dialog h2{margin-top:0;font-size:21px}.flow-page dialog .flow-actions{justify-content:flex-end;margin-top:20px}.flow-page .link-fallback{width:100%}
@media(max-width:900px){.flow-shell{grid-template-columns:220px minmax(0,1fr)}.flow-templates{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.flow-page .flow-wrap{width:calc(100% - 24px)}.flow-intro h1{font-size:25px}.flow-shell{display:flex;flex-direction:column;gap:8px}.flow-panel{width:100%;padding:10px 12px}.flow-panel summary{min-height:44px;display:flex;align-items:center}.flow-panel-content{max-height:55vh;overflow:auto;padding:8px 3px}.flow-canvas-column{width:100%}.flow-viewport{height:62svh;min-height:420px;max-height:700px}.flow-toolbar{gap:5px;padding:7px}.flow-toolbar button{padding:8px;font-size:14px}.flow-toolbar .spacer{display:none}.flow-start label{max-width:none;flex-basis:100%}.flow-guide{grid-template-columns:1fr;gap:12px}.flow-templates{grid-template-columns:1fr}.flow-template p{min-height:0}.flow-export button{flex:1 1 auto}.flow-help{font-size:14px}}

@media(min-width:651px){.flow-panel-content{max-height:clamp(480px,68vh,850px);overflow:auto;padding-right:4px}}

@media(max-width:650px){.flow-start label{order:-1}.flow-start>button{flex:1}.flow-intro{padding-top:8px}}