/* Companion experiment: the same scene / controls columns as the gravity lab. */
#ball-lab {
  --a-panel:var(--lab-panel,#15212c);
  --a-text:var(--lab-text,#e0e9f1);
  --a-muted:var(--lab-muted,#a4b7c6);
  --a-gold:var(--lab-accent,#efc17c);
  --a-grid:var(--lab-muted,#48717e);
  --a-trail:var(--exp-cyan,#7ad8db);
  margin:20px 0;
}
#ball-lab * {box-sizing:border-box}
#ball-lab header {padding:18px 20px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}
#ball-lab header h2 {margin:0;font-size:16px;font-weight:550;line-height:1.4}
#ball-lab .eyebrow {font-size:12px;letter-spacing:1.7px;color:var(--a-gold);text-transform:uppercase;margin-bottom:8px}
#ball-lab .tag {font-size:12px;color:var(--a-muted)}
#ball-lab canvas {display:block;width:100%;height:440px!important;touch-action:none;cursor:grab}
#ball-lab .legend {display:flex;gap:20px;flex-wrap:wrap;padding:0 20px 16px;color:var(--a-muted);font-size:12px}
#ball-lab .legend span {display:flex;align-items:center;gap:7px}
#ball-lab .line {display:inline-block;width:20px;border-top:2px solid var(--a-trail)}
#ball-lab .dash {border-top:2px dashed var(--a-muted)}
#ball-lab .scene-help {padding:0 20px 12px;margin:0;font-size:12px;color:var(--a-muted)}
#ball-lab footer {padding:10px 20px 18px;color:var(--a-muted);font-size:13px;line-height:1.7}
#ball-lab .labelrow {display:flex;justify-content:space-between;gap:10px}
#ball-lab output {float:none;font-variant-numeric:tabular-nums}
#ball-lab .ends {display:flex;justify-content:space-between;gap:8px;color:var(--a-muted);font-size:12px}
#ball-lab .actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px}
#ball-lab .status {width:100%;color:var(--a-muted);font-size:12px}
#ball-lab .camera-fields {display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
#ball-lab .camera-fields label:last-of-type {grid-column:1/-1}
#ball-lab .camera-fields button {justify-self:start;grid-column:1/-1}
#ball-lab summary {min-height:32px}
#ball-lab button {min-height:44px}
#ball-lab[hidden] {display:none!important}
@media(max-width:760px){
  #ball-lab header {padding:16px 14px 0}
  #ball-lab .tag {display:none}
  #ball-lab canvas {height:320px!important}
}
/* Let the entire disclosure label toggle, including its zoom readout. */
#ball-lab summary output {pointer-events:none}
#ball-lab .launch-help {font-size:12px;line-height:1.7;color:var(--a-muted);margin:8px 0 18px}
