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

/* ---- Bicycle wheel spin (FIX: rotate about the wheel's own centre,
   not the SVG origin, so it doesn't orbit off-screen) ---- */
#pwrBikeWheel {
  animation: pwrWheelSpin linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes pwrWheelSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- Explanatory note text used by the pulling lab / ride status ---- */
.sim-note,
#wkPullNote,
#rcFullStatus {
  font-size: 0.85rem;
  line-height: 1.35;
  color: #475569;
  margin-top: 0.4rem;
  min-height: 1.2em;
}

/* ---- Shared energy-bar colours for new/updated widgets ---- */
.nrg-ke   { fill: #3b82f6; }  /* kinetic  = blue  */
.nrg-pe   { fill: #22c55e; }  /* potential = green */
.nrg-heat { fill: #ef4444; }  /* thermal  = red   */

/* Pendulum live energy split (optional bars) */
#penKEBar { fill: #3b82f6; }
#penPEBar { fill: #22c55e; }

/* ---- Roller-coaster cars ---- */
.rc-car,
#rcLoopCar,
#rcFullCar {
  fill: #f59e0b;
  stroke: #92400e;
  stroke-width: 1.5;
}

/* Draggable / rideable coaster probe affordance */
#rcProbe { cursor: grab; }
#rcProbe:active { cursor: grabbing; }

/* ---- Track styling for the new full-ride widget ---- */
#rcFullTrack {
  fill: none;
  stroke: #64748b;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Stalled / warning status emphasis */
#rcFullStatus.warn { color: #b45309; font-weight: 600; }

/* Buttons added for the ride/reset controls reuse existing button styles;
   these are only fallbacks in case toolkit.css isn't present. */
.energy-btn {
  padding: 0.4rem 0.9rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  cursor: pointer;
  font-size: 0.9rem;
}
.energy-btn:hover { background: #eef2f7; }
.energy-btn:disabled { opacity: 0.5; cursor: default; }


/*
/* optional bits for html - Pulling lab (optional readouts) — inside the work widget's readout area:*/
<span>Coast distance: <strong id="wkCoastVal">0 m</strong></span>
<p id="wkPullNote" class="sim-note"></p>

/* optional bits for html -  Pendulum (optional live energy split) — inside the pendulum widget:*/
<span>KE: <strong id="penKEVal">0 J/kg</strong></span>
<span>PE: <strong id="penPEVal">0 J/kg</strong></span>
<svg viewBox="0 0 60 110" width="60" height="110">
  <rect id="penKEBar" x="6"  y="100" width="18" height="0" class="nrg-ke"></rect>
  <rect id="penPEBar" x="34" y="100" width="18" height="0" class="nrg-pe"></rect>
</svg>

/* optional bits - Coaster speed "Ride" button — inside that widget's controls */
<button id="rcRideBtn" class="energy-btn">Ride ▶</button>

/* optional bits - Loop car + ride button — inside the loop widget's <svg id="rcLoopSvg">: */
<circle id="rcLoopCar" r="6" class="rc-car"></circle>
and near its controls:
<button id="rcLoopRideBtn" class="energy-btn">Send car around ▶</button>


/* optional bits - NEW TAB — "Full Ride & Energy" (add a new tab button + panel following your existing tab pattern) */
<section class="widget">
  <h3>Full Ride &amp; Energy Accounting</h3>
  <p>Watch a car released from the highest hill. Add friction to see mechanical
     energy turn into heat — and find where the car stalls.</p>
  <svg id="rcFullSvg" viewBox="0 0 480 220" width="100%">
    <path id="rcFullTrack"></path>
    <circle id="rcFullCar" r="7"></circle>
    <!-- energy bars -->
    <g transform="translate(410,90)">
      <rect id="rcFullBarKE"   x="0"  y="110" width="16" height="0" class="nrg-ke"></rect>
      <rect id="rcFullBarPE"   x="24" y="110" width="16" height="0" class="nrg-pe"></rect>
      <rect id="rcFullBarHeat" x="48" y="110" width="16" height="0" class="nrg-heat"></rect>
    </g>
  </svg>
  <div class="controls">
    <label>Friction μ:
      <input id="rcFullMuSlider" type="range" min="0" max="0.05" step="0.001" value="0">
      <span id="rcFullMuVal">0.000</span>
    </label>
    <button id="rcFullPlayBtn" class="energy-btn">Play ▶</button>
    <button id="rcFullResetBtn" class="energy-btn">Reset</button>
  </div>
  <div class="readouts">
    <span>KE: <strong id="rcFullKEVal">0 J</strong></span>
    <span>PE: <strong id="rcFullPEVal">0 J</strong></span>
    <span>Heat: <strong id="rcFullHeatVal">0 J</strong></span>
    <span>Total: <strong id="rcFullTotalVal">0 J</strong></span>
  </div>
  <p id="rcFullStatus" class="sim-note"></p>
</section>
 */