/* PyPath — results of an auto-graded exercise check.
   Follows the conventions already in unit-test.css: the same --success and
   --danger fallbacks, the same is-pass / is-fail state classes, and no
   !important anywhere. */

.btn-check-work {
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: .35rem .75rem;
  border-radius: .4rem;
  cursor: pointer;
  color: var(--panel, #fff);
  background: var(--primary, #0ea5e9);
  border: 1px solid var(--primary-strong, #0284c7);
}

.btn-check-work:hover:not(:disabled) {
  background: var(--primary-strong, #0284c7);
}

.btn-check-work:disabled {
  cursor: progress;
  opacity: .7;
}

.btn-check-work:focus-visible {
  outline: 2px solid var(--primary-strong, #0284c7);
  outline-offset: 2px;
}

.check-results {
  margin: .75rem 0 0;
  padding: .9rem 1rem;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: .6rem;
  background: var(--panel, #fff);
  font-size: .88rem;
}

.check-summary {
  margin: 0 0 .6rem;
  font-weight: 700;
  color: var(--text-strong, #0f172a);
}

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}

/* The mark and the word both carry the status, so it survives greyscale, a
   colourblind reader, and a screenshot. Colour is the third signal, never the
   only one. */
.check-row {
  display: grid;
  grid-template-columns: 1.1rem auto 1fr;
  gap: .1rem .5rem;
  align-items: baseline;
}

.check-mark { font-weight: 700; }
.check-state { font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; }
.check-name { color: var(--text, #334155); }

.check-row.is-pass .check-mark,
.check-row.is-pass .check-state { color: var(--success, #16a34a); }

.check-row.is-fail .check-mark,
.check-row.is-fail .check-state { color: var(--danger, #dc2626); }

.check-detail {
  grid-column: 3;
  color: var(--muted, #475569);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  overflow-wrap: anywhere;
}

.check-note {
  margin: .6rem 0 0;
  color: var(--muted, #475569);
  font-size: .82rem;
}

.check-hint {
  margin: .7rem 0 0;
  padding: .6rem .7rem;
  border-left: 3px solid var(--primary, #0ea5e9);
  border-radius: 0 .3rem .3rem 0;
  background: var(--bg-elevated, #f1f5f9);
  color: var(--text, #334155);
}

/* At 375px the three-column row would leave the name a few characters wide,
   so the mark and word sit above the name instead of beside it. */
@media (max-width: 27rem) {
  .check-row {
    grid-template-columns: 1.1rem 1fr;
  }
  .check-name { grid-column: 1 / -1; }
  .check-detail { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-check-work { transition: none; }
}

/* ---------- self-check rubric on a reflection exercise ---------- */

.rubric {
  margin-top: .8rem;
  padding: .7rem .8rem;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: .5rem;
  background: var(--bg-elevated, #f1f5f9);
}

.rubric__title {
  margin: 0 0 .4rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted, #475569);
}

.rubric__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .3rem;
  font-size: .86rem;
}

.rubric__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .45rem;
  align-items: baseline;
}

.rubric__list label { color: var(--text, #334155); cursor: pointer; }
.rubric__list input:focus-visible { outline: 2px solid var(--primary, #0ea5e9); outline-offset: 2px; }

/* The nudge under a saved answer. All three tones are neutral: none of them
   is a verdict, so none of them is green or red. */
.answer-feedback.is-saved,
.answer-feedback.is-thin,
.answer-feedback.is-differs {
  color: var(--muted, #475569);
  border-left: 3px solid var(--border, #cbd5e1);
  padding-left: .6rem;
}

/* ---------- checks for understanding ---------- */

.quiz {
  margin: 2.5rem 0;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: .6rem;
  background: var(--panel, #fff);
}

.quiz__heading { margin: 0 0 .3rem; font-size: 1.1rem; }
.quiz__note { margin: 0 0 1.1rem; color: var(--muted, #475569); font-size: .86rem; }

.quiz__list { margin: 0; padding: 0 0 0 0; list-style: none; display: grid; gap: 1.4rem; }

.quiz-q__set { margin: 0; padding: 0; border: 0; }

.quiz-q__prompt {
  padding: 0;
  margin-bottom: .5rem;
  font-weight: 600;
  color: var(--text-strong, #0f172a);
}

.quiz-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem;
  align-items: baseline;
  padding: .3rem .4rem;
  border-radius: .3rem;
  font-size: .9rem;
}

.quiz-choice label { cursor: pointer; color: var(--text, #334155); }
.quiz-choice.is-chosen { background: var(--bg-elevated, #f1f5f9); }
.quiz-choice input:focus-visible { outline: 2px solid var(--primary, #0ea5e9); outline-offset: 2px; }

.quiz-feedback {
  margin: .5rem 0 0;
  padding: .5rem .65rem;
  border-radius: .35rem;
  font-size: .86rem;
  background: var(--bg-elevated, #f1f5f9);
}

.quiz-feedback.is-right { border-left: 3px solid var(--success, #16a34a); }
.quiz-feedback.is-wrong { border-left: 3px solid var(--danger, #dc2626); }

@media (max-width: 27rem) {
  .quiz { padding: .9rem 1rem; }
}

/* ------------------------------------------- the four non-MCQ question types */

.quiz-q__hint {
  margin: 0 0 .6rem;
  font-size: .85rem;
  color: var(--muted, #475569);
}

.quiz-q__check { margin-top: .6rem; }

/* Matching: a select per row, not drag and drop. A select works with a
   keyboard, on a phone, and with a screen reader; drag and drop photographs
   better and excludes all three. */
.quiz-match { margin: 0; padding: 0; list-style: none; }

.quiz-match__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--border, #cbd5e1);
}

.quiz-match__row:last-child { border-bottom: 0; }
.quiz-match__left { flex: 1 1 8rem; font-weight: 600; }
.quiz-match__pick { flex: 1 1 12rem; }

/* Ordering: a Parsons problem. Move buttons rather than dragging, for the same
   reason matching uses selects. */
.quiz-order { margin: 0; padding: 0; list-style: none; }

.quiz-order__row {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  margin: 0 0 .3rem;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: .3rem;
  background: var(--bg-elevated, #f1f5f9);
}

/* pre, and it stays pre: in Python the indentation is the answer, so nothing
   here may collapse leading whitespace. */
.quiz-order__code {
  flex: 1;
  margin: 0;
  padding: .45rem .6rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem;
  white-space: pre;
}

.quiz-order__moves { display: flex; flex-direction: column; }

.quiz-order__move {
  flex: 1;
  min-width: 2rem;
  border: 0;
  border-left: 1px solid var(--border, #cbd5e1);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  color: var(--text, #334155);
}

.quiz-order__move:disabled { opacity: .35; cursor: default; }
.quiz-order__move:focus-visible {
  outline: 2px solid var(--primary-strong, #0284c7);
  outline-offset: -2px;
}

/* Fill in the blank: the boxes sit in the gaps, so nobody has to count which
   blank is which. */
.quiz-blank {
  margin: 0;
  padding: .5rem .6rem;
  overflow-x: auto;
  border-radius: .3rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem;
  white-space: pre-wrap;
  background: var(--bg-elevated, #f1f5f9);
}

.quiz-blank__input {
  padding: .05rem .3rem;
  border: 0;
  border-bottom: 2px solid var(--primary, #0ea5e9);
  border-radius: .15rem .15rem 0 0;
  font: inherit;
  background: var(--panel, #fff);
  color: var(--text-strong, #0f172a);
}

@media (prefers-reduced-motion: no-preference) {
  .quiz-order__row { transition: background-color .15s ease; }
}