/* Exam verdicts, run states and corpus states all speak the same colour
   vocabulary. The domain value maps to a *tone* in ExamHelper; the tone maps
   to tokens here — so a verdict never carries a Bootstrap utility around as
   its state (FE-9), and a palette change is one file.

   The tone names mirror Tabler's semantic colours on purpose: reusing its
   token pairs keeps exam badges identical to every other badge in the app. */

.exam-badge {
  --exam-badge-tint: var(--tblr-secondary-lt);
  --exam-badge-ink: var(--tblr-secondary);

  background-color: var(--exam-badge-tint);
  color: var(--exam-badge-ink);
}

.exam-badge[data-tone="success"] {
  --exam-badge-tint: var(--tblr-success-lt);
  --exam-badge-ink: var(--tblr-success);
}

.exam-badge[data-tone="danger"] {
  --exam-badge-tint: var(--tblr-danger-lt);
  --exam-badge-ink: var(--tblr-danger);
}

.exam-badge[data-tone="warning"] {
  --exam-badge-tint: var(--tblr-warning-lt);
  --exam-badge-ink: var(--tblr-warning);
}

.exam-badge[data-tone="orange"] {
  --exam-badge-tint: var(--tblr-orange-lt);
  --exam-badge-ink: var(--tblr-orange);
}

.exam-badge[data-tone="info"] {
  --exam-badge-tint: var(--tblr-info-lt);
  --exam-badge-ink: var(--tblr-info);
}

.exam-badge[data-tone="accent"] {
  --exam-badge-tint: var(--tblr-purple-lt);
  --exam-badge-ink: var(--tblr-purple);
}

.exam-badge[data-tone="active"] {
  --exam-badge-tint: var(--tblr-blue-lt);
  --exam-badge-ink: var(--tblr-blue);
}

/* The execution-state icon next to a case carries the same tones, but only
   as ink — it sits on the surrounding surface. */

.exam-state-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--tblr-secondary);
}

.exam-state-icon[data-tone="active"] {
  color: var(--tblr-blue);
}

.exam-state-icon[data-tone="success"] {
  color: var(--tblr-success);
}

.exam-state-icon[data-tone="danger"] {
  color: var(--tblr-danger);
}

.exam-state-icon[data-tone="info"] {
  color: var(--tblr-info);
}

.exam-state-icon[data-tone="warning"] {
  color: var(--tblr-warning);
}

.exam-state-icon[data-tone="primary"] {
  color: var(--tblr-primary);
}

/* One criterion-check row (Exam::CriterionCheckComponent). */

.exam-check {
  display: flex;
  gap: 0.5rem;
  padding-block: 0.5rem;
  border-block-end: 1px solid var(--tblr-border-color);
}

/* Recorded prompt/protocol text: keep the author's line breaks, never
   overflow the card (Tabler's .text-wrap would collapse all newlines). */

.exam-pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The conclusion formula. Each step groups its operator with the operand
   that follows it, so a wrap never orphans a "+" or "=" at a line edge. */

.exam-conclusion {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1.5rem;
  row-gap: 1rem;
  flex-wrap: wrap;
  text-align: center;
  padding-block: 0.5rem;
}

.exam-conclusion-step {
  display: flex;
  align-items: center;
  column-gap: 1.5rem;
}

.exam-conclusion-operator {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--tblr-secondary);
}