/* ================================================================
   QUESTION EXAMPLES — the input→output table under the prompt
   (practice/question-examples.js)

   Two blocks with deliberately different colour: the CORRECT block is a green
   rule (this is the contract you are being graded against) and the WRONG block
   is a red rule (this is the near miss). They sit between the prompt and the
   imports list, which is the last thing the learner reads before they look at
   the editor.

   Type is monospace and one step down from the prompt, because these are code
   values, not prose — a learner scanning the card has to be able to tell the
   values apart from the sentence above them without reading either.
   ================================================================ */

.question-examples {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.question-examples.hidden {
  display: none;
}

.qex-block {
  background: rgb(var(--well-rgb) / calc(0.18 * var(--well-k)));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px 12px;
}

.qex-block-correct {
  border-left: 3px solid var(--ok);
}

.qex-block-wrong {
  border-left: 3px solid var(--danger);
}

.qex-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.qex-block-correct .qex-title {
  color: var(--ok);
}

.qex-block-wrong .qex-title {
  color: var(--danger);
}

.qex-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 4px 0 8px;
}

/* Three columns on a wide panel — input, arrow, output — collapsing to a
   stack when the panel is narrow. `minmax(0, …)` on both code cells because a
   long literal must WRAP inside the row; without it the grid grows past the
   panel and the whole card scrolls sideways. */
.qex-row {
  align-items: baseline;
  column-gap: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  padding: 5px 0;
}

.qex-row + .qex-row {
  border-top: 1px solid rgb(var(--well-rgb) / calc(0.35 * var(--well-k)));
}

.qex-in,
.qex-out {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.qex-out {
  font-weight: 600;
}

.qex-correct .qex-out {
  color: var(--ok);
}

.qex-wrong .qex-out {
  color: var(--danger);
  /* A rejected value is struck through as well as coloured — colour alone is
     not a signal for a learner who cannot see the difference. */
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.qex-arrow {
  color: var(--muted);
  font-size: 12px;
}

/* The reason spans the whole row, under the pair it explains — it is the part
   of a wrong example that actually teaches, so it is prose, not code. */
.qex-why {
  color: var(--muted);
  font-size: 12px;
  grid-column: 1 / -1;
  line-height: 1.45;
  padding-top: 2px;
}

.qex-more {
  color: var(--muted-dim);
  font-size: 11.5px;
  padding-top: 6px;
}

@media (max-width: 720px) {
  .qex-row {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }

  .qex-arrow {
    display: none;
  }
}