/* Transcrib Si - the styles of the demo page of the calc widget.
 *
 * Only this page: the widget itself lives in assets/calc/calc.css.
 */

.calc-code {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-200);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.calc-code--tall {
  margin-bottom: 0;
}

.calc-steps {
  margin: 0 0 var(--space-5);
  padding-left: 1.25rem;
  display: grid;
  gap: var(--space-3);
}

.calc-steps li {
  color: var(--text-muted);
}

.calc-steps strong {
  color: var(--text);
}

.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.calc-grid .calc__source {
  margin-top: var(--space-2);
}

.calc--plain {
  margin-top: var(--space-5);
  background: var(--bg-sunken);
  box-shadow: none;
}

@media (max-width: 860px) {
  .calc-grid {
    grid-template-columns: 1fr;
  }
}