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

.stage-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.stage-list span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--surface-1);
}

/* --- Verdict badges reused by coaster/bridge/etc. --- */
.verdict-badge {
  display: inline-block; margin-top: 8px; padding: 6px 10px;
  border-radius: 8px; font-size: 13px;
  background: var(--surface-1, #f2f4f7); border: 1px solid #d7dee6;
}
.verdict-badge.good { background: #e8f6ee; border-color: #9dd8ba; color: #1b6b43; }
.verdict-badge.bad { background: #fdeaea; border-color: #efb3b3; color: #a12626; }

/* --- Self-building interactive widgets
       (#coasterRideHost, #bowlingHookHost, #bridgeDeckHost) --- */
.cap-widget { display: flex; flex-direction: column; gap: 0.75rem; }
.cap-svg {
  width: 100%; height: auto; max-height: 260px;
  background: #fbfbfd; border: 1px solid #e2e6ea; border-radius: 8px; overflow: visible;
}
.cap-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; font-size: 0.9rem; }
.cap-controls label { display: inline-flex; align-items: center; gap: 0.4rem; }
.cap-go {
  font: inherit; padding: 0.35rem 0.85rem; border: 1px solid #2a78d6;
  border-radius: 6px; background: #2a78d6; color: #fff; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease;
}
.cap-go:hover { background: #2266bd; }
.cap-readouts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.35rem 1rem; font-size: 0.9rem;
}
.cap-readouts b { font-variant-numeric: tabular-nums; }
.cap-verdict { grid-column: 1 / -1; font-style: italic; color: #555; }

/* --- G-force meter --- */
.cap-gmeter {
  grid-column: 1 / -1; position: relative;
  height: 14px; border-radius: 7px; background: #eef1f5;
  border: 1px solid #dbe1e8; overflow: hidden;
}
.cap-gmeter-fill { height: 100%; width: 0%; background: #1baf7a; transition: width 0.05s linear; }
.cap-gmeter-1g { position: absolute; top: -2px; bottom: -2px; left: 20%; width: 2px; background: #33415c; opacity: 0.5; }

@media (prefers-reduced-motion: reduce) { .cap-go, .cap-gmeter-fill { transition: none; } }


/* To enable the new widgets (your index.html edit)
Everything existing keeps working unchanged. Add host divs where you want the new visuals:

<!-- Roller-coaster tab: the wavy-track ride you asked for -->
<div class="widget">
  <h3>Ride the Coaster — velocity, forces &amp; G's at every point</h3>
  <div id="coasterRideHost"></div>
</div>

<!-- Bowling tab -->
<div class="widget">
  <h3>The Hook: Skid → Roll (top-down)</h3>
  <div id="bowlingHookHost"></div>
</div>

<!-- Bridge tab -->
<div class="widget">
  <h3>Watch the Deck Resonate</h3>
  <div id="bridgeDeckHost"></div>
</div> */