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

/* --- Collapsible differential-equation blocks (math enthusiasts) --- */
.osc-eq {
  margin: 0.6rem 0;
  border: 1px solid #d7dee6;
  border-radius: 8px;
  background: #f7f9fc;
  font-size: 0.9rem;
}
.osc-eq > summary {
  cursor: pointer;
  padding: 0.5rem 0.8rem;
  font-weight: 600;
  color: #2a78d6;
  list-style: none;
}
.osc-eq > summary::-webkit-details-marker { display: none; }
.osc-eq > summary::before { content: "∑  "; }
.osc-eq[open] > summary { border-bottom: 1px solid #e2e6ea; }
.osc-eq-body { padding: 0.6rem 0.9rem; line-height: 1.5; color: #333; }
.osc-formula {
  margin: 0.5rem 0;
  padding: 0.5rem 0.7rem;
  background: #fff;
  border-left: 3px solid #2a78d6;
  border-radius: 4px;
  font-family: "Cambria Math", Georgia, serif;
  font-size: 1.02rem;
  overflow-x: auto;
}
.osc-list { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.osc-list li { margin: 0.25rem 0; }

/* --- Injected companion SVGs (live driven response) --- */
.osc-companion {
  width: 100%;
  height: auto;
  max-height: 130px;
  margin-top: 0.5rem;
  background: #fbfbfd;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
}
/* JS drives injected marks each frame; avoid double-easing */
#resCurveSvg circle, #beatsSvg circle, #beatsSvg line { transition: none; }

/* --- Shared styling for the JS-injected widgets
       (#smallAngleHost, #coupledHost, #lissajousHost). --- */
.osc-widget { display: flex; flex-direction: column; gap: 0.75rem; }
.osc-svg {
  width: 100%; height: auto; max-height: 220px;
  background: #fbfbfd; border: 1px solid #e2e6ea; border-radius: 8px;
}
.osc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.osc-controls label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.osc-presets { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.osc-presets button, .osc-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;
}
.osc-presets button:hover, .osc-go:hover { background: #eef3f9; }
.osc-presets button.active { background: #2a78d6; border-color: #2a78d6; color: #fff; }
.osc-go { background: #2a78d6; border-color: #2a78d6; color: #fff; font-weight: 600; }
.osc-go:hover { background: #2266bd; }
.osc-readouts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.35rem 1rem; font-size: 0.9rem;
}
.osc-readouts b { font-variant-numeric: tabular-nums; }
.osc-verdict { grid-column: 1 / -1; font-style: italic; color: #555; }

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

/* 
To enable the three new widgets (your index.html edit)
The equation blocks and the resonance/beats/driven animations need no HTML change — they're injected after existing SVGs. Only the three brand‑new widgets need host divs:

<!-- Pendulums tab -->
<div class="widget">
  <h3>Small-Angle vs. Exact Pendulum</h3>
  <div id="smallAngleHost"></div>
</div>

<!-- Coupled Oscillators tab -->
<div class="widget">
  <h3>Coupled Pendulums &amp; Normal Modes</h3>
  <div id="coupledHost"></div>
</div>

<!-- Coupled Oscillators tab (or a new "Lissajous" sub-tab) -->
<div class="widget">
  <h3>Lissajous Figures</h3>
  <div id="lissajousHost"></div>
</div> */