/* Section-specific additions for 04-momentum, layered on top of
   toolkit.css and kinematics.css's shared widget primitives. */

/* --- Billiard trails: subtle dashed paths so the split is readable --- */
#billCuePath,
#billTargetPath {
  stroke-dasharray: 4 4;
  stroke-opacity: 0.55;
  fill: none;
}
#billCuePath { stroke: #d64545; }
#billTargetPath { stroke: #2a78d6; }

/* --- Newton's cradle: soften ball edges / motion --- */
#cradleBalls circle {
  transition: none; /* JS drives every frame; avoid double-easing */
}

/* --- Shared styling for the JS-injected widgets
       (#impCatchHost "Hard vs Soft Catch", #bowlHost "Bowling Pins").
       Kept neutral so they inherit the site's look. --- */
.mech-widget {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mech-svg {
  width: 100%;
  height: auto;
  max-height: 200px;
  background: #fbfbfd;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
}
.mech-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}
.mech-controls label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}
.mech-controls input[type="range"] {
  vertical-align: middle;
}
.mech-presets {
  display: inline-flex;
  gap: 0.35rem;
}
.mech-presets button,
.mech-go {
  font: inherit;
  padding: 0.35rem 0.8rem;
  border: 1px solid #c7ced6;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mech-presets button:hover,
.mech-go:hover {
  background: #eef3f9;
}
.mech-presets button.active {
  background: #2a78d6;
  border-color: #2a78d6;
  color: #fff;
}
.mech-go {
  background: #2a78d6;
  border-color: #2a78d6;
  color: #fff;
  font-weight: 600;
}
.mech-go:hover {
  background: #2266bd;
}
.mech-readouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.35rem 1rem;
  font-size: 0.9rem;
}
.mech-readouts b {
  font-variant-numeric: tabular-nums;
}
.mech-verdict {
  grid-column: 1 / -1;
  font-style: italic;
  color: #555;
}

@media (prefers-reduced-motion: reduce) {
  .mech-presets button,
  .mech-go { transition: none; }
}


/* To enable the two new widgets (optional — your index.html edit)
In the Impulse panel (Hard vs. Soft Catch):
<div class="widget">
  <h3>Hard vs. Soft Catch</h3>
  <div id="impCatchHost"></div>
</div>

In the Collisions panel (Bowling‑Pin Scatter — the guide's §4.3 "multi‑object" gap):
<div class="widget">
  <h3>Bowling Pins: Multi-Object Scatter</h3>
  <div id="bowlHost"></div>
</div> */