/* confidence.css — SIGNATURE: THANG TIN CẬY (R2-BUILD, preview)
 *
 * Mọi con số năng lực hiện kèm "dựa trên N câu đã làm · đo X ngày trước".
 * Điểm số không bao giờ đứng một mình.
 *
 * 3 lớp:
 *   Lớp 1  tên chuyên đề + % + nhãn bậc (4 bậc thật)
 *   Lớp 2  thanh mastery, mốc 0.4 / 0.6 / 0.8 (khớp MASTERY_LEVEL backend)
 *   Lớp 3  chuỗi hạt = số câu đã làm + độ tươi
 *
 * Ràng buộc: KHÔNG animation lặp vô hạn. Kích thước tối thiểu chống
 * "look báo giấy hairline" (bar >=6px, dot >=8px).
 */

/* ---------- khối ---------- */
.conf {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.conf:last-child { border-bottom: 0; }

/* ---------- Lớp 1: tên + số + nhãn ---------- */
.conf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.conf-name {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--heading);
}
.conf-figure {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  white-space: nowrap;
}
.conf-score {
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;   /* số thẳng cột khi so sánh */
  letter-spacing: -0.01em;
}
.conf-level { font-size: var(--t-sm); font-weight: 600; }

/* Màu NHỊ PHÂN (R3 §3): ổn = brand · cần làm = amber. Không traffic-light, KHÔNG đỏ.
   Mức độ do thanh + số % nói, không bắt màu gánh.

   ⚠️ ĐO ĐƯỢC: ok #1b6d99 vs action #8a5a00 chỉ phân biệt 1.04 — vì cả hai đều
   phải đạt AA trên nền trắng nên độ sáng buộc phải gần nhau (giới hạn toán học,
   mọi tổ hợp thử đều <=1.3). Màu MỘT MÌNH không đủ để "mắt lập tức thấy cái nào
   cần làm". Vì vậy nhóm "cần làm" có thêm dấu hiệu KHÔNG phụ thuộc màu: */
.conf[data-action="true"] {
  border-left: 3px solid var(--mastery-action);
  padding-left: var(--sp-3);
  margin-left: calc(var(--sp-3) * -1);
}
.conf[data-action="true"] .conf-level::before {
  content: "▲ ";            /* dấu hình thức — mù màu vẫn thấy */
  font-size: 0.85em;
}
.conf-level[data-level="strong"]     { color: var(--mastery-ok); }
.conf-level[data-level="developing"] { color: var(--mastery-ok); }
.conf-level[data-level="weak"]       { color: var(--mastery-action); }
.conf-level[data-level="priority"]   { color: var(--mastery-action); }
.conf-level[data-level="unknown"]    { color: var(--mastery-unknown); font-weight: 400; }

/* ---------- Lớp 2: thanh mastery ---------- */
.conf-bar {
  position: relative;
  height: var(--conf-bar-height);
  background: var(--mastery-track);
  border-radius: var(--r-full);
  overflow: hidden;
}
.conf-bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width var(--tr);
}
.conf-bar-fill[data-level="strong"]     { background: var(--mastery-ok); }
.conf-bar-fill[data-level="developing"] { background: var(--mastery-ok); }
.conf-bar-fill[data-level="weak"]       { background: var(--mastery-action); }
.conf-bar-fill[data-level="priority"]   { background: var(--mastery-action); }

/* Ít câu đã làm -> nét đứt: mắt tự hiểu "ước lượng chưa chắc" */
.conf-bar-fill[data-tentative="true"] {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0) 0 6px,
    rgba(255,255,255,0.55) 6px 10px
  );
}

/* Mốc bậc 0.4 / 0.6 / 0.8 — cho thấy thang, không chỉ một con số */
.conf-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 0 calc(40% - 1px), rgba(22,24,29,.18) calc(40% - 1px) 40%, transparent 40%),
    linear-gradient(90deg, transparent 0 calc(60% - 1px), rgba(22,24,29,.18) calc(60% - 1px) 60%, transparent 60%),
    linear-gradient(90deg, transparent 0 calc(80% - 1px), rgba(22,24,29,.18) calc(80% - 1px) 80%, transparent 80%);
  pointer-events: none;
}

/* ---------- Lớp 3: chuỗi hạt + độ tươi ---------- */
.conf-evidence {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--text-secondary);
}
.conf-dots { display: inline-flex; gap: var(--conf-dot-gap); }
.conf-dot {
  width: var(--conf-dot-size);
  height: var(--conf-dot-size);
  border-radius: var(--r-full);
  background: var(--border-strong);
}
.conf-dot[data-on="true"] { background: var(--text-secondary); }
.conf-meta { font-variant-numeric: tabular-nums; }

/* Đánh giá cũ -> giảm đậm + nhắc đo lại */
.conf[data-stale="true"] .conf-score,
.conf[data-stale="true"] .conf-level { opacity: 0.72; }
.conf-stale-hint { color: var(--warn); font-weight: 600; }

/* Chưa đủ câu: không hiện %, nói thẳng */
.conf[data-unknown="true"] .conf-bar { opacity: 0.5; }

/* Topic chưa có bài luyện (question_count < PRACTICE_MIN_QUESTIONS) */
.conf-nopractice { color: var(--text-secondary); font-style: normal; }

/* ---------- hành động ---------- */
.conf-action {
  margin-left: auto;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--brand);
  background: none;
  border: 0;
  padding: var(--sp-1) 0;
  cursor: pointer;
  min-height: 44px;              /* touch target */
}
.conf-action:hover { text-decoration: underline; }
.conf-action:disabled { color: var(--text-secondary); cursor: default; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .conf-bar-fill { transition: none; }
}