/*
 * Answer block: ```sim scenes - the moving pictures beside a sim's sliders
 * (blocks/sim_scenes.js): a balloon of gas, a piston, a beaker, a
 * projectile, a pendulum, a wave and a circuit. sim.css lays out the card
 * and the stage; this sheet only colours what the scenes draw.
 *
 * Ink, labels and roles read the blocks.css tokens, so both themes and any
 * palette apply. Materials (metal, brass, glass, the ball, the ground) are
 * the only colours minted here (--ab-ss-*), declared on the figure so a
 * palette can restate them there. Hues that carry a quantity (temperature,
 * concentration, a resistor's heat) are computed in the script as hsl() and
 * read the same on either theme.
 *
 * Sizes are viewBox units: every scene is 200 x 200.
 */
.ab-ss {
  --ab-ss-metal-hi: #c3ccc8;
  --ab-ss-metal-mid: #838d88;
  --ab-ss-metal-lo: #4a524e;
  --ab-ss-brass-hi: #fff0c4;
  --ab-ss-brass-mid: #dcaa45;
  --ab-ss-brass-lo: #84601a;
  --ab-ss-ball-hi: #ffe2cf;
  --ab-ss-ball-mid: #f27d58;
  --ab-ss-ball-lo: #9a3519;
  --ab-ss-ground-hi: rgba(255, 255, 255, 0.07);
  --ab-ss-ground-lo: rgba(255, 255, 255, 0);
  --ab-ss-glass: rgba(214, 232, 242, 0.62);
  --ab-ss-glass-back: rgba(190, 220, 240, 0.045);
  --ab-ss-tube: rgba(214, 232, 242, 0.1);
  --ab-ss-charge-core: #f2fffb;
  --ab-ss-shadow: rgba(0, 0, 0, 0.55);
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: hidden;
  color: var(--ab-ink);
}
body[data-theme="light"] .ab-ss {
  --ab-ss-metal-hi: #f5f7f6;
  --ab-ss-metal-mid: #c2cac5;
  --ab-ss-metal-lo: #808a85;
  --ab-ss-brass-hi: #fff4d6;
  --ab-ss-brass-mid: #d39b2c;
  --ab-ss-brass-lo: #7d560f;
  --ab-ss-ball-hi: #ffe0cc;
  --ab-ss-ball-mid: #e8643c;
  --ab-ss-ball-lo: #8f2c10;
  --ab-ss-ground-hi: rgba(19, 32, 27, 0.07);
  --ab-ss-ground-lo: rgba(19, 32, 27, 0);
  --ab-ss-glass: rgba(52, 86, 108, 0.5);
  --ab-ss-glass-back: rgba(80, 130, 170, 0.06);
  --ab-ss-tube: rgba(80, 130, 170, 0.08);
  --ab-ss-charge-core: #ffffff;
  --ab-ss-shadow: rgba(19, 32, 27, 0.32);
}

/* ── Gradient stops that follow the theme ───────────────────────────── */
.ab-ss .ab-ss-metal-hi { stop-color: var(--ab-ss-metal-hi); }
.ab-ss .ab-ss-metal-mid { stop-color: var(--ab-ss-metal-mid); }
.ab-ss .ab-ss-metal-lo { stop-color: var(--ab-ss-metal-lo); }
.ab-ss .ab-ss-brass-hi { stop-color: var(--ab-ss-brass-hi); }
.ab-ss .ab-ss-brass-mid { stop-color: var(--ab-ss-brass-mid); }
.ab-ss .ab-ss-brass-lo { stop-color: var(--ab-ss-brass-lo); }
.ab-ss .ab-ss-ball-hi { stop-color: var(--ab-ss-ball-hi); }
.ab-ss .ab-ss-ball-mid { stop-color: var(--ab-ss-ball-mid); }
.ab-ss .ab-ss-ball-lo { stop-color: var(--ab-ss-ball-lo); }
.ab-ss .ab-ss-ground-hi { stop-color: var(--ab-ss-ground-hi); }
.ab-ss .ab-ss-ground-lo { stop-color: var(--ab-ss-ground-lo); }
.ab-ss .ab-ss-charge-core { stop-color: var(--ab-ss-charge-core); }
.ab-ss stop.ab-ss-charge { stop-color: var(--ab-accent); }

/* ── Shared marks ───────────────────────────────────────────────────── */
.ab-ss .ab-ss-sym {
  font-family: var(--ab-font-math);
  font-size: 13px;
  font-style: italic;
  font-weight: 500;
  text-anchor: middle;
  fill: var(--ab-ink);
}
.ab-ss .ab-ss-quiet { fill: var(--ab-muted); }
.ab-ss .ab-ss-calc,
.ab-ss .is-solved .ab-ss-sym,
.ab-ss .ab-ss-sym.is-solved { fill: var(--ab-calc); }
.ab-ss .ab-ss-sign { font-style: normal; font-size: 11px; }
.ab-ss .ab-ss-spark { fill: #fff; opacity: 0.7; }
.ab-ss .ab-ss-guide {
  stroke: var(--ab-rule); stroke-width: 1; stroke-dasharray: 3 4; fill: none;
}
.ab-ss .ab-ss-arc {
  fill: none; stroke: var(--ab-muted); stroke-width: 1.3;
  stroke-dasharray: 2 4; stroke-linecap: round; opacity: 0.75;
}
.ab-ss .ab-ss-angle { fill: none; stroke: var(--ab-muted); stroke-width: 1.1; }
.ab-ss .ab-ss-dim { fill: none; stroke: var(--ab-muted); stroke-width: 1.1; stroke-linecap: round; }
.ab-ss .ab-ss-mark .ab-ss-dim { stroke: var(--ab-muted); opacity: 0.7; }
.ab-ss .ab-ss-mark.is-solved .ab-ss-dim { stroke: var(--ab-calc); }
.ab-ss .ab-ss-metal { stroke: var(--ab-ss-metal-lo); stroke-width: 0.6; }
.ab-ss .ab-ss-live { transition: opacity 0.3s ease; }

/* No solution for one of the quantities: the moving parts dim and the
   container's outline goes dashed, so the picture says "unknown". */
.ab-ss.is-unknown .ab-ss-live { opacity: 0.38; }
.ab-ss.is-unknown .ab-ss-shell,
.ab-ss.is-unknown .ab-ss-glass,
.ab-ss .ab-ss-resistor.is-unknown { stroke-dasharray: 4 3; }

/* ── gas ────────────────────────────────────────────────────────────── */
.ab-ss .ab-ss-shell { stroke-width: 1.2; fill-opacity: 0.94; }
.ab-ss .ab-ss-rim { fill: none; stroke: #fff; stroke-opacity: 0.32; stroke-width: 2; stroke-linecap: round; }
.ab-ss .ab-ss-string {
  fill: none; stroke: var(--ab-muted); stroke-width: 1.15; stroke-linecap: round; opacity: 0.8;
}
.ab-ss-gas .ab-ss-dot { stroke: rgba(10, 20, 40, 0.2); stroke-width: 0.45; }
.ab-ss-piston .ab-ss-dot { stroke: rgba(10, 20, 40, 0.22); stroke-width: 0.4; }

/* ── piston ─────────────────────────────────────────────────────────── */
.ab-ss .ab-ss-groove { stroke: var(--ab-ss-metal-lo); stroke-width: 0.8; opacity: 0.55; }
.ab-ss .ab-ss-on-metal {
  font-size: 11px; font-style: italic; fill: var(--ab-ss-metal-lo);
}
body[data-theme="light"] .ab-ss .ab-ss-on-metal { fill: #3d4541; }
.ab-ss .ab-ss-arrow {
  fill: none; stroke: var(--ab-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ab-ss .ab-ss-tube { fill: var(--ab-ss-tube); stroke: var(--ab-ss-glass); stroke-width: 1.2; }
.ab-ss .ab-ss-tick { stroke: var(--ab-muted); stroke-width: 1; }

/* ── beaker ─────────────────────────────────────────────────────────── */
.ab-ss .ab-ss-glass {
  fill: none; stroke: var(--ab-ss-glass); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.ab-ss .ab-ss-glass-tint { stop-color: var(--ab-ss-glass-back); }
.ab-ss .ab-ss-glint { opacity: 0.55; }
body[data-theme="light"] .ab-ss .ab-ss-glint { opacity: 0.9; }
.ab-ss .ab-ss-meniscus { fill: none; stroke: #fff; stroke-opacity: 0.55; stroke-width: 1.4; }
body[data-theme="light"] .ab-ss .ab-ss-meniscus { stroke: #2f6f99; stroke-opacity: 0.35; }
.ab-ss .ab-ss-grad { stroke: var(--ab-muted); stroke-width: 1; opacity: 0.8; }
.ab-ss .ab-ss-solute { stroke: rgba(5, 25, 50, 0.35); stroke-width: 0.5; }

/* ── projectile ─────────────────────────────────────────────────────── */
.ab-ss .ab-ss-ground { stroke: var(--ab-rule); stroke-width: 1.4; }
.ab-ss .ab-ss-apex { fill: var(--ab-calc); }
.ab-ss .ab-ss-mark .ab-ss-dim { stroke-dasharray: none; }
.ab-ss-projectile .ab-ss-mark path.ab-ss-dim { stroke: var(--ab-calc); opacity: 0.85; }
.ab-ss-projectile .ab-ss-mark:first-of-type path.ab-ss-dim { stroke-dasharray: 3 3; }
.ab-ss .ab-ss-launcher { fill: var(--ab-ss-metal-mid); stroke: var(--ab-ss-metal-lo); stroke-width: 0.8; }
.ab-ss .ab-ss-vec { stroke: var(--ab-measure); stroke-width: 1.8; stroke-linecap: round; }
.ab-ss .ab-ss-vec-head { fill: var(--ab-measure); }
.ab-ss .ab-ss-shadow { fill: var(--ab-ss-shadow); }
.ab-ss .ab-ss-trail { fill: var(--ab-ss-ball-mid); }
.ab-ss .ab-ss-ball { stroke: var(--ab-ss-ball-lo); stroke-width: 0.6; }
.ab-ss .ab-ss-ring { fill: none; stroke: var(--ab-muted); stroke-width: 1.2; }

/* ── pendulum ───────────────────────────────────────────────────────── */
.ab-ss .ab-ss-hatch { stroke: var(--ab-rule); stroke-width: 1.2; stroke-linecap: round; }
.ab-ss .ab-ss-rod { stroke: var(--ab-ink); stroke-width: 1.6; stroke-linecap: round; opacity: 0.85; }
.ab-ss .ab-ss-bob { stroke: var(--ab-ss-brass-lo); stroke-width: 0.8; }
.ab-ss .ab-ss-ghost { fill: var(--ab-ss-brass-mid); }
.ab-ss .ab-ss-pivot { fill: var(--ab-card); stroke: var(--ab-ink); stroke-width: 1.4; }

/* ── wave ───────────────────────────────────────────────────────────── */
.ab-ss .ab-ss-wave {
  fill: none; stroke: var(--ab-calc); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.ab-ss .ab-ss-wave-glow {
  fill: none; stroke: var(--ab-calc); stroke-width: 10; stroke-opacity: 0.1;
  stroke-linecap: round; stroke-linejoin: round;
}
.ab-ss .ab-ss-guide-hi { stroke: var(--ab-accent); stroke-dasharray: 2 3; opacity: 0.7; }
.ab-ss .ab-ss-bead { fill: var(--ab-ink); stroke: var(--ab-card); stroke-width: 1.4; }
.ab-ss .ab-ss-bead.is-marked { fill: var(--ab-accent); stroke-width: 1.8; }

/* ── circuit ────────────────────────────────────────────────────────── */
.ab-ss .ab-ss-wire {
  fill: none; stroke: var(--ab-ink); stroke-width: 2; opacity: 0.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* The hot overlay's stroke is the resistor's heat, set by the script. */
.ab-ss .ab-ss-resistor,
.ab-ss .ab-ss-resistor-hot {
  fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ab-ss .ab-ss-resistor { stroke: var(--ab-ink); }
.ab-ss .ab-ss-resistor-hot { stroke-width: 2.6; }
.ab-ss .ab-ss-plate { stroke: var(--ab-ink); stroke-width: 2; stroke-linecap: round; }
.ab-ss .ab-ss-plate.is-short { stroke-width: 4.2; }
.ab-ss .ab-ss-flow { fill: none; stroke: var(--ab-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .ab-ss .ab-ss-live { transition: none; }
}