/* The simulator block. Colours come from the site's tokens (--fg, --bg, --muted, --border, --accent, --code-bg), so the
   block follows the lesson's light theme and the site's dark theme (data-theme on <html>). */
.sim-block { --sim-bg: var(--bg, #fff); --sim-fg: var(--fg, #1a1a1a); --sim-grid: #b9b9b9; --sim-p99: #a3321c; --sim-good: #1f5fa8; --sim-offered: #6b6b6b;
  --sim-ok: #dcefd8; --sim-warm: #f6e3a1; --sim-hot: #f3b8ad; --sim-hot-stroke: #a3321c; --sim-down: #d9d9d9; --sim-q: #7a4f9c; --sim-qbg: #e4e4e4; --sim-dot: var(--accent, #0b5fff); --sim-node-fg: #111; --sim-node-sub: #444;
  border: 1px solid var(--border, #ddd); border-radius: 8px; padding: 16px; margin: 20px 0; color: var(--sim-fg); background: var(--sim-bg); }
:root[data-theme="dark"] .sim-block { --sim-grid: #555; --sim-p99: #f08a6a; --sim-good: #7fb3f0; --sim-offered: #a8a8a8; --sim-ok: #26402a; --sim-warm: #5a4a14; --sim-hot: #6b2a20; --sim-hot-stroke: #f08a6a; --sim-down: #3a3a3a; --sim-q: #b48ad6; --sim-qbg: #2c2f33; --sim-node-fg: #f0f0f0; --sim-node-sub: #c4c4c4; }
.sim-title { margin: 0 0 4px; font-size: 1.1rem; }
.sim-scale { margin: 0 0 8px; font-size: .9rem; color: var(--muted, #4d4d4d); }
.sim-status { margin: 0 0 12px; font-size: .9rem; color: var(--muted, #4d4d4d); }
.sim-figure { display: grid; grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr); gap: 16px; align-items: start; }
.sim-svg { width: 100%; height: auto; display: block; }
.sim-svg-v { max-width: 230px; margin: 0 auto; }
.sim-edge { stroke: var(--muted, #888); stroke-width: 2; }
.sim-node { stroke: var(--muted, #555); stroke-width: 1.5; }
.sim-ok { fill: var(--sim-ok); } .sim-warm { fill: var(--sim-warm); }
.sim-hot { fill: var(--sim-hot); stroke: var(--sim-hot-stroke); stroke-width: 3.5; }
.sim-down { fill: var(--sim-down); stroke: var(--sim-hot-stroke); stroke-width: 3.5; stroke-dasharray: 6 4; }
.sim-label { font: 600 14px system-ui, sans-serif; fill: var(--sim-node-fg); } .sim-sub { font: 11px system-ui, sans-serif; fill: var(--sim-node-sub); }
.sim-badge { font: 700 11px system-ui, sans-serif; fill: var(--sim-node-fg); text-transform: uppercase; letter-spacing: .04em; }
.sim-qbg { fill: var(--sim-qbg); } .sim-q { fill: var(--sim-q); }
.sim-dot { fill: var(--sim-dot); }
.sim-readouts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: .92rem; }
.sim-readouts dt { color: var(--muted, #4d4d4d); } .sim-readouts dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.sim-legend { font-size: .82rem; margin: 6px 0 0; color: var(--muted, #4d4d4d); }
.sim-chart-wrap { margin-top: 14px; } .sim-chart { width: 100%; height: auto; display: block; border: 1px solid var(--border, #ddd); border-radius: 4px; }
.sim-knobs { margin-top: 14px; display: grid; gap: 12px; }
.sim-knob { display: grid; grid-template-columns: 1fr; gap: 4px; }
.sim-knob input[type=range] { width: 100%; min-height: 28px; }
.sim-knob output { font-variant-numeric: tabular-nums; font-weight: 600; }
.sim-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-buttons button { font: inherit; padding: 6px 14px; min-height: 36px; cursor: pointer; color: var(--sim-fg); background: var(--code-bg, #f6f8fa); border: 1px solid var(--border, #bbb); border-radius: 6px; }
.sim-buttons button:focus-visible, .sim-knob input:focus-visible { outline: 3px solid var(--accent, #0b5fff); outline-offset: 2px; }
.sim-buttons button[aria-pressed="true"] { border-color: var(--sim-hot-stroke); box-shadow: inset 0 0 0 1px var(--sim-hot-stroke); font-weight: 600; }
.sim-attrib { font-size: .8rem; color: var(--muted, #4d4d4d); margin: 14px 0 0; }
@media (max-width: 600px) { .sim-figure { grid-template-columns: 1fr; } .sim-block { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .sim-dots { display: none; } }