/* ============================================================
   EduCS.me — Quiz Component Styles
   Designed to sit cleanly inside just-the-docs pages.
   ============================================================ */

:root {
  --quiz-correct:   #1a7f4b;
  --quiz-incorrect: #E53E3E;
  --quiz-bg:        #F7FAFC;
  --quiz-border:    #E2E8F0;
  --quiz-radius:    6px;
  --mono-font:      "JetBrains Mono", monospace;
  --quiz-code-bg:   #F7FAFC;
  --quiz-code-text: #2D3748;
  --quiz-code-line-num: #718096;
  --quiz-code-gap:  #2B8A6E;
  --quiz-code-hover: rgba(0, 0, 0, 0.04);
}

/* Dark mode overrides — must be in this file (after :root) to win
   the specificity tie with :root when quiz.css loads after theme CSS. */
[data-theme="dark"] {
  --quiz-code-bg:   #1A2029;
  --quiz-code-text: #B0BAC8;
  --quiz-code-line-num: #6B7785;
  --quiz-code-gap:  #8FD4BF;
  --quiz-code-hover: rgba(255, 255, 255, 0.05);
}

/* ── Container ── */
.quiz-container {
  margin: 1.5rem 0;
}

/* ── Individual question block ── */
.quiz-question {
  background: var(--quiz-bg);
  border: 1px solid var(--quiz-border);
  border-left: 4px solid #61B0DD;
  border-radius: var(--quiz-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.quiz-question p {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

/* ── Answer buttons ── */
.quiz-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.quiz-btn {
  background: #fff;
  border: 1px solid var(--quiz-border);
  border-radius: var(--quiz-radius);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s, border-color 0.15s;
}

.quiz-btn:hover:not(:disabled) {
  background: #eef5fb;
  border-color: #61B0DD;
}

.quiz-btn--correct {
  background: #d4edda !important;
  border-color: var(--quiz-correct) !important;
  color: var(--quiz-correct);
  font-weight: 600;
}

.quiz-btn--incorrect {
  background: #fde8e8 !important;
  border-color: var(--quiz-incorrect) !important;
  color: var(--quiz-incorrect);
}

.quiz-btn--disabled {
  cursor: default;
  opacity: 0.85;
}

/* ── Feedback strip ── */
.quiz-feedback {
  margin-top: 0.6rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--quiz-radius);
  font-size: 0.9rem;
  line-height: 1.4;
}

.quiz-feedback--hidden {
  display: none;
}

.quiz-feedback--correct {
  background: #d4edda;
  color: var(--quiz-correct);
  border: 1px solid #a3d4b5;
}

.quiz-feedback--incorrect {
  background: #fde8e8;
  color: var(--quiz-incorrect);
  border: 1px solid #f0a8a8;
}

.quiz-icon {
  font-weight: 700;
  margin-right: 0.3rem;
}

/* ── Trace table questions ── */
.trace-question {
  background: var(--quiz-bg);
  border: 1px solid var(--quiz-border);
  border-left: 4px solid #ED8936;
  border-radius: var(--quiz-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  overflow-x: auto;
}

.trace-question p {
  margin-top: 0;
}

.trace-question table {
  border-collapse: collapse;
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
}

.trace-question th,
.trace-question td {
  border: 1px solid var(--quiz-border);
  padding: 0.35rem 0.6rem;
  text-align: center;
  white-space: nowrap;
}

.trace-question th {
  background: #e9ecef;
  font-weight: 600;
}

/* ── Trace inputs ── */
.trace-input {
  border: 1px solid var(--quiz-border);
  border-radius: 3px;
  padding: 0.2rem 0.4rem;
  font-family: var(--mono-font);
  font-size: 0.85rem;
  text-align: center;
  width: 4rem;
  transition: border-color 0.15s, background 0.15s;
}

.trace-input:focus {
  outline: none;
  border-color: #61B0DD;
  background: #fff;
}

.trace-input--correct {
  background: #d4edda;
  border-color: var(--quiz-correct);
  color: var(--quiz-correct);
  font-weight: 600;
}

.trace-input--incorrect {
  background: #fde8e8;
  border-color: var(--quiz-incorrect);
  color: var(--quiz-incorrect);
}

/* Small label showing correct value next to wrong cell */
.trace-reveal {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.8rem;
  color: var(--quiz-correct);
  font-family: var(--mono-font);
  font-weight: 600;
}

/* ── Check button (shared by trace, code-completion, output) ── */
.trace-check-btn,
.code-check-btn,
.output-check-btn {
  background: #2E7EAB;
  color: #fff;
  border: none;
  border-radius: var(--quiz-radius);
  padding: 0.45rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s;
}

.trace-check-btn:hover:not(:disabled),
.code-check-btn:hover:not(:disabled),
.output-check-btn:hover:not(:disabled) {
  background: #3D7A9E;
}

.trace-check-btn:disabled,
.code-check-btn:disabled,
.output-check-btn:disabled {
  background: #5093BB;
  cursor: default;
}

/* ── Trace summary feedback ── */
.trace-feedback {
  margin-top: 0.6rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--quiz-radius);
  font-size: 0.9rem;
}

/* ── Teaching note callout ── */
.teaching-note {
  background: #fffbeb;
  border: 1px solid #ED8936;
  border-left: 4px solid #ED8936;
  border-radius: var(--quiz-radius);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.teaching-note::before {
  content: "\1F9D1\200D\1F3EB Teaching note — ";
  font-weight: 700;
  color: #e65100;
}

/* ============================================================
   NEW QUIZ TYPES
   ============================================================ */

/* ── Code Completion ── */
.code-completion {
  background: var(--quiz-bg);
  border: 1px solid var(--quiz-border);
  border-left: 4px solid #8FD4BF;
  border-radius: var(--quiz-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.code-completion p {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.code-completion pre {
  background: var(--quiz-code-bg);
  color: var(--quiz-code-text);
  border: 1px solid var(--quiz-border);
  padding: 1rem;
  border-radius: var(--quiz-radius);
  overflow-x: auto;
  font-family: var(--mono-font);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.code-gap {
  background: transparent;
  border: none;
  border-bottom: 2px dashed var(--quiz-code-gap);
  color: var(--quiz-code-gap);
  font-family: var(--mono-font);
  font-size: 0.88rem;
  padding: 0.1rem 0.3rem;
  min-width: 5rem;
  outline: none;
  transition: border-color 0.15s;
}

.code-gap:focus {
  border-bottom-color: #61B0DD;
}

.code-gap--correct {
  border-bottom-color: var(--quiz-correct);
  color: var(--quiz-correct);
  font-weight: 600;
}

.code-gap--incorrect {
  border-bottom-color: var(--quiz-incorrect);
  color: var(--quiz-incorrect);
}

.code-reveal {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.8rem;
  color: var(--quiz-correct);
  font-family: var(--mono-font);
  font-weight: 600;
}

.code-completion .quiz-feedback {
  margin-top: 0.6rem;
}

/* ── Spot the Bug ── */
.bug-question {
  background: var(--quiz-bg);
  border: 1px solid var(--quiz-border);
  border-left: 4px solid #E53E3E;
  border-radius: var(--quiz-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.bug-question p {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.bug-code {
  background: var(--quiz-code-bg);
  border: 1px solid var(--quiz-border);
  border-radius: var(--quiz-radius);
  padding: 0.5rem 0;
  margin-bottom: 0.75rem;
  overflow-x: auto;
  font-family: var(--mono-font);
  font-size: 0.88rem;
  line-height: 1.6;
}

.bug-line {
  display: block;
  padding: 0.15rem 1rem;
  cursor: pointer;
  color: var(--quiz-code-text);
  transition: background 0.1s;
  white-space: pre;
}

.bug-line:hover {
  background: var(--quiz-code-hover);
}

.bug-line-number {
  display: inline-block;
  width: 2rem;
  text-align: right;
  margin-right: 1rem;
  color: var(--quiz-code-line-num);
  user-select: none;
}

.bug-line--selected {
  background: rgba(229, 62, 62, 0.2);
}

.bug-line--correct {
  background: rgba(229, 62, 62, 0.3);
  border-left: 3px solid #E53E3E;
}

.bug-line--wrong {
  background: var(--quiz-code-hover);
}

.bug-line--disabled {
  cursor: default;
}

.bug-fixes {
  display: none;
  margin-top: 0.75rem;
}

.bug-fixes.visible {
  display: block;
}

.bug-fixes p {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.bug-fix-btn {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid var(--quiz-border);
  border-radius: var(--quiz-radius);
  padding: 0.4rem 0.75rem;
  margin-bottom: 0.4rem;
  cursor: pointer;
  font-family: var(--mono-font);
  font-size: 0.85rem;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

.bug-fix-btn:hover:not(:disabled) {
  background: #eef5fb;
  border-color: #61B0DD;
}

.bug-fix-btn--correct {
  background: #d4edda !important;
  border-color: var(--quiz-correct) !important;
  color: var(--quiz-correct);
  font-weight: 600;
}

.bug-fix-btn--incorrect {
  background: #fde8e8 !important;
  border-color: var(--quiz-incorrect) !important;
  color: var(--quiz-incorrect);
}

.bug-fix-btn--disabled {
  cursor: default;
  opacity: 0.85;
}

.bug-feedback-line,
.bug-feedback-fix {
  margin-top: 0.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--quiz-radius);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ── Output Prediction ── */
.output-question {
  background: var(--quiz-bg);
  border: 1px solid var(--quiz-border);
  border-left: 4px solid #5093BB;
  border-radius: var(--quiz-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.output-question p {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.output-question pre {
  background: var(--quiz-code-bg);
  color: var(--quiz-code-text);
  border: 1px solid var(--quiz-border);
  padding: 1rem;
  border-radius: var(--quiz-radius);
  overflow-x: auto;
  font-family: var(--mono-font);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.output-input {
  display: block;
  width: 100%;
  max-width: 24rem;
  border: 1px solid var(--quiz-border);
  border-radius: var(--quiz-radius);
  padding: 0.45rem 0.75rem;
  font-family: var(--mono-font);
  font-size: 0.88rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.15s;
}

.output-input:focus {
  outline: none;
  border-color: #61B0DD;
}

.output-input--correct {
  background: #d4edda;
  border-color: var(--quiz-correct);
  color: var(--quiz-correct);
  font-weight: 600;
}

.output-input--incorrect {
  background: #fde8e8;
  border-color: var(--quiz-incorrect);
  color: var(--quiz-incorrect);
}

.output-expected {
  display: none;
  margin-top: 0.5rem;
  padding: 0.45rem 0.75rem;
  background: #d4edda;
  border: 1px solid #a3d4b5;
  border-radius: var(--quiz-radius);
  font-family: var(--mono-font);
  font-size: 0.85rem;
  color: var(--quiz-correct);
}

.output-expected.visible {
  display: block;
}

.output-question .quiz-feedback {
  margin-top: 0.6rem;
}

/* ── Try Again reset button ── */
.quiz-reset-btn {
  background: transparent;
  border: 1px solid var(--quiz-border);
  border-radius: var(--quiz-radius);
  padding: 0.45rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: inherit;
  margin-left: 0.5rem;
  transition: background 0.15s, border-color 0.15s;
}

.quiz-reset-btn:hover {
  background: var(--quiz-bg);
  border-color: #61B0DD;
}