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

/* --- Run/Reset buttons injected after animated SVG widgets --- */
.mech-go {
  font: inherit;
  margin-top: 0.6rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid #2a78d6;
  border-radius: 6px;
  background: #2a78d6;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mech-go:hover { background: #2266bd; }
.mech-go:active { transform: translateY(1px); }

/* --- Pulley / gear diagrams: crisper strokes, smooth transforms --- */
#pulSingleSvg #pulRope,
#pulTackleSvg line,
#atwoodHost path,
#pulleyDistanceHost path {
  stroke-linecap: round;
  stroke-linejoin: round;
}
#gearA, #gearB, #gearC { transform-box: view-box; }
#gearB { transition: opacity 0.25s ease; }

/* --- Shared styling for the JS-injected widgets
       (#atwoodHost, #pulleyDistanceHost). 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: 240px;
  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-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-go { transition: none; }
  #gearB { transition: none; }
}

/* --- Gear train: crisp meshing teeth, smooth rotation --- */
#gearTrainSvg #gearA path,
#gearTrainSvg #gearB path,
#gearTrainSvg #gearC path {
  stroke-linejoin: round;
}
#gearTrainSvg #gearA,
#gearTrainSvg #gearB,
#gearTrainSvg #gearC {
  transform-box: view-box;
}
#gearTrainSvg #gearB { transition: opacity 0.25s ease; }

/* --- Lever beam tilt eased when present --- */
#levBeam { transition: none; } /* JS drives it every frame */

@media (prefers-reduced-motion: reduce) {
  #gearTrainSvg #gearB { transition: none; }
}


/* To enable the two new widgets (optional — your index.html edit)
<!-- Atwood's machine (guide §5.3) -->
<div class="widget">
  <h3>Atwood's Machine</h3>
  <div id="atwoodHost"></div>
</div>

<!-- Movable-pulley distance puzzle (guide §9) -->
<div class="widget">
  <h3>Movable-Pulley Distance Puzzle</h3>
  <div id="pulleyDistanceHost"></div>
</div> */