.sim{gap:var(--space-4);margin-block:var(--space-5);grid-template-columns:minmax(0,1fr) minmax(0,22rem);align-items:start;display:grid}@media (max-width:60rem){.sim{grid-template-columns:1fr}}.sim-canvas-wrap{position:sticky;top:5rem}.sim-canvas{aspect-ratio:4/3;background:var(--canvas-bg);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);touch-action:manipulation;cursor:crosshair;width:100%;max-height:min(60vh,32rem)}.sim-desc{font-size:var(--text-sm);color:var(--fg-muted);margin-top:var(--space-2);max-height:6rem;overflow-y:auto}.sim-controls{gap:var(--space-4);font-size:var(--text-sm);flex-direction:column;display:flex}.sim-controls section{border:var(--border-width) solid var(--border);border-radius:var(--radius-md);background:var(--bg-elevated);padding:var(--space-3)}.sim-controls h3{margin:0 0 var(--space-2);font-size:var(--text-base)}.sim-controls label{margin-bottom:var(--space-2);color:var(--fg-muted);display:block}.sim-controls select,.sim-controls input[type=number],.sim-controls input[type=range]{width:100%;margin-top:var(--space-1);padding:var(--space-1) var(--space-2);background:var(--bg);color:var(--fg);border:var(--border-width) solid var(--border-strong);border-radius:var(--radius-sm);font:inherit}.sim-controls .row{gap:var(--space-2);flex-wrap:wrap;align-items:end;display:flex}.sim-controls .row>label{flex:5rem;margin-bottom:0}.sim-controls button{font:inherit;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:var(--border-width) solid var(--border-strong);background:var(--bg-sunken);color:var(--fg);cursor:pointer}.sim-controls button:hover:not(:disabled){border-color:var(--accent)}.sim-controls button:disabled{opacity:.5;cursor:not-allowed}.sim-controls button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:700}.sim-controls .modes,.sim-controls .toggles{gap:var(--space-2);flex-wrap:wrap;display:flex}.sim-controls .chip{font-size:var(--text-xs);border-radius:999px;padding:.2em .7em}.sim-controls .chip.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:700}.sim-controls .toggle{align-items:center;gap:var(--space-1);color:var(--fg);margin:0;display:inline-flex}.sim-controls .toggle input{width:auto;margin:0}.sim-controls .hint,.sim-controls .note{font-size:var(--text-xs);color:var(--fg-subtle);margin:var(--space-1) 0 0}.sim-controls .note{color:var(--warn)}.sim-controls .metrics{gap:var(--space-1) var(--space-2);grid-template-columns:1fr auto;margin:0;display:grid}.sim-controls .metrics>div{display:contents}.sim-controls .metrics dt{color:var(--fg-muted)}.sim-controls .metrics dd{text-align:right;font-family:var(--font-mono);margin:0}.sim-controls .metrics dd.bad{color:var(--danger);font-weight:700}.sim-controls .solver-warnings{margin:var(--space-3) 0 0;gap:var(--space-2);padding:0;list-style:none;display:grid}.sim-controls .solver-warnings li{border-left:4px solid var(--warn);background:var(--warn-subtle);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);line-height:1.6}.sim-controls .solver-warnings .warning-code{color:var(--warn);font-weight:700;display:block}.sim-controls .wf{margin-top:var(--space-3);border-left:4px solid var(--fg-muted);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);line-height:1.6}.sim-controls .wf.ok{border-left-color:var(--ok,var(--accent));background:var(--ok-subtle,transparent)}.sim-controls .wf.warn{border-left-color:var(--warn);background:var(--warn-subtle)}.sim-controls .wf p{margin:0}.sim-controls .wf ul{margin:var(--space-2) 0 0;padding-left:1.2em}.sim-controls .wf .hint{margin-top:var(--space-2)}.sim-controls .assignments{margin-top:var(--space-3)}.sim-controls .assignments h4{margin:0 0 var(--space-2);font-size:var(--text-sm)}.sim-controls .assignments ul{gap:var(--space-1);font-size:var(--text-sm);margin:0;padding:0;list-style:none;display:grid}.sim-controls .assignments .team{min-width:4.5em;color:var(--fg-muted);display:inline-block}.sim-controls .message{border:var(--border-width) solid var(--warn);background:var(--warn-subtle);color:var(--fg);border-radius:var(--radius-md);padding:var(--space-3);margin:0}.noscript{border:2px solid var(--warn);background:var(--warn-subtle);border-radius:var(--radius-md);padding:var(--space-4);margin-block:var(--space-4)}
