/*
 * Compute & Explain (math-compute): an input, an operation and the engine's
 * record - input and result side by side, the conditions they hold under, a
 * solver's candidates, the steps the engine reports and its notices. Formulas
 * are Formula Rendering elements; statuses are Badges. Explanation prose is
 * set in the serif face, the record and its controls in the sans, the JSON in
 * the monospace.
 */
@layer components {
  .math-compute {
    display: grid;
    gap: 0.75rem;
    min-inline-size: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);

    & .math-compute-source {
      inline-size: 100%;
      min-block-size: 2.5rem;
      field-sizing: content;
      padding: 0.5rem 0.75rem;
      border: 1px solid var(--input);
      border-radius: var(--radius-md);
      background: var(--background);
      color: var(--foreground);
      font-family: var(--font-mono);
      font-size: 0.875rem;
      resize: vertical;
      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
    }

    & .math-compute-tools {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
    }

    & > .math-compute-status {
      color: var(--muted-foreground);
      font-size: 0.8125rem;
      &:empty {
        display: none;
      }
    }
    &:is([data-state="error"], [data-state="unsupported"]) > .math-compute-status {
      padding: 0.5rem 0.75rem;
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      color: var(--foreground);
      font-size: 0.875rem;
    }
    &[data-state="error"] > .math-compute-status {
      border-color: var(--destructive);
      color: var(--destructive);
    }
    &[data-state="computing"] > .math-compute-status::before {
      content: "";
      display: inline-block;
      inline-size: 0.75em;
      block-size: 0.75em;
      margin-inline-end: 0.5em;
      border: 2px solid currentColor;
      border-inline-end-color: transparent;
      border-radius: 50%;
      vertical-align: -0.1em;
      animation: math-compute-spin 0.8s linear infinite;
    }

    /* the record */
    & > .math-compute-view {
      display: grid;
      gap: 0.75rem;
      padding-block-start: 0.75rem;
      border-block-start: 1px solid var(--border);
      font-family: var(--font-sans);
      line-height: 1.55;
    }
    & .math-compute-pair {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
      gap: 0.75rem;
      & > .math-renderer {
        padding: 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--background);
      }
    }
    & h4 {
      margin: 0 0 0.25rem;
      color: var(--muted-foreground);
      font-family: var(--font-sans);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    & :is(.math-compute-conditions, .math-compute-candidates-box) ul {
      display: flex;
      flex-wrap: wrap;
      gap: 0.375rem 1rem;
      margin: 0;
      padding: 0;
      list-style: none;
      & li {
        display: inline-flex;
        align-items: baseline;
        gap: 0.375rem;
      }
    }
    & .math-compute-origin,
    & .math-compute-coverage,
    & .math-compute-rule,
    & .math-compute-recorded {
      color: var(--muted-foreground);
      font-family: var(--font-sans);
      font-size: 0.8125rem;
    }
    & .math-compute-coverage,
    & .math-compute-explanation,
    & .math-compute-verdict,
    & .math-compute-recorded {
      margin: 0;
    }
    /* explanation prose in the serif face; the record around it (lists, badges, controls) stays sans */
    & .math-compute-explanation,
    & .math-compute-verdict {
      font-family: var(--font-serif);
    }

    /* the steps the engine reports */
    & .math-compute-steps {
      display: grid;
      gap: 0.5rem;
      font-family: var(--font-sans);
      & ol {
        display: grid;
        gap: 0.125rem;
        margin: 0;
        padding-inline-start: 1.5rem;
      }
    }
    & .math-compute-step {
      appearance: none;
      padding: 0.125rem 0.375rem;
      border: 0;
      border-radius: var(--radius-sm);
      background: transparent;
      color: inherit;
      font: inherit;
      font-size: 0.875rem;
      text-align: start;
      cursor: pointer;
      &:hover {
        background: var(--accent);
        color: var(--accent-foreground);
      }
      &[aria-current="step"] {
        background: var(--accent);
        color: var(--accent-foreground);
        font-weight: 600;
        box-shadow: inset 3px 0 0 var(--ring);
      }
      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 1px;
      }
    }
    & .math-compute-step-tools {
      display: flex;
      flex-wrap: wrap;
      gap: 0.375rem;
    }

    & .math-compute-notices {
      margin: 0;
      padding-inline-start: 1.25rem;
      color: var(--muted-foreground);
      font-family: var(--font-sans);
      font-size: 0.8125rem;
    }
    & .math-compute-record {
      font-family: var(--font-sans);
      font-size: 0.8125rem;
      & > summary {
        cursor: pointer;
        color: var(--muted-foreground);
      }
      & > pre {
        max-block-size: 16rem;
        overflow: auto;
        margin: 0.5rem 0 0;
        padding: 0.75rem;
        border-radius: var(--radius-md);
        background: var(--muted);
        color: var(--foreground);
        font-family: var(--font-mono);
        font-size: 0.75rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      &[data-state="computing"] > .math-compute-status::before {
        animation: none;
      }
    }
    @media (prefers-contrast: more) {
      border-color: var(--foreground);
      & .math-compute-source {
        border-color: var(--foreground);
      }
    }
    @media (forced-colors: active) {
      & .math-compute-step[aria-current="step"] {
        outline: 2px solid Highlight;
      }
    }
    @media print {
      & .math-compute-tools,
      & .math-compute-step-tools,
      & .math-compute-record {
        display: none;
      }
    }
  }

  @keyframes math-compute-spin {
    to {
      rotate: 1turn;
    }
  }
}