/* ==========================================================================
   CÁCH GIẢI — khối "💡 Xem cách giải" dưới thẻ câu hỏi ĐÃ CHẤM.
   Mã: src/exam/exam-solution.js · Kế hoạch: docs/ke-hoach-cach-giai.html (G1)

   🎨 VÌ SAO TOÀN TÔNG XANH/TRUNG TÍNH, KHÔNG MỘT CHẤM XANH LÁ / ĐỎ / CAM:
      Ba màu đó trong app này MANG Ý NGHĨA HỌC TẬP — xanh lá = đúng, đỏ = sai,
      cam/vàng = phần thưởng. Khối lời giải nằm NGAY DƯỚI nhãn "✓ Đúng" / "✕ Sai!",
      nên nó mà cũng xanh lá hay đỏ thì trẻ đọc nhầm thành một lời phán xét nữa.
      Lời giải là CHỖ GIÚP ĐỠ, phải trông trung lập. Tông xanh dương + chữ mực.

   Mọi màu đều qua biến của tokens.css — không một mã màu cứng nào.
   ========================================================================== */

.q-solution {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-card);
}

/* Nút mở lời giải. Vùng chạm ≥ 44px cho ngón tay trẻ (ưu tiên điện thoại).
   🔴 `white-space: normal` là BẮT BUỘC: thẻ <button> mặc định nowrap, mà nhãn
   "💡 Xem cách giải" ở màn hẹp sẽ bị CẮT CỤT — lỗi chỉ lộ ở vài bề rộng màn. */
.q-solution-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--border-field);
    border-radius: 10px;
    background: var(--surface-subtle);
    color: var(--accent-secondary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    text-align: left;
    cursor: pointer;
}

.q-solution-toggle:hover {
    background: var(--surface-tint-blue);
    color: var(--accent-secondary-hover);
}

.q-solution-toggle:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.q-solution-body {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-subtle);
    color: var(--text-body);
}

/* BẤM MỘT LẦN HIỆN HẾT (đại ca chốt 03/10) — thứ tự như cô giảng trên bảng:
   lời dẫn → "Nên phép tính cần làm" → các bước → "Đáp án". Mỗi dòng một ý. */
.q-solution-line {
    font-size: 16px;
    line-height: 1.55;
}

.q-solution-line + .q-solution-line,
.q-solution-line + .q-solution-steps,
.q-solution-steps + .q-solution-line {
    margin-top: 6px;
}

/* Lời dẫn: các số trong phép tính LẤY TỪ ĐÂU — câu văn thường, đọc như cô nói. */
.q-solution-reason {
    color: var(--text-body);
}

/* Phép tính cần làm: phần phép tính in đậm để mắt trẻ bắt ngay. */
.q-solution-expr b,
.q-solution-answer b {
    color: var(--text-strong);
    white-space: nowrap; /* đừng ngắt giữa một phép tính: "48 + 27" phải nằm trọn 1 dòng */
}

/* Các bước tính (chỉ có khi từ hai phép trở lên). Mỗi bước đã tự mang lời nối
   "Trước hết… / Sau đó… / Cuối cùng…", nên KHÔNG đánh số — bỏ số mặc định của <ol>. */
.q-solution-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.q-solution-step {
    padding: 4px 0 4px 12px;
    border-left: 3px solid var(--border-input);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-body);
}

.q-solution-step + .q-solution-step {
    margin-top: 4px;
}

/* Đáp án: dòng chốt, tách khỏi phần giảng bằng một vạch mảnh. */
.q-solution-answer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--line-200);
    font-size: 17px;
    color: var(--text-strong);
}