/* Physics sandbox kit: launch, predict and lever widgets */
.x-ph { display: grid; gap: 14px; }
.x-ph-stage { width: 100%; border-radius: var(--r-sm); background: var(--surface); border: 1.5px solid var(--line); overflow: hidden; touch-action: none; }
.x-ph-stage canvas { display: block; touch-action: none; }
.x-ph-sliders { gap: 6px; }
.x-ph-sliders .slider { grid-template-columns: minmax(60px, max-content) 1fr minmax(64px, max-content); }
.x-ph.locked .x-ph-sliders { opacity: .6; }
.x-ph-replay { justify-self: start; min-height: 44px; }
.x-ph-pic { max-width: 100%; height: auto; color: var(--ink); }
.step-vis > .vis.x-ph-pic { width: 100%; max-width: 520px; max-height: 300px; }
.x-ph-play { margin-bottom: 12px; }
.x-ph-run { min-width: 140px; }

/* lever: a plank on a pivot; weights drop onto pegs */
.x-lv-stage { position: relative; height: 236px; margin: 0 -4px; user-select: none; -webkit-user-select: none; touch-action: none; }
.x-lv-beam { position: absolute; left: 0; right: 0; top: 0; height: 164px; transition: none; will-change: transform; }
.x-lv-plank { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 7px; background: var(--ink-3); pointer-events: none; }
.x-lv-peg { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-radius: 10px; cursor: pointer; }
.x-lv-peg::after { content: ''; position: absolute; bottom: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--surface); }
.x-lv-peg.pivot { cursor: default; }
.x-lv-peg.pivot::after { display: none; }
.x-lv.picking .x-lv-peg:not(.pivot), .x-lv-peg.over:not(.pivot) { background: var(--accent-soft); }
.x-lv-stack { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; margin-bottom: 16px; }
.x-lv-d { position: absolute; bottom: -22px; font: 700 12px var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; pointer-events: none; }
.x-lv-tok { width: 44px; min-height: 40px; border-radius: 10px; display: grid; place-items: center; align-content: center; line-height: 1; background: var(--sun); color: #2A3033; border: 1.5px solid rgba(0, 0, 0, .18); box-shadow: 0 2px 0 rgba(0, 0, 0, .12); touch-action: none; }
.x-lv-tok b { font: 800 16px var(--round); }
.x-lv-tok small { font-size: 10px; font-weight: 700; opacity: .75; }
.x-lv-tok.free { cursor: grab; }
.x-lv-tok.fix { background: var(--coral); }
.x-lv-tok.fix.kid { background: var(--sky); }
.x-lv-tok.picked { outline: 3px solid var(--accent); outline-offset: 2px; }
.x-lv-tok.dragging { opacity: .35; }
.drag-ghost.x-lv-tok { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; }
.x-lv-fulc { position: absolute; top: 164px; width: 54px; height: 50px; transform: translateX(-50%); display: grid; place-items: start center; pointer-events: none; }
.x-lv-fulc i { width: 0; height: 0; border-left: 24px solid transparent; border-right: 24px solid transparent; border-bottom: 48px solid var(--ink-2); }
.x-lv-fulc.move { pointer-events: auto; cursor: grab; touch-action: none; }
.x-lv-fulc.move i { border-bottom-color: var(--accent); }
.x-lv-fulc.picked i { border-bottom-color: var(--sun); }
.x-lv-fslots { position: absolute; left: 0; right: 0; top: 168px; height: 52px; }
.x-lv-fslot { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); border-radius: 10px; }
.x-lv.picking .x-lv-fslot, .x-lv-fslot.over { background: var(--accent-soft); }
.x-lv-ground { position: absolute; left: -4px; right: -4px; top: 214px; height: 3px; border-radius: 2px; background: var(--line); }
.x-lv-prop { position: absolute; top: 178px; width: 26px; height: 36px; border-radius: 6px 6px 0 0; background: var(--surface-3); transition: opacity .2s, transform .25s; }
.x-lv-prop.l { left: 6px; } .x-lv-prop.r { right: 6px; }
.x-lv.ran .x-lv-prop { opacity: 0; transform: translateY(16px); }
.x-lv-tray { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 60px; padding: 8px; border-radius: var(--r-sm); background: var(--surface-2); }
.x-lv-tray.empty::before { content: ''; }
.x-lv.picking .x-lv-tray { background: var(--accent-soft); }
.x-lv-read { display: flex; justify-content: center; gap: 18px; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.x-lv-read .more b { color: var(--warm); }
.x-lv.locked .x-lv-tok.free, .x-lv.locked .x-lv-fulc.move { cursor: default; }

/* gears and mobiles */
.x-gr-board, .x-mb-board { width: 100%; border-radius: var(--r-sm); background: var(--surface); border: 1.5px solid var(--line); padding: 8px; touch-action: none; user-select: none; -webkit-user-select: none; }
.x-gr-svg, .x-mb-svg { display: block; width: 100%; height: auto; max-height: 300px; color: var(--ink); }
.x-gr-slot.full { cursor: pointer; }
.x-gr.picking .x-gr-slot circle, .x-gr-slot.over circle { stroke: var(--accent); stroke-opacity: 1; }
.x-gr-chip { min-width: 64px; min-height: 64px; padding: 4px 6px; border-radius: 12px; display: grid; justify-items: center; gap: 0; background: var(--surface); border: 1.5px solid var(--line); cursor: grab; touch-action: none; font: 800 13px var(--round); }
.x-gr-chip .vis { width: 40px; height: 40px; }
.x-gr-chip.picked { outline: 3px solid var(--accent); outline-offset: 2px; }
.x-gr-chip.dragging { opacity: .35; }
.drag-ghost.x-gr-chip { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; }
.x-gr-read { min-height: 1.5em; text-align: center; color: var(--ink-2); font-size: 15px; font-variant-numeric: tabular-nums; }
.x-gr-step { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; }
.x-gr-step .toggle { display: grid; place-items: center; padding: 0; }
.x-gr-val { min-width: 84px; text-align: center; font: 800 18px var(--round); font-variant-numeric: tabular-nums; }
.x-mb.picking .x-mb-peg rect, .x-mb-peg.over rect { fill: var(--accent-soft); fill-opacity: .6; }
.x-mb-w.free { cursor: pointer; }