/* Classroom widget styles (cw-*), shared by the student app (index.html) and
   the admin classroom editor's live preview (admin.html) - paired with
   classroom-widgets.js, which draws the markup these classes style. Both
   pages define the same colour variables used here (--navy, --navy-soft,
   --gold, --gold-soft, --sage, --coral, --ink, --ink-soft, --line). Moved out
   of app.css unchanged. */

/* ---------- Classroom widgets (cw-*): shared grid / number-line /
   balance-scale renderer used both as a static illustration (a "visual"
   on any lesson step) and as a real interactive exercise (an
   "interactive" step) - see renderClassroomWidget in the script. ------- */
.cw-widget-wrap{margin:14px 0 20px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.cw-widget-wrap.cw-static{opacity:0.92;}
.cw-gridline{stroke:var(--line);stroke-width:1;}
.cw-cell-fixed{fill:#D7E0F5;stroke:var(--navy-soft);stroke-width:1.5;}
.cw-cell-toggle{fill:transparent;stroke:none;cursor:pointer;}
.cw-cell-toggle:hover{fill:#EAF1FB;}
.cw-cell-toggle.cw-selected{fill:var(--gold-soft);}
.cw-cell-toggle.cw-correct{fill:#EAF3EE;stroke:var(--sage);stroke-width:2;}
.cw-cell-toggle.cw-incorrect{fill:#FBEDEA;stroke:var(--coral);stroke-width:2;}
.cw-cell-toggle.cw-missed{fill:transparent;stroke:var(--sage);stroke-width:2;stroke-dasharray:4 3;}
.cw-edge-target{stroke:#D7E0F5;stroke-width:5;stroke-linecap:round;}
.cw-edge-toggle{stroke:transparent;stroke-width:10;stroke-linecap:round;cursor:pointer;}
.cw-edge-toggle-line{stroke:#D7E0F5;stroke-width:5;stroke-linecap:round;pointer-events:none;}
.cw-edge-toggle-line.cw-selected{stroke:var(--gold);}
.cw-edge-toggle-line.cw-correct{stroke:var(--sage);}
.cw-edge-toggle-line.cw-incorrect{stroke:var(--coral);}
.cw-mirror-line{stroke:var(--coral);stroke-width:2;stroke-dasharray:6 4;}
.cw-numline-axis{stroke:var(--ink-soft);stroke-width:2;}
.cw-numline-tick{stroke:var(--ink-soft);stroke-width:1.5;}
.cw-numline-label{fill:var(--ink-soft);font-size:11px;}
.cw-numline-marker{fill:var(--gold);stroke:var(--navy);stroke-width:2;}
.cw-numline-marker[data-draggable="1"]{cursor:grab;touch-action:none;}
.cw-numline-marker.cw-dragging{cursor:grabbing;}
.cw-numline-marker.cw-correct{fill:var(--sage);}
.cw-numline-marker.cw-incorrect{fill:var(--coral);}
.cw-balance-stand{stroke:var(--navy-soft);stroke-width:6;stroke-linecap:round;}
.cw-balance-beam{stroke:var(--navy);stroke-width:4;stroke-linecap:round;}
.cw-balance-chain{stroke:var(--ink-soft);stroke-width:2;}
.cw-balance-pan{fill:#D7E0F5;stroke:var(--navy-soft);stroke-width:1.5;}
.cw-balance-label{fill:var(--ink);font-size:13px;font-weight:700;}
.cw-slider-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft);width:100%;max-width:320px;}
.cw-slider-row input[type="range"]{flex:1;}
.cw-slider-value{font-weight:700;color:var(--ink);min-width:52px;text-align:right;}
.cw-check-btn{margin-top:2px;}
.cw-feedback{font-size:13.5px;padding:10px 14px;border-radius:8px;background:#EAF3EE;border-left:3px solid var(--sage);color:var(--ink-soft);max-width:420px;text-align:left;}
.cw-feedback.is-wrong{background:#FBEDEA;border-left-color:var(--coral);}
.cw-shape-poly{fill:#D7E0F5;stroke:var(--navy-soft);stroke-width:2;}
.cw-shape-poly.cw-shape-ghost{fill:none;stroke:var(--ink-soft);stroke-width:1.5;stroke-dasharray:4 3;opacity:0.6;}
.cw-shape-line{stroke:var(--navy-soft);stroke-width:2;}
.cw-shape-line.cw-shape-ghost{stroke:var(--ink-soft);stroke-dasharray:4 3;opacity:0.6;}
.cw-shape-dot{fill:var(--gold);stroke:var(--navy);stroke-width:1.5;}
.cw-shape-dot.cw-shape-ghost{fill:none;stroke:var(--ink-soft);stroke-dasharray:2 2;opacity:0.6;}
.cw-shape-label{fill:var(--ink);font-size:12px;font-weight:600;}
.cw-sector-slice{stroke:#fff;stroke-width:1.5;}
.cw-sector-label{fill:var(--ink);font-size:11px;font-weight:700;}