/* ============================================================================
   Flows — the block editor's canvas
   ========================================================================== */

/* Blockly draws into an SVG it owns and styles from a theme object handed to it
   in JavaScript, so none of its colours can come from the cascade the way every
   other component's do. These custom properties are the bridge: the editor reads
   them off this element at injection time and builds the theme from them, which
   keeps the palette in colors.css and keeps it following the theme the reader
   picked rather than freezing a second set of colours inside a script. */
.flow-canvas {
    --flow-step: var(--brand);
    --flow-loop: var(--accent-violet);
    /* A condition is neither a step nor a loop, and it reads as the thing that may
       stop the block below it from happening, so it takes the colour this app uses
       everywhere else for "look at this before you rely on it". */
    --flow-when: var(--warning);
    --flow-set: var(--success);
    --flow-subject: var(--info);
    --flow-canvas-bg: var(--surface-sunken);
    --flow-toolbox-bg: var(--surface-alt);
    --flow-toolbox-text: var(--text-body);
    --flow-marker: var(--text-muted);

    /* Tall enough that a loop with a body inside it fits without scrolling, which
       is the shape a person is here to build. Fixed rather than fluid because the
       canvas pans and zooms: a box that grew with its contents would move the Save
       button down the page every time a block was dragged in. */
    height: 520px;
    border-top: var(--border-width) solid var(--border);
    border-bottom: var(--border-width) solid var(--border);
    background: var(--surface-sunken);
}

/* Blockly injects its own stylesheet at injection time, which is after every sheet
   the cascade links, so its defaults would otherwise win on source order alone.
   Scoping these to the canvas raises the specificity enough to take the chrome
   back, and it is the only part of Blockly the cascade can reach: the colour of a
   block is an attribute Blockly writes onto the SVG, so those come from the custom
   properties above and are read once, when the editor is injected. */
.flow-canvas .blocklySvg { background-color: var(--surface-sunken); }
.flow-canvas .blocklyMainBackground { stroke: var(--border); }
.flow-canvas .blocklyToolboxDiv {
    background-color: var(--surface-alt);
    color: var(--text-body);
    border-right: var(--border-width) solid var(--border);
}
.flow-canvas .blocklyFlyoutBackground { fill: var(--surface-alt); }
.flow-canvas .blocklyTreeLabel { color: var(--text-body); }