/* The pseudocode blocks inside the editor (psblocks.js). Robin, 13 Oct 2026: "forget the grey - keep editor styling as-is":
   the canvas, toolbox and drawer take the editor's own colors (so light mode follows too), with white blocks on them.
   Everything is scoped to .psb so nothing here can reach the rest of the console. */
.blocks-view.psb { padding: 0; overflow: hidden; position: relative; background: var(--editor-bg); min-height: 0; }
.psb #blocksWs { position: absolute; inset: 0; }

.psb .blocklyToolboxDiv { background: var(--panel-bg) !important; border-right: 1px solid var(--border) !important; }
.psb .blocklyTreeRow:not(.blocklyTreeSelected):hover { background: rgba(255,255,255,0.05) !important; }
.psb .blocklyTreeSelected { background: rgba(255,204,0,0.2) !important; }
.psb .blocklyTreeLabel {
  font-family: 'Outfit', sans-serif !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .3px !important; color: var(--text-primary) !important;
}
.psb .blocklyTreeSelected > .blocklyTreeLabel { color: #ffcc00 !important; }
.psb .blocklyFlyoutBackground { fill: var(--bg-elevated) !important; opacity: 1 !important; }
.psb .blocklyMainBackground { fill: var(--editor-bg) !important; stroke: none !important; }   /* Blockly outlines the canvas by default: no border (Robin, 13 Oct 2026) */
.psb .blocklySvg { outline: none; border: 0; }
/* block text: monospace, dark on the light blocks */
.psb .blocklyText { font-family: 'JetBrains Mono', monospace !important; font-size: 11.5px !important; font-weight: 600 !important; fill: #111 !important; }
.psb .blocklyEditableText text, .psb .blocklyNonEditableText text { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; fill: #111 !important; }
.psb .blocklyFlyout .blocklyText { fill: #111 !important; }

/* why the blocks could not be shown: it stays until the student fixes the code or switches again */
.blocks-note {
  margin: 0; padding: 9px 14px; font-size: 13px; line-height: 1.4; color: #fbbf24;
  background: rgba(251,191,36,0.1); border-bottom: 1px solid rgba(251,191,36,0.35);
}

/* the darkest blocks (lists, procedures, raw): their own words are white. Only the block's DIRECT labels, so the boxes you type in
   (white, dark text) and any lighter block nested inside are untouched. The class is the block style from theme(). */
.psb .ps_lists > .blocklyLabelField .blocklyText,
.psb .ps_procs > .blocklyLabelField .blocklyText,
.psb .ps_raw > .blocklyLabelField .blocklyText { fill: #fff !important; }