/* Interactive figures. Colours come from deck.css tokens, so dark mode and trunk colours follow. */

.viz { display: grid; gap: 18px; align-items: start; font-family: var(--f-body); color: var(--ink); text-align: left; }
.viz:focus { outline: none; }
.viz:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; }
.viz-svg { width: 100%; height: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  touch-action: none; user-select: none; }
.viz-error { font: 16px var(--f-mono); color: var(--warn); background: var(--warn-soft); border-left: 4px solid var(--warn);
  padding: 12px 16px; border-radius: 4px; }

/* layouts */
.viz-polytope { grid-template-columns: 560px 1fr; }
.viz-side { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
.viz-stack { grid-template-columns: 1fr; }
.viz-wide { grid-template-columns: minmax(0, 1fr) 360px; }

/* plots */
.viz-grid { stroke: var(--rule); stroke-width: .6; }
.viz-axis { stroke: var(--ink-faint); stroke-width: 1.2; }
.viz-tick { font: 11px var(--f-mono); fill: var(--ink-faint); }
.viz-label { font: 13px var(--f-body); fill: var(--ink); }
.viz-label-soft { font: 12px var(--f-body); fill: var(--ink-soft); }
.viz-poly { fill: var(--accent-soft); stroke: none; }
.viz-edge { stroke: var(--unit); stroke-width: 2.5; }
.viz-edge-open { stroke: var(--unit); stroke-width: 1.5; stroke-dasharray: 3 4; }
.viz-rowline { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 5 4; }
.viz-levelline { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 8 5; }
.viz-curve { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.viz-curve-soft { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; }
.viz-optedge { stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.viz-vertex { fill: var(--ink); }
.viz-vertex-seen { fill: var(--ink-soft); }
.viz-vertex-opt { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.viz-dot-warn { fill: var(--warn); }
.viz-dot-good { fill: var(--good); }
.viz-dial { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.viz-arrow { stroke: var(--accent); stroke-width: 3; }
.viz-handle { fill: var(--accent); stroke: var(--surface); stroke-width: 2; cursor: grab; }
.viz-handle:active { cursor: grabbing; }
.viz-probe-in { fill: var(--good); }
.viz-probe-out { fill: var(--warn); }
.viz-probe-text { font: 12px var(--f-mono); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.viz-pathline { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.viz-cut { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 7 4; }
.viz-shade-warn { fill: var(--warn-soft); }
.viz-shade-good { fill: var(--good-soft); }

/* graphs: one state class per node or edge */
.viz-g-line { fill: none; stroke: var(--ink-faint); stroke-width: 2; }
.viz-g-circle { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.viz-g-nlabel { font: 600 14px var(--f-mono); fill: var(--ink); pointer-events: none; }
.viz-g-elabel { font: 12px var(--f-mono); fill: var(--ink-soft); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.viz-g-note { font: 12px var(--f-mono); fill: var(--accent); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.viz-arrowhead { fill: var(--ink-faint); }
.viz-arrowhead.hot, .viz-arrowhead.chosen { fill: var(--accent); }
.viz-arrowhead.warn { fill: var(--warn); }
.viz-arrowhead.good { fill: var(--good); }
.viz-arrowhead.muted { fill: var(--rule); }
.viz-g-edge.hot .viz-g-line { stroke: var(--accent); stroke-width: 3.5; stroke-dasharray: 6 3; }
.viz-g-edge.chosen .viz-g-line { stroke: var(--accent); stroke-width: 5; }
.viz-g-edge.warn .viz-g-line { stroke: var(--warn); stroke-width: 3.5; }
.viz-g-edge.good .viz-g-line { stroke: var(--good); stroke-width: 4; }
.viz-g-edge.muted .viz-g-line { stroke: var(--rule); }
.viz-g-edge.muted .viz-g-elabel { fill: var(--ink-faint); }
.viz-g-node.hot .viz-g-circle { stroke: var(--accent); stroke-width: 3.5; }
.viz-g-node.chosen .viz-g-circle { fill: var(--accent); stroke: var(--accent); }
.viz-g-node.chosen .viz-g-nlabel { fill: var(--surface); }
.viz-g-node.warn .viz-g-circle { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 3; }
.viz-g-node.good .viz-g-circle { fill: var(--good-soft); stroke: var(--good); stroke-width: 3; }
.viz-g-node.muted .viz-g-circle { stroke: var(--rule); }
.viz-g-node.muted .viz-g-nlabel { fill: var(--ink-faint); }

/* side panels */
.viz-panel, .viz-right { font-size: 17px; line-height: 1.4; min-width: 0; }
.viz-head { font: 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--unit); margin: 4px 0 6px; }
.viz-rows { display: grid; gap: 4px; margin-bottom: 12px; }
.viz-row { display: grid; grid-template-columns: 22px 60px 1fr auto; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; }
.viz-row input { margin: 0; }
.viz-row-name { color: var(--ink-soft); font-size: 14px; }
.viz-row-text { font-family: var(--f-mono); font-size: 15px; }
.viz-slack { font: 13px var(--f-mono); color: var(--ink-soft); }
.viz-row.viz-tight { background: var(--accent-soft); border-color: var(--accent); }
.viz-row.viz-violated { background: var(--warn-soft); border-color: var(--warn); }
.viz-readout { font-size: 16px; margin-bottom: 4px; }
.viz-cert { color: var(--good); }
.viz-hint { font-size: 13px; color: var(--ink-faint); margin-top: 10px; }
.viz-big { font: 600 22px var(--f-mono); }

/* controls */
.viz-controls { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.viz-controls button, .viz-controls select, .viz button.viz-btn {
  font: 14px var(--f-body); color: var(--ink); background: var(--surface); border: 1px solid var(--rule);
  border-radius: 4px; padding: 4px 10px; cursor: pointer; }
.viz-controls button:hover:not(:disabled), .viz button.viz-btn:hover { border-color: var(--accent); }
.viz-controls button:disabled { opacity: .4; cursor: default; }
.viz-controls .viz-next { border-color: var(--accent); }
.viz-count { font: 13px var(--f-mono); color: var(--ink-soft); }
.viz-slider { display: grid; grid-template-columns: auto 1fr 64px; gap: 10px; align-items: center; font-size: 15px; margin: 6px 0; }
.viz-slider input { width: 100%; accent-color: var(--accent); }
.viz-slider-label { color: var(--ink-soft); }
.viz-slider-value { font: 14px var(--f-mono); text-align: right; }
.viz-runtitle { font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
.viz-note { font: 600 17px var(--f-body); margin-bottom: 8px; min-height: 1.4em; }
.viz-explain { font-size: 15px; color: var(--ink-soft); margin-top: 8px; }

/* tables */
.viz-tab { border-collapse: collapse; font: 15px var(--f-mono); margin: 0 0 10px; }
.viz-tab th, .viz-tab td { padding: 4px 9px; text-align: right; border-bottom: 1px solid var(--rule); }
.viz-tab th { font-weight: 600; border-bottom: 2px solid var(--ink); }
.viz-tab .viz-bas { text-align: left; color: var(--ink-soft); }
.viz-tab .viz-objrow { border-top: 2px solid var(--ink); }
.viz-tab .viz-col-enter, .viz-tab .viz-hl { background: var(--accent-soft); }
.viz-tab .viz-row-leave { background: var(--accent-soft); }
.viz-tab .viz-pivot { outline: 2px solid var(--accent); font-weight: 700; }
.viz-tab .viz-neg, .viz-tab .viz-bad { color: var(--warn); font-weight: 600; }
.viz-tab .viz-goodcell { color: var(--good); font-weight: 600; }
.viz-tab .viz-ratio, .viz-tab .viz-soft { color: var(--ink-soft); }

/* Fourier–Motzkin readout */
.viz-fm { display: grid; gap: 2px; font-size: 15px; margin-bottom: 8px; }
.viz-fm-row .viz-slack { margin-left: 6px; }
.viz-shadowbar { stroke: var(--accent); stroke-width: 8; stroke-linecap: round; opacity: .85; }

/* a strip of small squares, one per step (unit 00's oracle) */
.viz-strip { display: flex; gap: 3px; margin: 10px 0 2px; flex-wrap: wrap; }
.viz-strip-cell { width: 18px; height: 18px; border-radius: 3px; border: 1px solid var(--rule); background: var(--surface); }
.viz-strip-cell.ok { background: var(--accent); border-color: var(--accent); }
.viz-strip-cell.bad { background: var(--rule); }
.viz-strip-cell.now { outline: 2px solid var(--warn); outline-offset: 1px; }
.viz-strip-cell.later { opacity: .45; }
/* wide transparent click target over a graph edge */
.viz-hit { stroke: transparent; stroke-width: 18; fill: none; cursor: pointer; }