/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Equation Solver                                         - */
/* -                                                          - */
/* - Author: Cylian                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
layout-main {
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* - Equation Display                                        - */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ }
  layout-main main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    gap: 1.5rem; }
  layout-main .equation-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-monospace); }
    layout-main .equation-display .target,
    layout-main .equation-display .evolved {
      display: flex;
      align-items: center;
      gap: 0.5rem; }
      layout-main .equation-display .target span,
      layout-main .equation-display .evolved span {
        font-size: 0.875rem;
        color: var(--text-color-muted);
        min-width: 60px; }
      layout-main .equation-display .target code,
      layout-main .equation-display .evolved code {
        font-size: 1.1rem;
        padding: 0.25rem 0.5rem;
        background: var(--background-color-surface);
        border-radius: 4px; }
    layout-main .equation-display .evolved code {
      color: var(--draw-color-primary); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Graph Container                                         - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
section.graph-container.container {
  max-width: 800px;
  overflow: hidden; }
  section.graph-container.container #graph-canvas {
    width: 100%;
    height: 100%;
    background: var(--background-color-surface); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Controls Widget                                         - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.equation-controls {
  display: flex;
  gap: 0.5rem; }
  .equation-controls .button {
    flex: 1; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Confidence Colors                                       - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.confidence-high {
  color: #27ae60 !important; }

.confidence-medium {
  color: #f39c12 !important; }

.confidence-low {
  color: #e74c3c !important; }