/* Bouncing-ball lesson. Layout comes from ../foundations/styles.css; this file adds only what this page draws.
   Colours: orange = the simulator's truth (the wanted answer), blue = the network, muted = gravity only, red = the 2-neuron network. */
.prereq{max-width:800px;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:8px;background:var(--panel);padding:12px 16px;margin:0 0 30px;font-size:15px}
.prereq p{margin:0}
.check-inline{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.run-steps{background:var(--code-bg);border:1px solid var(--line);border-radius:8px;padding:12px 14px;overflow-x:auto;font-size:13px;line-height:1.7}
.run-steps code{background:none;border:0;padding:0;color:var(--text)}
.plot-truth{fill:none;stroke:var(--orange);stroke-width:3;stroke-dasharray:6 5}
.ball-now{fill:var(--blue-soft);stroke:var(--blue);stroke-width:2.5}
.tile-train{fill:var(--blue);opacity:.75}
.tile-test{fill:var(--orange);opacity:.85}
.plot-svg .tile-label{font-size:13px}
.plot-svg .muted{fill:var(--muted)}
.lr-high{fill:none;stroke:var(--red);stroke-width:2.2}
.lr-low{fill:none;stroke:var(--violet);stroke-width:2.2}
.plot-svg text.lr-high-text{fill:var(--red)}.plot-svg text.lr-low-text{fill:var(--violet)}.plot-svg text.plot-curve-text{fill:var(--blue)}
.floor-band{fill:var(--panel-2)}
.roll-truth{fill:none;stroke:var(--orange);stroke-width:3}
.roll-net{fill:none;stroke:var(--blue);stroke-width:2.4}
.roll-gravity{fill:none;stroke:var(--muted);stroke-width:1.8;stroke-dasharray:5 5}
.roll-small{fill:none;stroke:var(--red);stroke-width:2}
.faint{opacity:.22}
.roll-truth-dot{fill:var(--orange)}.roll-net-dot{fill:var(--blue)}.roll-gravity-dot{fill:var(--muted)}.roll-small-dot{fill:var(--red)}
.plot-svg text.roll-truth-text{fill:var(--orange)}.plot-svg text.roll-net-text{fill:var(--blue)}.plot-svg text.roll-gravity-text{fill:var(--muted)}.plot-svg text.roll-small-text{fill:var(--red)}
#error-plot{margin-top:6px}
@media(max-width:680px){.choice-row span{min-width:0;width:100%}#throw-plot,#rollout-plot,#error-plot,#split-tiles{min-width:520px}.inline-lab{overflow-x:auto}}
.lr-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:680px){.lr-panels{grid-template-columns:1fr}}
/* Network design */
.small-multiples{display:grid;gap:10px}
.small-multiples.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.small-multiples.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.small-multiples.four,.small-multiples.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
.curve{fill:none;stroke-width:1.8}
.curve.seed-a{stroke:var(--blue)}.curve.seed-b{stroke:var(--violet)}.curve.seed-c{stroke:var(--orange)}
.dot{stroke:var(--panel);stroke-width:1.5}
.dot.seed-a{fill:var(--blue)}.dot.seed-b{fill:var(--violet)}.dot.seed-c{fill:var(--orange)}
.dot.clipped{opacity:.6}
.batch-full{fill:none;stroke:var(--muted);stroke-width:2.2;stroke-dasharray:6 4}
.plot-svg text.batch-full-text{fill:var(--muted)}
.heat{fill:var(--orange)}

/* Result tables (one column per measure) */
.results-table td,.results-table th{text-align:right;white-space:nowrap}
.results-table td:first-child,.results-table th:first-child{text-align:left}
.table-scroll{overflow-x:auto;max-width:100%}
/* Three-across panels are drawn at 300 units but shown ~250 px wide: bigger text keeps labels readable. */
.lr-panels .plot-svg text,.small-multiples.three .plot-svg text{font-size:15px}
.lr-panels .plot-svg .plot-note,.small-multiples.three .plot-svg .plot-note{font-size:14px}