/* Backjumping figures (backjump.js, unit 19b). Colours from deck.css tokens, so dark mode follows. */

/* value cells of a frame: closed (struck, sunk), current (outlined), open (plain) */
.bj-cell { fill: var(--surface); stroke: var(--ink-faint); stroke-width: 1.2; }
.bj-cell.bj-closed { fill: var(--surface-sunk); stroke: var(--rule); }
.bj-cell.bj-current { stroke: var(--accent); stroke-width: 2.5; }
.bj-cell.bj-fresh { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 2; }
.bj-celltext { font: 600 13px var(--f-mono); fill: var(--ink); text-anchor: middle; }
.bj-celltext.bj-closed { fill: var(--ink-faint); font-weight: 400; }
.bj-strike { stroke: var(--ink-faint); stroke-width: 1.3; }
.bj-fresh-strike { stroke: var(--warn); stroke-width: 1.6; }

/* frame rows */
.bj-var { font: 600 16px var(--f-mono); fill: var(--ink); }
.bj-var.bj-moved { fill: var(--c-coda); }
.bj-movedbox { fill: none; stroke: var(--c-coda); stroke-width: 1.8; }
.bj-depth { font: 11px var(--f-mono); fill: var(--ink-faint); }
.bj-cs { font: 13px var(--f-mono); fill: var(--ink-soft); }
.bj-cs-bad { fill: var(--warn); font-weight: 600; text-decoration: underline; }
.bj-colhead { font: 11px var(--f-mono); fill: var(--ink-faint); letter-spacing: .06em; }
.bj-band { fill: var(--accent-soft); }
.bj-band-warn { fill: var(--warn-soft); }
.bj-band-good { fill: var(--good-soft); }
.bj-target { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 3; }
.bj-stop { font: 600 15px var(--f-body); }
.bj-stop.bj-bad { fill: var(--warn); }
.bj-stop.bj-ok { fill: var(--good); }
.bj-small { font: 12px var(--f-body); fill: var(--ink-soft); }
.bj-small-warn { font: 12px var(--f-body); fill: var(--warn); }

/* the search tree (cbj-replay) */
.bj-edge { stroke: var(--ink-faint); stroke-width: 1.4; }
.bj-edge.bj-ghost { stroke: var(--rule); stroke-dasharray: 4 3; }
.bj-node { fill: var(--surface); stroke: var(--ink); stroke-width: 1.4; }
.bj-node.bj-ghost { stroke: var(--rule); stroke-dasharray: 4 3; }
.bj-node.bj-rej { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 2; }
.bj-node.bj-shut { fill: var(--rule); stroke: var(--ink-faint); }
.bj-node.bj-sol { fill: var(--good-soft); stroke: var(--good); stroke-width: 2; }
.bj-node.bj-earlier { stroke: var(--ink-faint); stroke-dasharray: none; }
.bj-node.bj-now { stroke: var(--accent); stroke-width: 3; }
.bj-nodetext { font: 11px var(--f-mono); fill: var(--ink); text-anchor: middle; pointer-events: none; }
.bj-nodetext.bj-ghost { fill: var(--ink-faint); }
.bj-jump { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 3; }
.bj-jumphead { fill: var(--accent); }

/* the measure plot (ordering) */
.bj-digit { font: 600 17px var(--f-mono); fill: var(--ink); text-anchor: middle; }
.bj-digit.bj-empty { fill: var(--ink-faint); font-weight: 400; }
.bj-digit.bj-down { fill: var(--accent); }
.bj-digit.bj-up { fill: var(--warn); font-weight: 400; }
.bj-downpill { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.2; }
.bj-seen { font: 12px var(--f-mono); fill: var(--ink-faint); }
.bj-seen .bj-seen-now { fill: var(--ink); font-weight: 600; }
.bj-mu { fill: none; stroke: var(--accent); stroke-width: 2; }
.bj-bar { fill: var(--ink-faint); }
.bj-bar.bj-bar-jump { fill: var(--c-coda); }
.bj-bar.bj-bar-future { opacity: .25; }
.bj-bar.bj-bar-now { fill: var(--warn); }
.bj-now-line { stroke: var(--warn); stroke-width: 1.2; stroke-dasharray: 3 3; }
.bj-dot { fill: var(--warn); stroke: var(--surface); stroke-width: 1.5; }

/* panels and pickers */
.bj-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bj-picks select { font: 14px var(--f-body); color: var(--ink); background: var(--surface); border: 1px solid var(--rule);
  border-radius: 4px; padding: 4px 8px; }
.viz .viz-pick.bj-hidden { display: none; }
.bj-facts { font-size: 15px; line-height: 1.45; margin: 0 0 8px; }
.bj-facts b { font-weight: 600; }
.bj-same { font-size: 14px; color: var(--ink-soft); margin: 4px 0 8px; }
.bj-side { border-left: 4px solid var(--rule); padding: 2px 0 2px 10px; margin: 0 0 10px; font-size: 15px; }
.bj-side.bj-side-good { border-left-color: var(--good); }
.bj-side.bj-side-bad { border-left-color: var(--warn); }
.bj-side-head { font: 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.bj-warntext { color: var(--warn); font-weight: 600; }
.bj-goodtext { color: var(--good); font-weight: 600; }