/* Explorations – combined shared styles.
   Import this single file instead of individual component stylesheets. */
@import './design-tokens.css';
@import './components/topic-layout.css';
@import './components/modal.css';
@import './components/buttons.css';
@import './components/forms.css';
@import './components/form-dropdown.css';
@import './components/settings-panel.css';
@import './components/preset-toggle.css';
@import './components/math-rendering.css';
@import './components/thinking-panel.css';
@import './components/wizard-topic.css';
@import './components/template-selection.css';
@import './components/guided-entry.css';
@import './components/canvas-entry-keypad.css';
@import './components/graph-overlay-entry.css';
@import './components/expansion-affordance.css';
@import './components/parent-function-wizard.css';
@import './components/form-inspector.css';
@import './components/equation-solver.css';
@import './components/walkthrough.css';
@import './components/post-play.css';
@import './components/start-chooser.css';
@import './components/degree-selector.css';
@import './components/function-zone.css';
@import './components/tracking-banner.css';
@import './components/modal-card-grid.css';
@import './components/feedback-button.css';

/* Fix: In v4, the gmath-canvas element (z-index: 0, white background) sits below
   formatting boxes (z-index: 1), hiding expressions behind them. Making the canvas
   transparent and raising its z-index lets expressions render above the colored
   formatting boxes while their backgrounds show through. The .canvas-container
   retains its white background for areas without formatting boxes. */
.canvas-container > gmath-canvas {
  background: transparent !important;
  z-index: 2 !important;
}