/* ============================================================
   Compare & Quiz — scoped port of the approved prototype
   compare-and-quiz-prototype.html (<style> block).

   ENGINE: auto-graded MCQ.
     Study grid  →  Quiz config (count + quick-set)  →  MCQ run
     (progress bar + running score)  →  results screen.

   EVERY rule is prefixed with the root class `.mk-cq` and the design
   tokens live on `.mk-cq` (NOT :root) so nothing leaks out of the
   widget and no page style reaches in — the prototype's generic class
   names (.wrap/.bar/.pill/.opt/.hint/table/thead/tbody…) would
   otherwise collide with the kit in both directions.

   The prototype's custom properties, colours, sizes, transitions and
   breakpoint are carried over unchanged. The prototype's `body{…}`
   rule becomes the `.mk-cq` root rule (same font stack, same
   line-height, same ink); its page-chrome background/padding are
   dropped — the widget sits inside a kit section card, which already
   supplies the surface.

   DELIBERATE DEVIATION: `.thumb` and `.qimg` were dashed filename
   placeholders in the prototype. They now carry REAL images inside the
   app's standard `.atl-figure__btn` lightbox button. The prototype's
   box sizing intent is preserved (.thumb small in-table, .qimg larger
   in quiz); only the dashed-placeholder paint is replaced by
   object-fit image paint.

   Reader text stays #111111. No browser storage anywhere.
   ============================================================ */
.mk-cq {
  --ink:#111111;
  --muted:#5b6470;
  --line:#dfe3e8;
  --bg:#f6f7f9;
  --card:#ffffff;
  --myc:#0f766e;      /* regional / fungi accent */
  --myc-soft:#e6f2f0;
  --zoo:#9a3412;      /* zoonotic accent */
  --zoo-soft:#f6ebe4;
  --accent:var(--myc);
  --accent-soft:var(--myc-soft);
  --got:#15803d;
  --got-soft:#e7f4ea;
  --miss:#b91c1c;
  --miss-soft:#fbeaea;

  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.4;
}
.mk-cq, .mk-cq *{box-sizing:border-box;}

.mk-cq .wrap{max-width:1120px; margin:0 auto;}

.mk-cq .bar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; margin:14px 0;
}
.mk-cq .bar .group{display:flex; align-items:center; gap:6px;}
.mk-cq .lab{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin-right:2px;}
.mk-cq .spacer{flex:1 1 auto;}

.mk-cq .pill{
  appearance:none; border:1px solid var(--line); background:#fff; color:var(--ink);
  font:inherit; font-size:13px; font-weight:600; padding:7px 13px; border-radius:999px;
  cursor:pointer; transition:.12s;
}
.mk-cq .pill:hover{border-color:#c3c9d1;}
.mk-cq .pill.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.mk-cq .pill.small{font-size:12px; padding:5px 11px;}

/* ---------- table ---------- */
.mk-cq .tablecard{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.mk-cq table{width:100%; border-collapse:collapse; font-size:13.5px;}
.mk-cq thead th{
  background:#f0f2f5; text-align:left; font-size:11px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--muted); font-weight:700;
  padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:bottom;
}
.mk-cq thead th.money{color:var(--accent);}
.mk-cq tbody td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink);}
.mk-cq tbody tr:last-child td{border-bottom:none;}
.mk-cq tbody tr:nth-child(even) td{background:#fbfcfd;}
.mk-cq .org{font-weight:700;}
.mk-cq .org em{font-style:italic;}
.mk-cq .org .plain{font-weight:600;}
.mk-cq .subnote{display:block; font-size:11.5px; color:var(--muted); font-weight:500; margin-top:2px;}
.mk-cq .mnem{font-weight:600;}
.mk-cq .money-cell{background:var(--accent-soft);}
.mk-cq .thumbrow{display:flex; gap:10px; align-items:flex-start;}

/* thumbnail — prototype box metrics, real image, click to expand */
.mk-cq .thumb{
  flex:0 0 auto; width:46px; height:46px; border-radius:8px;
  border:1px solid var(--line); background:#fff; overflow:hidden;
  padding:0; display:block; position:relative;
}
.mk-cq .thumb.atl-figure__btn{appearance:none; cursor:zoom-in; margin:0;}
.mk-cq .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.mk-cq .thumb:hover{border-color:var(--accent);}
.mk-cq .thumb:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* SPECIFICITY GUARD — do not lower.
   modules/rar/pathology/path-figure.css declares `.rar-topic-content
   .atl-figure__btn { width:100% }` at the SAME specificity as the rules above
   but loads LATER in index.html, so it wins the tie and stretches the in-table
   thumb to full cell width (height stays 46px) — the row text then collides
   with the neighbouring column. These selectors carry one extra class so the
   component's own box metrics always win, regardless of load order. */
.mk-cq .thumbrow .thumb.atl-figure__btn{
  width:46px; height:46px; flex:0 0 46px; line-height:0; background:#fff;
}
.mk-cq .thumbrow .thumb.atl-figure__btn img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.mk-cq .quizwrap .qimg.atl-figure__btn{width:150px; height:150px; line-height:0; background:#fff;}
.mk-cq .quizwrap .qimg.atl-figure__btn img{width:100%; height:100%; object-fit:cover; display:block;}

/* The organism cell must never be squeezed by the thumb; keep the name column
   readable and stop long species names from wrapping into the next column. */
.mk-cq .thumbrow > div{min-width:0;}

/* ---------- quiz ---------- */
.mk-cq .quizwrap{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px;}
.mk-cq .qconfig{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end;}
.mk-cq .qconfig .field{display:flex; flex-direction:column; gap:5px;}
.mk-cq .qconfig label{font-size:12px; font-weight:700; color:var(--muted);}
.mk-cq .qconfig input[type=number]{
  width:120px; font:inherit; font-size:16px; font-weight:700; padding:9px 12px;
  border:1px solid var(--line); border-radius:9px; color:var(--ink);
}
.mk-cq .avail{font-size:12.5px; color:var(--muted);}
.mk-cq .btn{
  appearance:none; border:1px solid var(--accent); background:var(--accent); color:#fff; font:inherit;
  font-size:14px; font-weight:700; padding:10px 20px; border-radius:9px; cursor:pointer;
}
.mk-cq .btn:hover{filter:brightness(1.06);}
.mk-cq .btn.ghost{background:#fff; color:var(--ink); border-color:var(--line);}
.mk-cq .quickset{display:flex; gap:6px;}

.mk-cq .qmeta{display:flex; align-items:center; gap:14px; margin-bottom:16px; font-size:13px;}
.mk-cq .progbar{flex:1; height:6px; background:#eceff2; border-radius:99px; overflow:hidden;}
.mk-cq .progfill{height:100%; background:var(--accent); transition:width .2s;}
.mk-cq .qscore{font-weight:700; white-space:nowrap;}

.mk-cq .qstem{font-size:17px; font-weight:600; line-height:1.35; margin-bottom:14px;}
.mk-cq .qstem em{font-style:italic;}
.mk-cq .qval{
  display:inline-block; background:var(--accent-soft); border:1px solid var(--accent); color:var(--ink);
  padding:2px 9px; border-radius:7px; font-weight:600; font-size:15px; margin-top:4px;
}

/* quiz figure — prototype box metrics, real image, click to expand */
.mk-cq .qimg{
  width:150px; height:150px; border-radius:10px; border:1px solid var(--line);
  background:#fff; overflow:hidden; padding:0; display:block; margin-bottom:16px; position:relative;
}
.mk-cq .qimg.atl-figure__btn{appearance:none; cursor:zoom-in;}
.mk-cq .qimg img{width:100%; height:100%; object-fit:cover; display:block;}
.mk-cq .qimg:hover{border-color:var(--accent);}
.mk-cq .qimg:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.mk-cq .qopts{display:flex; flex-direction:column; gap:10px; max-width:640px;}
.mk-cq .opt{
  appearance:none; text-align:left; border:1px solid var(--line); background:#fff; color:var(--ink);
  font:inherit; font-size:14.5px; padding:12px 15px; border-radius:10px; cursor:pointer;
  transition:.1s; line-height:1.35;
}
.mk-cq .opt:hover:not(:disabled){border-color:var(--accent); background:#fbfdfd;}
.mk-cq .opt em{font-style:italic;}
.mk-cq .opt.correct{border-color:var(--got); background:var(--got-soft); font-weight:600;}
.mk-cq .opt.wrong{border-color:var(--miss); background:var(--miss-soft);}
.mk-cq .opt:disabled{cursor:default;}
.mk-cq .opt .tick{float:right; font-weight:800;}
.mk-cq .opt.correct .tick{color:var(--got);}
.mk-cq .opt.wrong .tick{color:var(--miss);}

.mk-cq .qnext{margin-top:18px; display:flex; justify-content:flex-end;}

.mk-cq .qdone{text-align:center; padding:14px 0;}
.mk-cq .qdone .big{font-size:40px; font-weight:800; letter-spacing:-0.02em;}
.mk-cq .qdone .pct{color:var(--accent);}
.mk-cq .qdone .msg{color:var(--muted); font-size:14px; margin:6px 0 20px;}
.mk-cq .qdone .row{display:flex; gap:10px; justify-content:center;}

.mk-cq .hint{font-size:12px; color:var(--muted); margin:10px 2px 0;}

@media (max-width:720px){
  .mk-cq thead{display:none;}
  .mk-cq tbody td{display:block; border:none; padding:6px 12px;}
  .mk-cq tbody tr{display:block; border-bottom:1px solid var(--line); padding:8px 0;}
  .mk-cq tbody td::before{
    content:attr(data-h); display:block; font-size:10px; text-transform:uppercase;
    letter-spacing:.05em; color:var(--muted); font-weight:700; margin-bottom:2px;
  }
}