/* ============================================================
   Medcue — the exam paper sheet.
   A faithful black-on-white printed-exam replica. Do not modernise.
   Subtle rhythm/legibility refinements only. Loaded AFTER base.css
   (it consumes the tokens defined there).
   ============================================================ */

.sheet{
  max-width:var(--maxw); margin:22px auto 64px;
  background:var(--paper); color:#000;
  border:1px solid var(--line);
  box-shadow:var(--sh-paper);
  border-radius:3px;            /* barely-there — still reads as a printed page */
  padding:38px 46px 52px;

  /* The paper is ALWAYS light. Re-pin the palette tokens on the sheet so
     the .shell-dark dark-chrome treatment (base.css) can never leak onto
     the printed page or the platform controls that sit on it (mode picker,
     rationale panels, option buttons). Identical to the light :root values. */
  --bg:#eef0f4; --bg-2:#f6f7f9;
  --line:#d7dae1; --line-2:#c2c6cf;
  --ink:#15171c; --ink-2:#3b414d; --muted:#697184;
  --acc-tint:#e9f4f1; --acc-300:#7fb8ac; --acc-ink:#0c5347;
  --sh-1:0 1px 2px rgba(20,24,33,.05), 0 1px 3px rgba(20,24,33,.06);
  --sh-2:0 2px 6px rgba(20,24,33,.06), 0 6px 18px rgba(20,24,33,.08);
  color-scheme:light;
}
@media(max-width:640px){
  .sheet{
    margin:0 auto 40px; border-left:0; border-right:0; border-radius:0;
    padding:22px 18px 40px;
    box-shadow:0 6px 18px rgba(20,24,33,.08);
  }
}

/* ---------- cover ---------- */
.cover{border-bottom:2px solid #000; padding-bottom:24px; margin-bottom:8px}
.wordmark{display:flex;align-items:center;gap:10px;font-weight:bold; font-size:30px; letter-spacing:1px; line-height:1; color:#000}
.wordmark>img{display:block;width:42px;height:42px;flex:none}
.wordmark .sub{display:block; font-size:12px; font-weight:normal; letter-spacing:7px; margin-top:5px}
.disclaimer{font-style:italic; font-weight:bold; font-size:13px; margin:18px 0 14px; color:#000}
.coverhead{font-weight:bold; font-size:13px; margin:10px 0 14px; color:#000}
table.details{border-collapse:collapse; width:100%; margin:6px 0 18px; font-size:13.5px; color:#000}
table.details td{border:1px solid #000; padding:9px 11px; vertical-align:top; line-height:1.4}
table.details td.k{font-weight:bold; width:46%; background:#fafafa}
.cover h2{font-size:13px; margin:18px 0 6px; color:#000; letter-spacing:.3px}
.cover ul{margin:0; padding-left:20px} .cover li{margin:5px 0; font-size:13px}
.cover p{margin:8px 0; font-size:13px; color:#000}
.aids{display:grid; grid-template-columns:120px 1fr; row-gap:5px; font-size:13px}

/* ---------- sections + questions ---------- */
.sectionbanner{
  text-align:center; font-weight:bold; margin:34px 0 20px; font-size:15px; line-height:1.55;
  color:#000; padding-bottom:14px; border-bottom:1px solid #000;
  letter-spacing:.2px;
}
.q{margin:0 0 28px; padding:18px 4px 4px; border-top:1px solid #e3e3e3}
.q:first-of-type{border-top:0}
.qhead{display:flex; gap:12px}
.qnum{font-weight:bold; min-width:26px; color:#000; font-variant-numeric:tabular-nums}
.qbody{flex:1; min-width:0}
.stem{margin:0 0 2px; color:#000}
.imgwrap{text-align:center; margin:14px 0}
.imgwrap img{
  max-width:100%; width:auto; max-height:60vh;
  border:1px solid var(--line-2); border-radius:4px; cursor:zoom-in;
  transition:box-shadow var(--t) var(--ease);
}
.imgwrap img:hover{box-shadow:var(--sh-2)}
.imgwrap.imgfilm img,.imgwrap.imgcard img{max-width:560px}
.imgnote{font-size:12px; color:var(--muted); font-style:italic; margin-top:4px}
.leadin{font-weight:bold; margin:14px 0 10px; color:#000}
.tag{
  display:inline-block; font-size:11px; color:var(--muted);
  border:1px solid var(--line); border-radius:4px; padding:1px 7px;
  margin:0 4px 6px 0; font-weight:normal;
}

/* vault-jump flash on a question */
.q.flash{animation:qflash 1.5s var(--ease)}
@keyframes qflash{0%,100%{background:transparent} 30%{background:#fff6da}}

/* ---------- options ---------- */
ol.opts{list-style:none; margin:0; padding:0}
ol.opts li{margin:8px 0}
.opt{
  display:flex; gap:12px; width:100%; text-align:left; align-items:flex-start;
  background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:13px 14px;
  font:inherit; color:#000; cursor:pointer;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.opt:hover:not(:disabled){border-color:var(--line-2); background:var(--bg-2); box-shadow:var(--sh-1)}
.opt:active:not(:disabled){transform:translateY(.5px)}
.opt:disabled{cursor:default}
.opt .lab{font-weight:bold; min-width:18px}
.opt .otext{flex:1; min-width:0}
.opt.correct{border-color:var(--correct); background:var(--correct-bg); box-shadow:none}
.opt.wrong{border-color:var(--wrong); background:var(--wrong-bg); box-shadow:none}
/* exam mode: chosen option (correctness hidden until submit) */
.opt.picked{border-color:var(--acc); background:var(--acc-tint); box-shadow:inset 0 0 0 1px var(--acc-300)}
.opt.picked .lab{color:var(--acc-ink)}
.opt.picked .mark::after{content:"\2022"; color:var(--acc)}
.opt.correct .lab{color:var(--correct)} .opt.wrong .lab{color:var(--wrong)}
.opt .mark{margin-left:auto; font-weight:bold; font-size:16px}
.opt.correct .mark{color:var(--correct)} .opt.wrong .mark{color:var(--wrong)}

/* ---------- rationale ---------- */
.rat{
  margin-top:14px; border-left:4px solid var(--acc); background:#f4f9f7;
  border-radius:0 8px 8px 0; padding:13px 15px; font-size:14px; color:#000;
}
.rat .verdict{font-weight:bold; margin-bottom:6px; letter-spacing:.1px}
.rat .verdict.ok{color:var(--correct)} .rat .verdict.no{color:var(--wrong)}
.rat ul{margin:6px 0; padding-left:18px} .rat li{margin:4px 0}
/* progressive disclosure: "why the other options are wrong" */
.rat-why{margin:4px 0 2px}
.rat-why > summary{
  list-style:none; cursor:pointer; color:var(--acc-ink); font-weight:600;
  font-size:13px; padding:4px 0; min-height:30px; display:flex; align-items:center; gap:6px;
}
.rat-why > summary::-webkit-details-marker{display:none}
.rat-why > summary::before{content:"\25B8"; transition:transform var(--t-fast) var(--ease); color:var(--acc-300)}
.rat-why[open] > summary::before{transform:rotate(90deg)}
.rat-why[open] > summary{margin-bottom:2px}
.rat-why ul{margin:2px 0 6px}
.rat .pearl{
  font-style:normal; margin-top:10px; padding-top:9px;
  border-top:1px dashed var(--acc-300); color:var(--acc-ink);
}
.rat .pearl b{color:var(--acc-700)}
.rat .src{color:var(--muted); font-size:12.5px; margin-top:7px}
.rat .anchor{color:var(--muted); font-size:12px; margin-top:5px}
.endexam{text-align:center; font-weight:bold; margin:36px 0 0; font-size:15px; color:#000; padding-top:18px; border-top:2px solid #000}

/* ============================================================
   RICH WORKED EXPLANATION  (q.explain_html)
   Author-authored trusted HTML rendered inside .rat .explain:
   coloured key terms, a mnemonic box, an inline SVG diagram.
   ============================================================ */
.rat .explain{
  margin:8px 0 2px; font-size:14px; line-height:1.62; color:#1a1c22;
}
.rat .explain p{margin:0 0 9px}
.rat .explain p:last-child{margin-bottom:0}
.rat .explain b, .rat .explain strong{font-weight:700; color:#10131a}
/* coloured key-term highlights — readable on the accent-tinted .rat surface */
.rat .explain .hl{color:var(--acc-ink); font-weight:700}                 /* accent — the key concept   */
.rat .explain .hl-g{color:#11663a; font-weight:700}                     /* green  — correct / do this */
.rat .explain .hl-r{color:#b32d1e; font-weight:700}                     /* red    — danger / the trap */
.rat .explain .hl-b{color:#1d56a6; font-weight:700}                     /* blue   — number / mechanism */
.rat .explain .hl-p{color:#6b3aa0; font-weight:700}                     /* purple — drug / agent      */
.rat .explain ul,.rat .explain ol{margin:6px 0; padding-left:20px}
.rat .explain li{margin:3px 0}
/* mnemonic / key-box */
.rat .explain .kbox{
  margin:11px 0; padding:10px 13px; background:#fff;
  border:1px solid var(--acc-300); border-left:4px solid var(--acc);
  border-radius:0 8px 8px 0; box-shadow:var(--sh-1);
}
.rat .explain .kbox .kt{
  display:block; font-size:11px; font-weight:800; letter-spacing:.7px;
  text-transform:uppercase; color:var(--acc-ink); margin-bottom:4px;
}
.rat .explain .kbox b{color:var(--acc-ink)}
/* danger / trap callout */
.rat .explain .trap{
  margin:11px 0; padding:9px 12px; background:var(--wrong-bg);
  border-left:4px solid var(--wrong); border-radius:0 8px 8px 0;
  color:#7a2018; font-size:13.5px;
}
.rat .explain .trap b{color:var(--wrong)}
/* inline SVG diagram */
.rat .explain .dia{
  margin:12px 0; text-align:center; background:#fff;
  border:1px solid var(--line); border-radius:10px; padding:12px 10px;
  box-shadow:var(--sh-1);
}
.rat .explain .dia svg{max-width:100%; height:auto}
.rat .explain .dia .cap{
  display:block; margin-top:7px; font-size:12px; color:var(--muted); font-style:italic;
}
/* small comparison table inside an explanation */
.rat .explain table{
  border-collapse:collapse; width:100%; margin:10px 0; font-size:13px;
  background:#fff; border-radius:8px; overflow:hidden; box-shadow:var(--sh-1);
}
.rat .explain th,.rat .explain td{
  border:1px solid var(--line); padding:7px 9px; text-align:left; vertical-align:top;
}
.rat .explain th{background:var(--acc-tint); color:var(--acc-ink); font-weight:700}
@media (max-width:640px){ .rat .explain{font-size:13.5px} }

/* ============================================================
   IMAGE LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; background:rgba(15,17,22,.9);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:var(--z-lightbox);
  padding:calc(20px + var(--safe-t)) 20px calc(20px + var(--safe-b));
  cursor:zoom-out;
}
.lightbox.open{display:flex; animation:lbfade var(--t) var(--ease)}
.lightbox img{
  max-width:100%; max-height:100%; border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
@keyframes lbfade{from{opacity:0} to{opacity:1}}