/* Practice tab — submit/skip, result badge, difficulty rating, problem flags, missed-fact. */
/* Submit Button */
.practice-submit-btn {
  width: 100%;
  max-width: 320px;
  margin-top: 0;
}

/* Result Badge */
.result-badge {
  font-size: 20px;
  font-weight: 700;
  padding: 10px 0;
  margin-bottom: 16px;
}

.result-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.result-badge.correct {
  color: var(--ok);
}

.result-badge.incorrect {
  color: var(--danger);
}

.result-badge.checking {
  color: var(--warn);
}

/* Hide feedback controls while the AI judge is running */
#practice-feedback-area.checking .feedback-prompt,
#practice-feedback-area.checking .feedback-buttons {
  display: none;
}

.override-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

/* This file loads after components.css, so `.override-row` and the global
   `.hidden` are the same specificity and the later one wins — the row JS hides
   after a CORRECT answer stayed on screen offering to correct it. Same trap as
   `#practice-submit-area.hidden` below and `.practice-right.hidden` in
   layout.css; see the invariant in this folder's README. */
.override-row.hidden {
  display: none;
}

.override-btn {
  align-self: flex-start;
  padding: 8px 12px;
  font-size: 12px;
}

/* Feedback Prompt */
.feedback-prompt {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* Feedback Buttons */
.feedback-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.feedback-btn {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.feedback-btn:hover {
  background: rgb(var(--accent-rgb) / 0.1);
  border-color: var(--accent-text);
  color: var(--accent-text);
}

.next-problem-btn {
  flex: 1;
  padding: 10px 12px;
  font-size: 13px;
}

/* Per-problem quality feedback row (content flags) */
.problem-feedback-row {
  display: block;
  margin: -8px 0 20px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.problem-feedback-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.problem-feedback-label {
  font-size: 12px;
  color: var(--muted);
  margin-right: 2px;
}

.problem-flag-btn {
  padding: 5px 10px;
  font-size: 12px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.problem-flag-btn:hover {
  background: rgb(var(--accent-rgb) / 0.1);
  border-color: var(--accent-text);
  color: var(--accent-text);
}

.problem-flag-btn.flagged {
  background: var(--accent);
  border-color: var(--accent-text);
  color: var(--on-accent);
}

/* The note grows with what you type (autogrow.js, via `data-autogrow` in
   the markup), so it carries no drag handle and no scrollbar: the height
   is measured to fit on every keystroke and the PAGE scrolls.

   It used to open at one line (38px) and jump to 160px on focus. That
   pairing is gone — an expand-on-focus box still stops growing at the
   height someone guessed, which is the whole complaint (Seth,
   2026-08-27), and a min-height that changes on focus fights a measured
   height: the box would shrink back the moment it lost focus. What is
   left is a real starting size and no ceiling. `transition` keeps its
   border/shadow halves and drops min-height for the same reason —
   animating the box against a per-keystroke height reads as lag. */
.problem-feedback-note {
  box-sizing: border-box;
  display: block;
  font: inherit;
  font-size: 15px;
  line-height: 1.6;
  min-height: 112px;
  overflow-y: hidden;
  padding: 10px 12px;
  resize: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: inherit;
}

.problem-feedback-note:focus {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / .12);
  outline: none;
}

.problem-feedback-note-wrap {
  color: var(--muted);
  display: block;
  font-size: 11px;
  margin-top: 10px;
}

.problem-feedback-note-wrap > span { display: block; margin-bottom: 5px; }

.problem-feedback-status {
  font-size: 12px;
  color: var(--accent-text);
}
/* Skip sits next to Submit; ghost weight so Submit stays primary. */
#practice-submit-area { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* The ID selector above outweighs the global `.hidden` class — re-assert it
   (same pattern as targeted-practice.css) or the row can never hide. */
#practice-submit-area.hidden { display: none; }
.practice-skip-btn { white-space: nowrap; }

/* Placement-only "I don't know yet" — amber accent so it reads as a real,
   sanctioned diagnostic answer rather than a bail-out. */
.practice-dontknow-btn {
  white-space: nowrap;
  border-color: rgb(var(--warn-rgb) / 0.55);
  color: var(--warn);
}
.practice-dontknow-btn:hover { border-color: var(--warn); }

/* Difficulty rating: helper line + a visually-marked default button. */
.feedback-help {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 2px 0 8px;
}
.feedback-btn--default {
  border-color: var(--accent-text);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/* Failed-test-case breakdown under the Incorrect badge. */
.failed-tests-block {
  background: rgb(var(--accent-rgb) / 0.06);
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
  border-radius: 6px;
  margin: 10px 0;
  padding: 8px 12px;
}
.failed-tests-title {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.failed-tests-body {
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* The Run button's test-case check (practice/test-check.js): every case,
   ✓/✗, under the learner's cells, before anything is submitted. Same box as
   the failed-tests block so the two read as one family; the tone is the
   border — green when every case passes, accent when any fails, neutral
   while the check is in flight. */
.run-tests-block {
  background: rgb(var(--info-rgb) / 0.06);
  border: 1px solid rgb(var(--info-rgb) / 0.35);
  border-radius: 6px;
  margin: 10px 0;
  padding: 8px 12px;
}
.run-tests-block--pass {
  background: rgb(var(--ok-rgb) / 0.06);
  border-color: rgb(var(--ok-rgb) / 0.45);
}
.run-tests-block--fail {
  background: rgb(var(--accent-rgb) / 0.06);
  border-color: rgb(var(--accent-rgb) / 0.35);
}
.run-tests-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.run-tests-block--pass .run-tests-title { color: rgb(var(--ok-rgb)); }
.run-tests-block--fail .run-tests-title { color: var(--accent-text); }
.run-tests-body {
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.run-test--pass { color: rgb(var(--ok-rgb)); font-weight: 700; }
.run-test--fail { color: var(--accent-text); font-weight: 700; }
.run-test--note { color: rgb(var(--ok-rgb)); opacity: 0.85; font-style: italic; }
.run-tests-note {
  font-size: 11px;
  margin-top: 4px;
  opacity: 0.7;
}

/* The mode-demotion banner (.practice-mode-notice) was deleted on 2026-08-23.
   practice/mode.js carries the reason it existed and why a replacement should
   go on the session status row rather than back here. */

/* Instant click acknowledgment while the rating posts (slow-network case). */
.feedback-btn--pressed {
  background: rgb(var(--info-rgb) / 0.18);
  border-color: var(--accent-text);
  color: var(--accent-text);
}
.feedback-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.feedback-btn--pressed:disabled {
  opacity: 1;
}

/* "I missed one concrete thing" — separate from the difficulty rating. */
.missed-fact-row { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Same load-order trap as .override-row above: "I missed one specific thing"
   only makes sense after a WRONG answer, and ui.js hides it otherwise. */
.missed-fact-row.hidden { display: none; }
.missed-fact-btn { font-size: 12px; }
.missed-fact-btn.flagged { border-color: var(--accent-text); }
.missed-fact-status { font-size: 12px; color: var(--accent-text); }