/* Physics Atlas — x-sim frame and simkit controls. */
x-sim { margin: var(--sp-5) 0; max-width: var(--wide); font-family: var(--font-ui); }
.sim-frame { position: relative; background: var(--sk-surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-1); }
.sim-toolbar { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.sim-label { flex: 1; min-width: 0; font: 650 var(--fs-0)/1.3 var(--font-ui); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-tools { display: inline-flex; gap: 2px; }
.sim-btn { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ink-2); }
.sim-btn:hover:not(:disabled) { background: var(--sunken); color: var(--ink); }
.sim-btn:disabled { opacity: .35; cursor: default; }
.sim-btn::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat; }
.sim-play { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='2' width='3.5' height='12' rx='1'/%3E%3Crect x='9.5' y='2' width='3.5' height='12' rx='1'/%3E%3C/svg%3E"); }
.sim-play.is-paused { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2l10 6-10 6z'/%3E%3C/svg%3E"); color: var(--accent); }
.sim-reset { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a6 6 0 11-5.6 3.9l1.8.7A4 4 0 108 4v2.5L4.5 3.2 8 0z'/%3E%3C/svg%3E"); }
.sim-fs { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 1h5v2H3v3H1zM10 1h5v5h-2V3h-3zM1 10h2v3h3v2H1zM13 10h2v5h-5v-2h3z'/%3E%3C/svg%3E"); }
.sim-body { display: flex; flex-direction: column; }
.sim-stage { position: relative; min-width: 0; background: var(--sk-bg); }
.sim-controls { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--line); background: var(--surface);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); gap: var(--sp-2) var(--sp-5); align-items: start; }
.sim-controls:empty { display: none; }
@media (min-width: 900px) {
  .sim-body.ctl-side { flex-direction: row; }
  .ctl-side .sim-stage { flex: 1 1 auto; }
  .ctl-side .sim-controls { flex: 0 0 17rem; border-top: 0; border-left: 1px solid var(--line); grid-template-columns: 1fr; align-content: start; }
}
.sim-caption { font: 400 var(--fs-1)/1.55 var(--font-ui); color: var(--ink-2); padding: var(--sp-3) var(--sp-1) 0; }
.sim-caption > :first-child { margin-top: 0; }
.sim-caption > :last-child { margin-bottom: 0; }
.sim-caption ol, .sim-caption ul { padding-left: 1.3em; margin: 0; }
.sim-caption li { margin: .3em 0; }
.sim-caption h4 { margin: 0 0 4px; font-size: 11px; color: var(--unit); }
.sim-lock { position: absolute; inset: 0; top: 47px; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: var(--sp-5);
  background: repeating-linear-gradient(-45deg, var(--sk-bg) 0 14px, var(--surface) 14px 28px); color: var(--ink-2); font-weight: 600; }
.sim-lock p { margin: 0; max-width: 22rem; }
x-sim[locked] .sim-stage { min-height: 220px; }
.lock-icon { width: 34px; height: 34px; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7V5a4 4 0 018 0v2h1v8H3V7zm2 0h4V5a2 2 0 00-4 0z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7V5a4 4 0 018 0v2h1v8H3V7zm2 0h4V5a2 2 0 00-4 0z'/%3E%3C/svg%3E") center/contain no-repeat; }
.sim-error { padding: var(--sp-5); color: var(--bad); display: grid; gap: 6px; }
.sim-error code { white-space: pre-wrap; }
x-sim[data-state="loading"] .sim-stage::after { content: "Loading simulation…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: var(--fs-0); }

/* fullscreen / maximised */
.sim-frame:fullscreen { border-radius: 0; display: flex; flex-direction: column; background: var(--sk-surface); overflow: auto; }
.sim-frame:fullscreen .sim-body { flex: 1; }
x-sim.is-max .sim-frame { position: fixed; inset: 0; z-index: 200; border-radius: 0; overflow: auto; }
body.has-max-sim { overflow: hidden; }

/* surfaces */
.sk-surface { position: relative; width: 100%; line-height: 0; }
.sk-canvas { display: block; width: 100%; touch-action: pan-y; }
.sk-split { display: flex; flex-wrap: wrap; }
.sk-pane { min-width: min(100%, 260px); }
.sk-plot { border-top: 1px solid var(--line); }
.sk-split .sk-plot { border-top: 0; }
.sk-split > .sk-pane + .sk-pane { border-left: 1px solid var(--line); }
@media (max-width: 640px) { .sk-split > .sk-pane + .sk-pane { border-left: 0; border-top: 1px solid var(--line); } }
.sk-plot-interactive { cursor: crosshair; }
.sk-plot-interactive:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* drag handles (invisible focusable proxies over canvas-drawn handles) */
.sk-handle { position: absolute; left: 0; top: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; z-index: 2; }
.sk-handle:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sk-handle.is-dragging { cursor: grabbing; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.sk-handle:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* controls */
.sk-ctl { min-width: 0; }
.sk-ctl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sk-label { font: 600 var(--fs-0)/1.3 var(--font-ui); color: var(--ink-2); }
.sk-value { font: 600 var(--fs-0)/1.3 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-help { font-size: 12px; color: var(--muted); }
.sk-readout { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; padding: 6px 10px; border-radius: 8px; background: var(--sunken); }
.sk-readout .sk-value { font-size: var(--fs-1); white-space: normal; margin-left: auto; text-align: right; overflow-wrap: anywhere; }
.sk-select { display: flex; flex-direction: column; gap: 4px; }
.sk-select select { min-height: 36px; padding: 4px 8px; font-size: var(--fs-0); }
.sk-switch { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px 0; cursor: pointer; font: 600 var(--fs-0)/1.3 var(--font-ui); color: var(--ink-2); text-align: left; min-height: 36px; }
.sk-switch-track { width: 36px; height: 20px; border-radius: 20px; background: var(--line-strong); position: relative; flex: none; transition: background .15s; }
.sk-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--raised); box-shadow: var(--shadow-1); transition: transform .15s var(--ease); }
.sk-switch[aria-checked="true"] .sk-switch-track { background: var(--accent); }
.sk-switch[aria-checked="true"] .sk-switch-knob { transform: translateX(16px); }
.sk-btn { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink); font: 600 var(--fs-0)/1 var(--font-ui); cursor: pointer; }
.sk-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.sk-btn:disabled { opacity: .45; cursor: not-allowed; }
.sk-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sk-btn-primary:hover:not(:disabled) { background: var(--accent-2); color: var(--on-accent); }
.sk-btn-quiet { border-color: transparent; background: transparent; color: var(--accent); }
.sk-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px 10px; margin: 0; display: grid; gap: 6px; min-width: 0; }
.sk-group legend { font: 700 12px/1.2 var(--font-ui); letter-spacing: .02em; color: var(--muted); padding: 0 4px; }   /* no upper-casing: legends often contain symbols and units (m ≠ M) */
.sk-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; grid-column: 1 / -1; }
.sk-note { grid-column: 1 / -1; margin: 0; font-size: var(--fs-0); color: var(--muted); line-height: 1.45; }
.is-disabled { opacity: .5; }