/* ============================================================
   Studio widget framework — the manipulate-left / live-math-right shell and the
   smoothly-updating "math box". Colours use the app's design tokens with
   standalone fallbacks, so the same CSS themes inside Erudia (light/dark) and
   works in the bare demo pages.  Pairs with js/mathbox.js + js/anim.js.
   ============================================================ */
.mw-stage{
  --mw-surface:var(--surface-1,#fffdf8); --mw-ink:var(--ink,#1d1c22);
  --mw-soft:var(--ink-soft,#6f6a60); --mw-line:var(--line,#e3d8c4);
  --mw-accent:var(--accent,#d99a16); --mw-accent-deep:var(--accent-deep,#b97f0c);
  --mw-true:var(--green,#0e8463); --mw-false:var(--red,#b3471f);
  --mw-disp:var(--font-display,"Bricolage Grotesque",system-ui,sans-serif);
  --mw-math:var(--font-math,"Fraunces",Georgia,serif);
  --mw-mono:var(--font-mono,"JetBrains Mono",monospace);
  display:flex;gap:22px;flex-wrap:wrap;align-items:stretch;width:100%;
  max-width:980px;margin-inline:auto;
}
.mw-panel{
  background:var(--mw-surface);border:2px solid var(--mw-ink);border-radius:16px;
  box-shadow:5px 5px 0 var(--mw-ink);padding:18px;min-width:300px;color:var(--mw-ink);
}
.mw-play{flex:1 1 440px} .mw-math{flex:1 1 360px;display:flex;flex-direction:column}
/* dark theme softens the hard ink shadow into the heritage look */
html[data-theme="dark"] .mw-panel{box-shadow:var(--shadow-card,0 12px 30px -18px rgba(0,0,0,.65))}

.mw-kicker{font-family:var(--mw-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mw-accent-deep);margin-bottom:10px}
.mw-title{font-family:var(--mw-disp);font-weight:700;font-size:1.05rem;margin:0 0 4px}
.mw-note{color:var(--mw-soft);font-size:.82rem;margin:0 0 14px}

/* ---- the math box: lines of atoms ---- */
.mw-box{display:flex;flex-direction:column;gap:16px;margin:auto 0;font-family:var(--mw-math)}
.mw-line .mw-tag{font-family:var(--mw-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mw-soft);display:block;margin-bottom:5px}
.mw-row{font-size:1.45rem;display:flex;flex-wrap:wrap;align-items:center;gap:.14em;min-height:1.5em}
.mw-atom{display:inline-flex;align-items:center;transition:opacity .32s ease,transform .32s ease}
.mw-atom.mw-enter{opacity:0;transform:translateY(7px) scale(.92)}
.mw-atom.mw-exit{opacity:0;transform:translateY(-5px)}
/* RULE 2 — concept colour: a quantity wears ONE colour across slider, picture & symbol */
.mw-c1{color:var(--accent,#bf8a14)}   .mw-c2{color:var(--green,#0e8463)}
.mw-c3{color:var(--violet,#6e4fe0)}   .mw-c4{color:var(--blue,#356aa3)}   .mw-c5{color:var(--red,#df3b27)}
/* RULE 2 — change signal: a brief, zero-clutter highlight in the atom's OWN colour
   (signal by redistributing emphasis, never by adding clutter) */
@keyframes mw-sig{0%{background:color-mix(in srgb,currentColor 24%,transparent);transform:scale(1.13)}
                  100%{background:transparent;transform:scale(1)}}
.mw-atom.mw-sig{animation:mw-sig .5s ease;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  .mw-atom{transition:none} .mw-atom.mw-sig,.mw-atom.mw-enter{animation:none;opacity:1;transform:none}
}
/* keyboard focus — a visible ring on every interactive control in the framework (WCAG 2.4.7).
   Sliders are native <input type=range> (arrow-key operable); toggles/buttons are native <button>. */
.mw-play input[type="range"]:focus-visible,
.mw-play button:focus-visible,
.tt-toggle:focus-visible,
.worked-next:focus-visible{ outline:3px solid var(--mw-accent); outline-offset:3px; border-radius:8px }
.mw-foot{font-family:var(--mw-mono);font-size:.76rem;color:var(--mw-soft);
  border-top:1px dashed var(--mw-line);padding-top:12px;margin-top:6px}
.mw-foot b{color:var(--mw-accent-deep)}

/* ---- typeset primitives ---- */
.mw-var{font-style:italic}
.mw-op{color:var(--mw-soft)}
.mw-hi{color:var(--mw-accent-deep);font-weight:700}
.mw-big{font-family:var(--mw-disp);font-weight:700;font-size:1.8rem;color:var(--mw-accent-deep)}
.mw-frac{display:inline-flex;flex-direction:column;align-items:center;line-height:1;font-size:.8em;
  margin:0 .12em;vertical-align:middle}
.mw-frac .mw-num{padding:0 .3em .08em}
.mw-frac .mw-den{padding:.08em .3em 0;border-top:1.6px solid currentColor}
.mw-sqrt{display:inline-flex;align-items:flex-start}
.mw-sqrt .mw-rad{border-top:1.6px solid currentColor;padding:1px 4px 0;margin-left:-1px}
.mw-sup{font-size:.62em;vertical-align:super} .mw-sub{font-size:.62em;vertical-align:sub}
.mw-tf{font-family:var(--mw-disp);font-weight:700;font-size:.95rem;padding:.02em .5em;border-radius:8px;border:1.5px solid currentColor}
.mw-tf.t{color:var(--mw-true);background:color-mix(in srgb,var(--mw-true) 14%,transparent)}
.mw-tf.f{color:var(--mw-false);background:color-mix(in srgb,var(--mw-false) 14%,transparent)}

/* table line-type (truth tables etc.) — every case at a glance, the current row lit */
.mw-table{border-collapse:collapse;font-family:var(--mw-mono);font-size:.82rem;margin:.1em 0}
.mw-table th,.mw-table td{border:1px solid var(--mw-line);padding:4px 9px;text-align:center}
.mw-table th{font-family:var(--mw-math);font-style:italic;font-size:.95rem;background:color-mix(in srgb,var(--mw-ink) 5%,transparent)}
.mw-tc-res{border-left-width:2px;font-weight:700}
.mw-tc-t{color:var(--mw-true)} .mw-tc-f{color:var(--mw-false)}
.mw-table tbody tr{transition:background .2s ease}
.mw-table tr.mw-row-cur td{background:var(--mw-accent);color:#1d1c22;font-weight:700}

/* truth-table widget — variable toggles + verdict (left panel) */
.tt-formula{font-family:var(--mw-math);font-size:1.5rem;margin:.1em 0 .2em}
.tt-hint{font-family:var(--mw-mono);font-size:.66rem;color:var(--mw-soft);margin-bottom:.7em}
.tt-switches{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:1em}
.tt-toggle{display:flex;align-items:center;gap:.5em;border:2px solid var(--mw-ink);border-radius:10px;
  background:color-mix(in srgb,var(--mw-false) 10%,transparent);padding:.35em .7em;cursor:pointer;font:inherit;
  color:var(--mw-ink);transition:background .15s,transform .1s}
.tt-toggle.on{background:color-mix(in srgb,var(--mw-true) 16%,transparent)}
.tt-toggle:active{transform:translateY(1px)}
.tt-toggle .tt-name{font-family:var(--mw-math);font-style:italic;font-size:1.2rem;font-weight:600}
.tt-toggle .tt-val{font-family:var(--mw-disp);font-weight:700;font-size:.9rem}
.tt-verdict{font-family:var(--mw-math);font-size:1.3rem}
.tt-pill{font-family:var(--mw-disp);font-weight:700;font-size:.95rem;padding:.04em .55em;border-radius:8px;border:2px solid currentColor}
.tt-pill.t{color:var(--mw-true);background:color-mix(in srgb,var(--mw-true) 14%,transparent)}
.tt-pill.f{color:var(--mw-false);background:color-mix(in srgb,var(--mw-false) 14%,transparent)}

/* function-machine widget — input → machine → output */
.fm-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 10px;flex-wrap:wrap}
.fm-cell{min-width:48px;text-align:center;font-family:var(--mw-mono);font-size:1.35rem;padding:.45em .5em;border-radius:8px;border:2px solid var(--mw-ink)}
.fm-in{background:var(--mw-surface)}
.fm-out{background:color-mix(in srgb,var(--mw-accent) 18%,transparent);color:var(--mw-accent-deep);font-weight:700}
.fm-arrow{color:var(--mw-soft);font-size:1.3rem}
.fm-machine{text-align:center;font-family:var(--mw-math);font-size:1.1rem;padding:.6em 1em;border-radius:10px;
  background:var(--mw-surface);border:2px solid var(--mw-ink);box-shadow:3px 3px 0 var(--mw-ink)}

/* order-of-ops widget */
.oo-expr{text-align:center;font-family:var(--mw-math);font-size:2rem;margin:.3em 0 .9em;font-weight:600}
.oo-times{color:var(--mw-accent-deep)}

/* faded worked example (NUM.worked) — single math panel, steps reveal one by one */
.worked-stage{max-width:680px;margin:18px auto}
.worked-panel{min-width:0}
.worked-panel .mw-box{margin:0 0 14px}
.worked-panel .mw-row{font-size:1.3rem}
.wk-step{font-variant-numeric:tabular-nums}
.worked-next{align-self:flex-start;margin-top:2px}
.worked-next.is-done{opacity:.7;cursor:default}

@media (max-width:720px){ .mw-stage{flex-direction:column} }

/* ---- predict→reveal, both lesson paths (base styles; studio.css restyles
       them under html[data-ui-mode="studio"] and wins by load order) ---- */
.studio-reveal{margin-top:14px;padding:10px 14px;border-left:2px solid var(--accent,#d99a16);
  background:var(--accent-soft,rgba(217,154,22,.08));border-radius:0 8px 8px 0}
.studio-reveal-eye{font-family:var(--font-mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-deep,#b97f0c);margin-bottom:5px}
.reveal-first{margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed var(--line,#d9cdb2)}
.reveal-first em{font-style:normal;font-weight:600;color:var(--accent-deep,#b97f0c)}

/* ---- widget micro-probe: one-tap prediction softly gating the controls ---- */
.vis-probe{margin:10px 0 8px;padding:10px 12px;border:1.5px solid var(--line-strong,#b9ab8c);
  border-radius:10px;background:var(--surface-1,var(--bg-2,#fbf6ea))}
.vis-probe-q{font-size:13.5px;font-weight:600;margin-bottom:8px}
.vis-probe-opts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vis-probe-opt{font:inherit;font-size:13px;padding:5px 12px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line-strong,#b9ab8c);background:transparent;color:inherit}
.vis-probe-opt:hover:not(:disabled){border-color:var(--accent,#d99a16)}
.vis-probe-opt:disabled{cursor:default;opacity:.75}
.vis-probe-opt.probe-right{border-color:var(--green,#0e8463);color:var(--green,#0e8463);font-weight:700;opacity:1}
.vis-probe-opt.probe-wrong{border-color:var(--red,#b3471f);color:var(--red,#b3471f);text-decoration:line-through;opacity:1}
.vis-probe-skip{font:inherit;font-size:12px;border:none;background:none;cursor:pointer;
  color:var(--ink-soft,#6b6256);text-decoration:underline;padding:4px}
.vis-probe-why{margin-top:8px;font-size:13px;color:var(--ink-soft,#6b6256)}
.vis-probe-gated{opacity:.45;pointer-events:none;transition:opacity .3s ease}

/* ---- touch targets (WCAG 2.5.8 / 44px mobile guideline) ----
   Measured before this rule at 375px width: .mw-play buttons bottomed out at
   33px and the 119 range sliders offered a 16px grab height; probe chips sat
   near 28px. Desktop keeps the compact sizes — the floor applies on coarse
   pointers and phone-width viewports (the width clause is what makes this
   testable in a resized browser pane). Range inputs grow their HIT height
   only; the native track stays centered, so nothing changes visually beyond
   spacing. */
@media (pointer:coarse), (max-width:640px){
  .mw-play button,.tt-toggle,.worked-next,.vis-probe-opt{min-height:44px;min-width:44px}
  .mw-play input[type="range"]{height:44px}
  .vis-probe-skip{min-height:44px;padding:10px 8px}
}