/* Reuses the academic site's controls and plot styles. */
.deformation-viewer { --measured:#555; --predicted:var(--green); --current:#b56b21; }
.measured-dot { background:var(--measured); }
.predicted-dot { background:var(--predicted); }
.deformation-viewer .data-note { margin-top:24px; }
#deformation-time-value { color:var(--ink); }
#deformation-time { accent-color:var(--accent); }
#deformation-plot .predicted-trace { stroke-dasharray:7 4; }

.recorded-force-result { max-width:900px; margin:32px auto 0; padding-top:24px; border-top:1px solid var(--line); }
.recorded-force-result>p { font-size:15px; }
.recorded-force-result>p.note { font-size:13px; }

.current-dot { background:var(--current); }
#deformation-plot .current-trace { stroke-dasharray:2 4; }
.force-recording-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); align-items:center; gap:24px; margin-top:24px; }
.force-recording-video,.force-recording-chart { min-width:0; }
.force-recording-video figcaption { margin-bottom:10px; font-size:14px; color:var(--muted); }
.force-recording-video video { aspect-ratio:4/3; border-radius:4px; }
.force-recording-chart .legend { gap:6px 16px; }
.force-recording-chart svg { margin-bottom:0; }
.force-recording-controls { margin-top:20px; flex-wrap:wrap; }
.force-recording-controls + .target-control { margin-top:8px; }
@media(max-width:700px) { .force-recording-grid { grid-template-columns:1fr; gap:20px; }.force-recording-video { width:100%; max-width:480px; margin-inline:auto; } }