/* ============================================================================
   lc-feedback.css — Matching board, results, and the shared quiz feedback
   family (Task 4)
   ----------------------------------------------------------------------------
   Requires lc-tokens.css. Append to wwwroot/css/site.css.

   ONE VOCABULARY, used by every surface that reports an outcome:
     green left rule  = correct
     blue  left rule  = informational (incorrect, partial, blocked, notice)
     red              = GLYPH ONLY, never a surface

   This unifies four components that already half-used the pattern:
   .feedback-section, the score banner, the blocked notice (Task 2) and the
   results rows. A learner can read it without being taught.
   ========================================================================== */


/* ==========================================================================
   MATCHING BOARD — Pages/Shared/_Matching.cshtml
   Shared with real quizzes, so it must read as an answer surface, not a game.
   ========================================================================== */

/* ⚠ CRITICAL — WHY THE HEADER ROW IS CURRENTLY BLANK
   ---------------------------------------------------------------------------
   Cell backgrounds must go through --bs-table-bg, NEVER background-color.

   bootstrap.css:1964 applies, via `.table > :not(caption) > * > *`:
       background-color: var(--bs-table-bg);      (line 1966)
   and --bs-table-bg defaults to `transparent`    (line 1950).

   That selector scores (0,1,1) — one class from `.table` plus one type from
   `:not(caption)` — and outranks `.matching-stem-header` at (0,1,0). So the
   header cell is painted transparent, the white page shows through, and its
   `color: white` still applies. White text on a white cell.

   It is NOT the inset box-shadow at line 1968: --bs-table-accent-bg is also
   transparent (line 1951) and this table carries no `.table-*` variant, so
   that shadow paints nothing here. Removing it changes nothing. The shadow IS
   the mechanism for .table-success / .table-danger, which is why those two
   work — worth knowing, because this file stops using them.

   Same cause: `.matching-stem-cell`'s `#f8f9fa` has never rendered either. */

.matching-table { max-width: 700px; }

.matching-stem-header,
.matching-target-header {
  --bs-table-bg: var(--lc-surface-2);
  color: var(--lc-text-muted);          /* 7.76:1 on surface-2 */
  font-size: var(--lc-text-sm);
  font-weight: var(--lc-weight-semi);   /* was `bold` — 700 on a 12px Greek
                                           or German caption is a smudge */
  text-align: start;                    /* was `center`; `start` is RTL-safe */
  padding: var(--lc-space-3) var(--lc-space-4);
}

.matching-stem-cell {
  --bs-table-bg: var(--lc-surface-2);
  vertical-align: middle;
  width: 40%;
  padding: var(--lc-space-3) var(--lc-space-4);
}
.matching-target-cell {
  vertical-align: middle;
  width: 60%;
  padding: var(--lc-space-3) var(--lc-space-4);
}

/* #0066cc at 5.57:1 is far more contrast than 1.4.11 asks of a control
   boundary, and eight saturated blue rectangles down a column are the loudest
   element on an answer form. The accent is spent on focus instead, where it
   carries meaning. */
.matching-dropdown {
  border: 1px solid var(--lc-border-control);   /* was #0066cc; 3.54:1 */
  border-radius: var(--lc-radius-sm);           /* was 3px */
  padding: var(--lc-space-2) var(--lc-space-3);
  cursor: pointer;
  max-width: 100%;
}
/* Was: `outline: none` plus a 25%-alpha box-shadow — i.e. it removed the
   focus outline and substituted something weaker than the TD-194 ring. */
.matching-dropdown:focus-visible {
  outline: var(--lc-focus-width) solid var(--lc-focus-ring);
  outline-offset: var(--lc-focus-offset);
  border-color: var(--lc-primary);
  box-shadow: none;
}

/* site.css already carries `.feedback-text { font-style: normal }` with the
   comment "no italic for dyslexia accessibility". _Matching.cshtml still
   wraps its hint and its distractor note in <em>. Same policy, same partial,
   missed. Drop the <em> in the Razor; this is the belt-and-braces. */
.matching-note,
.matching-note em,
.question-block .text-muted em {
  font-style: normal;
  font-size: var(--lc-text-sm);
  color: var(--lc-text-muted);
}


/* ==========================================================================
   PRACTICE RESULTS — Pages/Games/Matching.cshtml (.cg-mt-results)
   Row signal is a left rule. NO row fill in either direction.
   ========================================================================== */

.cg-mt-results td,
.cg-mt-results th {
  vertical-align: middle;
  padding: var(--lc-space-3) var(--lc-space-4);
}

.cg-mt-results tr > td:first-child {
  width: 34px;
  text-align: center;
  border-left-width: 3px;
  border-left-style: solid;
}
.cg-mt-row-ok > td:first-child { border-left-color: var(--lc-success); }
.cg-mt-row-ko > td:first-child { border-left-color: var(--lc-info); }

/* The red ✗ stays — 4.53:1, legible, scannable, and permitted. What it must
   not do is spread. */
.cg-mt-results .cg-mt-ok { color: var(--lc-success); font-size: 1.1em; }
.cg-mt-results .cg-mt-ko { color: var(--lc-danger-glyph); font-size: 1.1em; }

/* Explanation cell: calm ground, correct answer stated in the EMPHASIS token
   (5.13:1 on white, vs --lc-success's 4.53:1 — which is why emphasis is the
   text token and --lc-success is the rule/glyph token). */
.cg-mt-row-ko > td:last-child { --bs-table-bg: var(--lc-info-surface); }
.cg-mt-expected {
  display: block;
  margin-top: var(--lc-space-1);
  color: var(--lc-success-emphasis);
  font-weight: var(--lc-weight-medium);
}
.cg-mt-chosen { color: var(--lc-text-muted); }


/* ==========================================================================
   GRADED QUIZ FEEDBACK — shared partials
   Three brief violations fixed here. See the README.
   ========================================================================== */

/* _QuizQuestionFeedback.cshtml computed borderClass as
   border-success / border-primary / border-danger. Partial credit already got
   blue — someone reasoned it through and stopped one branch short. A full
   outline in a state colour frames the whole answer as a verdict; a left rule
   marks it and stops. */
.cg-fb-card {
  background: var(--lc-base);
  border: 1px solid var(--lc-border);
  border-left: 3px solid var(--lc-info);
  border-radius: 0 var(--lc-radius-md) var(--lc-radius-md) 0;
  padding: var(--lc-space-5);
}
.cg-fb-card.cg-fb-correct { border-left-color: var(--lc-success); }

.feedback-section {
  margin-top: var(--lc-space-2);
  padding: var(--lc-space-3) var(--lc-space-4);
  border-left: 3px solid;
  border-radius: 0 var(--lc-radius-sm) var(--lc-radius-sm) 0;
  line-height: var(--lc-leading-normal);
}
.feedback-choice    { border-left-color: var(--lc-text-muted);
                      background: var(--lc-surface-2); }
.feedback-correct   { border-left-color: var(--lc-success);
                      background: var(--lc-success-subtle); }
.feedback-incorrect { border-left-color: var(--lc-info);
                      background: var(--lc-info-surface); }

/* _QuizScoreBanner.cshtml. The score-indexed icon ladder is NOT deleted —
   Task 5 keeps it behind the opt-in Arcade tier. Add `cg-p-summary` here too
   (see lc-play-skin.css). */
.cg-fb-banner {
  background: var(--lc-info-surface);
  border-left: 3px solid var(--lc-info);
  border-radius: 0 var(--lc-radius-md) var(--lc-radius-md) 0;
  padding: var(--lc-space-5);
  color: var(--lc-text);
}
.cg-fb-banner-score { color: var(--lc-text-muted); font-size: var(--lc-text-base); }

/* Was `text-danger`. A mechanical note about excess letters is not a
   scolding. */
.cg-fb-excess { color: var(--lc-text-muted); }


/* ==========================================================================
   MEMORY REVEAL DWELL
   Border only; the 1400ms itself lives in Memory.cshtml's setTimeout.
   ========================================================================== */

/* Unmatched pair holds visible with an INFORMATIONAL border, so the mismatch
   is stated rather than merely undone. Blue, not red. */
.cg-mem-tile.cg-up.cg-mem-miss { border-color: var(--lc-info); }