/* Math101 lesson manipulatives and bounded equation workbench.
   This file intentionally depends only on the core Math101 colour tokens. */

.lesson-manipulative {
  --lab-accent: var(--blue);
  --lab-accent-soft: var(--bluesoft);
  margin: 56px 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 24px;
  background: linear-gradient(145deg, var(--paper), color-mix(in srgb, var(--bluesoft) 38%, var(--paper)));
  box-shadow: var(--softshadow);
}

.lesson-manipulative[data-manipulative-kind="fraction-number"],
.lesson-manipulative[data-manipulative-kind="statistics-probability"] {
  --lab-accent: var(--jade);
  --lab-accent-soft: var(--jadesoft);
}

.lesson-manipulative[data-manipulative-kind="geometry-measurement"],
.lesson-manipulative[data-manipulative-kind="trig-triangle"] {
  --lab-accent: var(--coral);
  --lab-accent-soft: var(--coralsoft);
}

.lesson-manipulative[data-manipulative-kind="sequence-explorer"],
.lesson-manipulative[data-manipulative-kind="direction-field"] {
  --lab-accent: var(--gold-ink);
  --lab-accent-soft: var(--goldsoft);
}

.lesson-manipulative[data-manipulative-kind="vector-matrix"],
.lesson-manipulative[data-manipulative-kind="discrete-network"] {
  --lab-accent: var(--lilac);
  --lab-accent-soft: var(--lilacsoft);
}

.lesson-lab-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 34px 25px;
  border-bottom: 1px solid var(--line);
}

.lesson-lab-heading .eyebrow { margin-bottom: 7px; color: var(--lab-accent); }
.lesson-lab-heading h2 { margin: 0; font: 720 clamp(1.55rem, 3vw, 2.2rem)/1.12 Sora, sans-serif; letter-spacing: -.035em; }
.lesson-lab-heading p:last-child { max-width: 660px; margin: 8px 0 0; color: var(--muted); font-size: .88rem; }
.lesson-lab-offline { flex: 0 0 auto; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--lab-accent) 30%, var(--line)); border-radius: 999px; color: var(--lab-accent); font-size: .65rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }

.lesson-lab-layout { display: grid; grid-template-columns: minmax(210px, .62fr) minmax(330px, 1.38fr); min-height: 340px; }
.lesson-lab-controls { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; padding: 28px 30px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 78%, transparent); }
.lesson-lab-control { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; color: var(--ink2); font-size: .77rem; font-weight: 760; }
.lesson-lab-control > span { min-width: 0; }
.lesson-lab-control input[type="range"] { grid-column: 1 / -1; width: 100%; min-height: 28px; margin: 0; accent-color: var(--lab-accent); cursor: pointer; }
.lesson-lab-control output { min-width: 42px; padding: 2px 7px; border-radius: 7px; background: var(--lab-accent-soft); color: var(--lab-accent); text-align: center; font-variant-numeric: tabular-nums; }
.lesson-lab-control input[type="number"],
.lesson-lab-control select { grid-column: 1 / -1; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); font: 700 .9rem Manrope, sans-serif; }
.lesson-lab-control input:focus,
.lesson-lab-control select:focus { border-color: var(--lab-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lab-accent) 18%, transparent); outline: 0; }
.lesson-lab-run { width: 100%; margin-top: 3px; border-color: color-mix(in srgb, var(--lab-accent) 35%, var(--line)); color: var(--lab-accent); }

.lesson-lab-stage { min-width: 0; display: grid; place-items: center; padding: 22px 30px; background: radial-gradient(circle at 50% 45%, var(--paper), color-mix(in srgb, var(--lab-accent-soft) 55%, var(--paper))); }
.lesson-lab-stage > svg { width: min(100%, 660px); max-height: 360px; overflow: visible; }
.lesson-lab-stage svg text { fill: var(--ink); font: 700 16px Manrope, sans-serif; }
.lab-axis { fill: none; stroke: color-mix(in srgb, var(--muted) 48%, transparent); stroke-width: 1.5; }
.lab-strong-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lab-accent-line { fill: none; stroke: var(--lab-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.lab-field-line { fill: none; stroke: color-mix(in srgb, var(--ink2) 58%, transparent); stroke-width: 1.6; stroke-linecap: round; }
.lab-soft-fill { fill: var(--lab-accent-soft); stroke: color-mix(in srgb, var(--lab-accent) 35%, var(--line)); }
.lab-muted-fill { fill: color-mix(in srgb, var(--muted) 20%, var(--paper)); }
.lab-accent-fill { fill: var(--lab-accent); }
.lab-curve { fill: none; stroke: var(--lab-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.lab-area { fill: color-mix(in srgb, var(--lab-accent) 20%, transparent); stroke: none; }
.lab-vector-original { stroke: var(--muted); stroke-width: 4; }
.lab-vector-result { stroke: var(--lab-accent); stroke-width: 5; }
#lab-arrow-muted path { fill: var(--muted); }
#lab-arrow-accent path { fill: var(--lab-accent); }
.lab-network-edge { fill: none; stroke: color-mix(in srgb, var(--lab-accent) 45%, var(--line)); stroke-width: 3; }
.lab-network-node { fill: var(--paper); stroke: var(--lab-accent); stroke-width: 4; }
.lab-network-label { fill: var(--ink); font: 800 13px Sora, sans-serif; }

.lesson-lab-reasoning { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px 18px; padding: 20px 30px 23px; border-top: 1px solid var(--line); background: var(--paper); }
.lesson-lab-reasoning > strong { color: var(--lab-accent); font: 780 .72rem Sora, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.lesson-lab-reasoning output { display: block; color: var(--ink2); font-size: .8rem; line-height: 1.65; }
.lesson-lab-link { color: var(--lab-accent); font-size: .75rem; font-weight: 850; text-decoration: none; white-space: nowrap; }
.lesson-lab-link:hover { text-decoration: underline; }
.lesson-lab-noscript { margin: 0; padding: 10px 30px; border-top: 1px dashed var(--line); color: var(--muted); font-size: .72rem; }

.sequence-stage { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.sequence-stage span { min-width: 48px; padding: 13px 10px; border: 2px solid var(--lab-accent); border-radius: 12px; background: var(--paper); color: var(--ink); font: 780 1rem Sora, sans-serif; text-align: center; box-shadow: var(--softshadow); }
.sequence-stage i { color: var(--lab-accent); font: 800 .72rem Manrope, sans-serif; font-style: normal; }
.sample-stage { width: min(100%, 600px); }
.sample-stage [data-sample-dots] { display: grid; grid-template-columns: repeat(10, 1fr); gap: 9px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.sample-stage [data-sample-dots] span { aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--muted) 26%, var(--paper)); }
.sample-stage [data-sample-dots] .is-success { background: var(--lab-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lab-accent) 16%, transparent); }
.sample-stage p { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; color: var(--muted); font-size: .7rem; }
.sample-success,.sample-failure { width: 10px; height: 10px; display: inline-block; border-radius: 50%; }
.sample-success { background: var(--lab-accent); }
.sample-failure { margin-left: 9px; background: color-mix(in srgb, var(--muted) 26%, var(--paper)); }

/* Full equation workbench */
.workbench-hero { max-width: 1120px; padding-top: 78px; padding-bottom: 50px; }
.workbench-hero h1 { max-width: 920px; margin: 0; font: 740 clamp(3rem, 7vw, 6.5rem)/.98 Sora, sans-serif; letter-spacing: -.065em; }
.workbench-hero > p:not(.eyebrow) { max-width: 780px; margin: 22px 0 0; color: var(--muted); font-size: 1.05rem; }
.workbench-boundary { display: grid; grid-template-columns: auto 1fr; gap: 17px; max-width: 980px; margin-bottom: 42px; padding: 20px 23px; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: 15px; background: var(--goldsoft); }
.workbench-boundary > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--gold-ink); font-weight: 900; }
.workbench-boundary strong { display: block; font: 760 .9rem Sora, sans-serif; }
.workbench-boundary p { margin: 4px 0 0; color: var(--ink2); font-size: .78rem; }
.workbench-shell { display: grid; gap: 30px; padding-bottom: 110px; }
.workbench-card { overflow: hidden; border: 1px solid var(--line); border-radius: 23px; background: var(--paper); box-shadow: var(--softshadow); }
.workbench-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding: 28px 32px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--paper), color-mix(in srgb, var(--bluesoft) 40%, var(--paper))); }
.workbench-card-heading h2 { margin: 0; font: 720 1.65rem/1.2 Sora, sans-serif; }
.workbench-card-heading p { max-width: 660px; margin: 7px 0 0; color: var(--muted); font-size: .8rem; }
.workbench-card-heading code { flex: 0 0 auto; padding: 8px 11px; border-radius: 9px; background: var(--paper); color: var(--blue); font: 700 1rem Newsreader, serif; }
.workbench-card-body { display: grid; grid-template-columns: minmax(320px, .84fr) minmax(360px, 1.16fr); }
.workbench-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 15px; margin: 0; padding: 30px 32px; border-right: 1px solid var(--line); }
.workbench-form > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .75rem; }
.workbench-form label { display: grid; gap: 6px; color: var(--ink2); font-size: .73rem; font-weight: 780; }
.workbench-form label.wide,
.workbench-form button { grid-column: 1 / -1; }
.workbench-form input { width: 100%; min-height: 45px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--ivory); color: var(--ink); font-variant-numeric: tabular-nums; }
.workbench-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); outline: 0; }
.workbench-result { min-height: 300px; padding: 31px 34px; background: color-mix(in srgb, var(--ivory) 58%, var(--paper)); }
.workbench-result:empty::before { content: "Enter coefficients, then choose Solve and explain. The reasoning and substitution check will appear here."; display: block; max-width: 480px; color: var(--muted); font-size: .86rem; }
.workbench-result h3 { margin: 0 0 10px; font: 720 1.2rem Sora, sans-serif; }
.workbench-status { display: inline-block; margin: 0 0 16px; padding: 5px 9px; border-radius: 99px; background: var(--bluesoft); color: var(--blue); font-size: .68rem; font-weight: 850; }
.workbench-status.is-contradiction,
.workbench-status.is-inconsistent { background: var(--coralsoft); color: var(--coral); }
.workbench-status.is-dependent,
.workbench-status.is-identity,
.workbench-status.is-degenerate { background: var(--goldsoft); color: var(--gold-ink); }
.workbench-result ol { margin: 0; padding-left: 1.3em; color: var(--ink2); }
.workbench-result li { margin: 0 0 9px; padding-left: 5px; font-size: .8rem; line-height: 1.6; }
.workbench-check { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; font-size: .78rem; font-weight: 700; }
.workbench-check.is-correct { background: var(--jadesoft); color: var(--jade); }
.workbench-check.is-revise { background: var(--coralsoft); color: var(--coral); }
.workbench-methods { margin-bottom: 100px; }
.workbench-methods h2 { margin: 0 0 24px; font: 720 2rem Sora, sans-serif; }
.workbench-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.workbench-method-grid article { padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); }
.workbench-method-grid strong { font: 740 .92rem Sora, sans-serif; }
.workbench-method-grid p { margin: 7px 0 0; color: var(--muted); font-size: .75rem; }

.calm-mode .lesson-manipulative *,
.motion-off .lesson-manipulative * { transition: none !important; animation: none !important; }

@media (max-width: 900px) {
  .lesson-lab-layout,
  .workbench-card-body { grid-template-columns: 1fr; }
  .lesson-lab-controls,
  .workbench-form { border-right: 0; border-bottom: 1px solid var(--line); }
  .lesson-lab-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-lab-reasoning { grid-template-columns: 1fr; }
  .lesson-lab-link { white-space: normal; }
  .workbench-method-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .lesson-manipulative { margin: 42px -12px; border-radius: 18px; }
  .lesson-lab-heading { display: block; padding: 24px 20px 20px; }
  .lesson-lab-offline { display: inline-block; margin-top: 14px; }
  .lesson-lab-controls { grid-template-columns: 1fr; padding: 22px 20px; }
  .lesson-lab-stage { min-height: 260px; padding: 16px 12px; }
  .lesson-lab-reasoning { padding: 19px 20px 22px; }
  .sequence-stage { gap: 7px; }
  .sequence-stage span { min-width: 40px; padding: 10px 7px; }
  .sample-stage [data-sample-dots] { gap: 6px; padding: 14px; }
  .workbench-hero { padding-top: 50px; }
  .workbench-card-heading { display: block; padding: 24px 20px; }
  .workbench-card-heading code { display: inline-block; margin-top: 12px; }
  .workbench-form { grid-template-columns: 1fr; padding: 24px 20px; }
  .workbench-form label,
  .workbench-form > p,
  .workbench-form button { grid-column: 1; }
  .workbench-result { min-height: 240px; padding: 25px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-manipulative *, .workbench-shell * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media print {
  .lesson-manipulative { break-inside: avoid; margin: 8mm 0; border: 1px solid #aaa; box-shadow: none; background: #fff; color: #111; }
  .lesson-lab-heading { padding: 5mm; }
  .lesson-lab-offline,
  .lesson-lab-controls,
  .lesson-lab-link,
  .lesson-lab-noscript { display: none !important; }
  .lesson-lab-layout { display: block; min-height: 0; }
  .lesson-lab-stage { min-height: 0; padding: 4mm; background: #fff; }
  .lesson-lab-stage > svg { max-height: 65mm; }
  .lesson-lab-reasoning { display: block; padding: 4mm 5mm; background: #fff; }
  .lesson-lab-reasoning output { margin-top: 2mm; color: #111; }
  .workbench-hero,
  .workbench-boundary,
  .workbench-form,
  .workbench-methods { display: none !important; }
  .workbench-shell { padding: 0; }
  .workbench-card { break-inside: avoid; border: 1px solid #aaa; box-shadow: none; }
  .workbench-card-heading { padding: 4mm; background: #fff; }
  .workbench-card-body { display: block; }
  .workbench-result { min-height: 0; padding: 4mm; background: #fff; }
  .workbench-result:empty { display: none; }
}