/* The Mill and Waterworks (School Launch Calculus side path): the pictures inside each station. The shared engine styles are
   in /courses/shared/shop-game-v2/shop-game.css; this file only adds the mill's picture pieces and its turning wheels.
   No style attributes anywhere. Every text color here keeps at least 4.5:1 contrast on the background it sits on. */
.noscript{font:18px Georgia,serif;padding:24px;color:#1F1A15;background:#EEF0E4}
.sg-app .sg-title{letter-spacing:.01em}
.ml-svg{display:block;width:100%;height:auto;max-width:560px;margin:0 auto}
.ml-gridwrap{max-width:420px;margin:0 auto}
.ml-grid{max-width:420px}
.sg-app .sg-choices{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sg-app .sg-choices:not(.sg-choices-wide) .sg-choice{white-space:nowrap}
.sg-app .sg-choices-wide{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.ml-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ml-center{justify-content:center;text-align:center}
.ml-cap{margin:0 0 8px;font-size:20px;font-weight:700;color:#1F1A15;text-align:center;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ml-note{margin:10px 0 0;font-size:16px;font-weight:700;color:#4A4A3E;text-align:center}
/* the key to a graph's two curves */
.ml-key{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:700;color:#1F1A15;background:#FFFDF6;border:2px solid #C9C8B2;border-radius:999px;padding:4px 12px;margin-bottom:8px}
.ml-swatch{display:inline-block;width:22px;height:5px;border-radius:3px}
.ml-sw-red{background:#A8441C}.ml-sw-blue{background:#24496A}
/* the ledger: chalk on a dark slate board */
.ml-slate{background:#2F3B3A;border:6px solid #8C6A3E;border-radius:14px;padding:12px 18px 14px;color:#F4F1E8;box-shadow:inset 0 0 0 2px #1C1712;max-width:640px;margin:0 auto}
.ml-slate-title{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#D9E2D6;margin-bottom:6px}
.ml-slate-big{margin:4px 0 8px;font-size:24px;font-weight:700;color:#FFFFFF;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ml-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ml-lines li{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;border-bottom:1px dashed #6E7F7C;padding-bottom:6px}
.ml-lines li:last-child{border-bottom:0}
.ml-move{flex:0 1 240px;font-size:15px;font-weight:700;color:#D9E2D6}
.ml-res{font-size:20px;font-weight:700;color:#FFFFFF;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-width:0}
.ml-res-sm{font-size:17px}
.ml-chalk-note{margin:10px 0 0;font-size:15px;color:#D9E2D6}
/* tables of values */
.ml-tablewrap{overflow-x:auto;max-width:100%;margin:0 auto 6px}
.ml-table{margin:0 auto;border-collapse:collapse;font-size:18px;font-weight:700;color:#1F1A15;font-variant-numeric:tabular-nums}
.ml-table th,.ml-table td{padding:6px 14px;border:2px solid #C9C8B2;text-align:center;background:#FFFFFF}
.ml-table th{background:#E3E2C8}
.ml-table td.ml-hit{background:#C6DDB0;border-color:#2E5824}
/* the waterwheel and the gears turn slowly; the race water flows. All of it stops with the motion switch. */
.ml-spin{transform-box:fill-box;transform-origin:center;animation:ml-spin 16s linear infinite}
.ml-slow{animation-duration:24s}
.ml-spin-rev{transform-box:fill-box;transform-origin:center;animation:ml-spin 14.4s linear infinite reverse}
@keyframes ml-spin{to{transform:rotate(360deg)}}
.ml-flow path{stroke-dasharray:14 10;animation:ml-flow 2.4s linear infinite}
@keyframes ml-flow{to{stroke-dashoffset:-24}}
.sg2-still .ml-spin,.sg2-still .ml-spin-rev,.sg2-still .ml-flow path{animation:none}
@media (prefers-reduced-motion:reduce){.ml-spin,.ml-spin-rev,.ml-flow path{animation:none}}
@media (max-width:560px){
  .ml-cap{font-size:17px}
  .ml-res{font-size:18px}
  .ml-table{font-size:16px}
  .ml-table th,.ml-table td{padding:5px 9px}
}
.ml-svg-mid{max-width:420px}
.ml-table.ml-tight{font-size:16px}
.ml-table.ml-tight th,.ml-table.ml-tight td{padding:5px 8px}