/* =============================================================================
 *  massaction.css — everything inside a MassAction root, and nothing outside it.
 *
 *  The split matches massaction.js's: the HOST owns its chrome (glycolysis puts
 *  the sim in a modal card, the enzymes page will put it in a panel), this file
 *  owns the sim. So every rule here is scoped under `.massaction` and no rule
 *  here positions, sizes or frames that root — the host decides where it sits.
 *
 *  Colours and type come from the site sheet's variables, so a host that loads it
 *  site's sheet needs nothing else. The two species colours are the exception:
 *  #4f5bd5 / #a855f7 are the canvas's own, set in JS (COL) and repeated here
 *  only where CSS has to match them.
 * ========================================================================== */

/* THE SCENARIOS ARE TABS: they are the sim's subject, not a setting on it. A
   toggle buried under the canvas made the drop step look like an option most
   students would never press. The title changes with the tab too. */
.massaction .ma-tabs{display:flex;gap:4px;margin:0 0 14px;
  border-bottom:1px solid var(--border-hair)}
.massaction .ma-tabs button{font-family:var(--font-slab);font-weight:700;font-size:13px;
  letter-spacing:.2px;padding:8px 16px 9px;border:none;background:none;
  color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;
  margin-bottom:-1.5px}
.massaction .ma-tabs button:hover{color:var(--ink)}
.massaction .ma-tabs button.on{color:#4f5bd5;border-bottom-color:#4f5bd5}

/* THE TERM, over the title: a student should leave with the name — they meet it
   again in enzyme kinetics and every equilibrium problem after. */
.massaction .ma-kick{font-family:var(--font-display,var(--font-slab));
  font-weight:600;font-size:var(--cap-sm,11.5px);
  letter-spacing:var(--cap-track,1.5px);text-transform:uppercase;
  color:var(--text-muted);margin:0 0 5px}
.massaction .ma-title{font-family:var(--font-slab);font-weight:700;font-size:19px;
  margin:0 0 3px;color:var(--ink)}
.massaction .ma-sub{font-family:var(--font-sans);font-size:12.5px;color:var(--muted);
  line-height:1.5;margin:0 0 14px}
.massaction .ma-sub b{color:var(--ink);font-weight:600}

.massaction .ma-canvas{display:block;width:100%;height:250px;border-radius:var(--radius-md);
  background:var(--surface-card);border:1px solid var(--border-hair)}

/* THE BACK COUNTER IS THE POINT — a student watching a flat step settle assumes
   it stopped; the ticking number says it did not. */
.massaction .ma-row{display:flex;gap:14px;align-items:stretch;margin:12px 0 0}
.massaction .ma-spec{flex:1;display:flex;align-items:center;gap:8px;
  padding:7px 10px;border:1px solid var(--border-hair);border-radius:var(--radius-md)}
.massaction .ma-dot{width:13px;height:13px;border-radius:50%;flex:none}
.massaction .ma-nm{font-family:var(--font-slab);font-weight:700;font-size:13px}
.massaction .ma-ct{margin-left:auto;font-family:var(--font-slab);font-weight:700;font-size:20px}
.massaction .ma-rate{display:flex;flex-direction:column;justify-content:center;
  gap:2px;min-width:118px;font-family:var(--font-sans);font-size:11.5px;color:var(--muted)}
.massaction .ma-rate b{font-family:var(--font-slab);font-size:13px;color:var(--ink)}

/* THE NET, full-width: two nonzero counters are not a direction until someone
   subtracts them, and the subtraction is the whole idea. Reads "balanced", never
   "stopped" — the traffic evens out, it does not stop. */
.massaction .ma-net{display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:10px;padding:9px 14px;border-radius:var(--radius-md);
  background:transparent;border:1px solid var(--border-hair);
  transition:background .3s ease,border-color .3s ease}
.massaction .ma-net i{font-size:30px;line-height:1;
  transition:color .25s ease,transform .3s cubic-bezier(.34,.9,.3,1)}
.massaction .ma-net span{font-family:var(--font-slab);font-weight:700;font-size:13px;
  letter-spacing:1px;text-transform:uppercase;text-align:center;
  transition:color .25s ease}

/* ΔE, AS A PICTURE AND A NUMBER. Free energy as height. Levels and gap label
   are computed from the scenario's drop at render time, never typed. */
.massaction .ma-eq{display:flex;align-items:center;justify-content:center;gap:13px;
  margin-top:8px;font-family:var(--font-sans);font-size:12px;color:var(--muted)}
.massaction .ma-eq svg{flex:none;width:212px;height:124px;overflow:visible}
.massaction .ma-eq b{font-family:var(--font-slab);font-size:15px;color:var(--ink);
  letter-spacing:.2px}
.massaction .ma-eq .rc{fill:none;stroke:var(--ink);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.massaction .ma-eq .axl{stroke:var(--muted);stroke-width:1.2;opacity:.35}
.massaction .ma-eq .ea{font-family:var(--font-slab);font-weight:700;font-size:11px;
  fill:var(--ink)}
.massaction .ma-eq .gap{stroke:var(--muted);stroke-width:1.3;stroke-dasharray:3 3}
.massaction .ma-eq .gaparr{stroke:var(--ink);stroke-width:1.4}
.massaction .ma-eq .lb{font-family:var(--font-slab);font-weight:700;font-size:10.5px}
.massaction .ma-eq .ax{font-family:var(--font-sans);font-weight:600;font-size:8px;
  fill:var(--muted);letter-spacing:.5px;text-transform:uppercase}

/* THE BARRIER SLIDER, rendered only when a host passes `ea` as a range — the
   enzymes lesson's whole interaction. Glycolysis pins EA and never sees this. */
.massaction .ma-slider{display:flex;align-items:center;gap:11px;margin-top:10px;
  padding:8px 12px;border-radius:var(--radius-md);border:1px solid var(--border-hair);
  font-family:var(--font-sans);font-size:12.5px;color:var(--muted)}
.massaction .ma-slider input{flex:1;accent-color:#4f5bd5;cursor:pointer}
.massaction .ma-slider b{font-family:var(--font-slab);font-size:13px;color:var(--ink);
  min-width:62px;text-align:right}

.massaction .ma-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
/* The site sheet's .pill--ghost. These are the demo's controls, not its invitation:
   hollow is what the component already says, and the shape, hover and focus
   ring stop being this file's business. */

.massaction .ma-text{font-size:13px;line-height:1.55;color:#5a5346;margin:13px 0 0}
.massaction .ma-text b{color:var(--ink)}

@media (max-width:920px){
  .massaction .ma-eq{flex-direction:column;gap:6px;text-align:center}
  .massaction .ma-canvas{height:200px}
  .massaction .ma-row{flex-wrap:wrap}
}