/* Exam-question worksheets with mark schemes (exam/*.html): the look of the page, the paper and the mark scheme.
   Loaded by every chapter page with assets/js/exam-questions.js. */
:root{
  --navy:#002060; --red:#C8102E; --green:#1E7A3C; --gold:#B8860B; --purple:#6A3FA0;
  --light:#EFF3F9; --peach:#FFF4E5; --ink:#1a1a1a;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:"Segoe UI", Aptos, Calibri, Arial, sans-serif; background:var(--light); color:var(--ink); padding:0 0 40px 0; }
header{ background:var(--navy); color:#fff; padding:22px 28px; }
header h1{ margin:0; font-size:1.5rem; letter-spacing:.3px; }
header p{ margin:6px 0 0 0; font-size:.9rem; color:#c7d3ea; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 20px; }

/* ── controls ── */
.controls{ background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,32,96,.08); padding:20px 22px; margin-top:-20px; display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field-wide{ flex-basis:100%; }
.field > label{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--navy); }
.field label.check{ text-transform:none; letter-spacing:0; font-size:.82rem; font-weight:600; display:flex; align-items:center; gap:6px; cursor:pointer; }
.type-links{ font-weight:600; text-transform:none; letter-spacing:0; }
.linkbtn{ background:none; border:0; padding:0; color:var(--navy); font:inherit; text-decoration:underline; cursor:pointer; }
.legend-line{ font-size:.72rem; color:#5a6b8c; margin:-2px 0 4px 0; }
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{ border:2px solid var(--navy); background:#fff; color:var(--navy); padding:7px 12px; border-radius:14px; font-size:.76rem; font-weight:600; cursor:pointer; transition:all .15s; line-height:1.3; }
.chip:hover{ background:var(--light); }
.chip.active{ background:var(--navy); color:#fff; }
.chip.tchip{ border-color:var(--purple); color:var(--purple); }
.chip.tchip.active{ background:var(--purple); color:#fff; }
.count-row{ display:flex; gap:6px; align-items:center; }
input[type=number]{ width:70px; padding:8px 10px; border:2px solid var(--navy); border-radius:8px; font-size:1rem; font-weight:600; color:var(--navy); }
input[type=number]:disabled{ background:#eee; color:#999; border-color:#bbb; }
select#examCountMode{ padding:8px 10px; border:2px solid var(--navy); border-radius:8px; font-size:.9rem; font-weight:600; color:var(--navy); background:#fff; }
.btn{ border:none; border-radius:8px; padding:10px 18px; font-size:.85rem; font-weight:700; cursor:pointer; transition:transform .1s, box-shadow .1s; }
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ box-shadow:0 3px 10px rgba(200,16,46,.35); }
.btn-secondary{ background:var(--navy); color:#fff; }
.btn-ghost{ background:var(--light); color:var(--navy); border:2px solid var(--navy); }
.exam-info{ margin:14px 2px 0; font-size:.9rem; color:#2a3a5c; }

/* timer */
.timer-box{ display:flex; align-items:center; gap:10px; background:var(--navy); color:#fff; padding:8px 16px; border-radius:8px; }
.timer-display{ font-family:"Consolas", monospace; font-size:1.3rem; font-weight:700; min-width:72px; text-align:center; }
.timer-box button{ background:rgba(255,255,255,.15); border:none; color:#fff; border-radius:6px; padding:6px 10px; cursor:pointer; font-size:.85rem; font-weight:700; }
.timer-box button:hover{ background:rgba(255,255,255,.3); }
.timer-mode-row{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.tmode-chip{ border:2px solid var(--navy); background:#fff; color:var(--navy); padding:5px 10px; border-radius:16px; font-size:.72rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.tmode-chip.active{ background:var(--navy); color:#fff; }
#countdownMinutes{ width:52px; padding:5px 4px; border:2px solid var(--navy); border-radius:6px; font-size:.8rem; font-weight:700; color:var(--navy); text-align:center; }
.timer-box.timesup{ animation:timesup-pulse 1s infinite; }
@keyframes timesup-pulse{ 0%{ background:var(--navy); } 50%{ background:var(--red); } 100%{ background:var(--navy); } }

.action-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; align-items:center; }

/* ── the questions ── */
.qgrid{ margin-top:22px; display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
.qcard{ background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,32,96,.07); padding:14px 18px 12px; position:relative; border-left:6px solid var(--navy); break-inside:avoid; min-width:0; }
.qcard.band-1{ border-left-color:var(--green); }
.qcard.band-2{ border-left-color:var(--gold); }
.qcard.band-3{ border-left-color:var(--red); }
.qhead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:8px; }
.qnum{ font-weight:800; color:var(--navy); font-size:1rem; white-space:nowrap; }
.qtoolbar{ display:flex; align-items:center; gap:10px; }
.qtag{ font-size:.66rem; font-weight:700; padding:3px 9px; border-radius:12px; background:var(--light); color:var(--navy); text-align:right; }
.lap{ font-size:.7rem; color:#888; font-family:"Consolas", monospace; }
.icon-btn{ background:#fff; border:1px solid #ccd3e0; border-radius:6px; width:24px; height:22px; cursor:pointer; font-size:12px; color:#556; display:inline-flex; align-items:center; justify-content:center; padding:0; line-height:1; }
.icon-btn:hover{ background:#f0f2f8; }

.qbody{ font-size:1rem; line-height:1.65; }
.qnocalc{ font-style:italic; font-size:.9rem; color:#333; margin:0 0 8px; }
.qintro{ margin:0 0 6px; }
.qintro p{ margin:0 0 4px; }
.qmath{ margin:6px 0 6px 18px; overflow-x:auto; overflow-y:hidden; padding:2px 0 4px; }
.qmath .katex{ font-size:1.08em; }
.qparts{ display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.qpart{ display:grid; grid-template-columns:2.6em 1fr 3em; gap:4px 6px; align-items:start; }
.qlab{ font-weight:600; }
.qptext{ min-width:0; }
.qptext .qmath{ margin-left:0; }
.qmarks{ text-align:right; font-weight:600; white-space:nowrap; }
.qtotal{ text-align:right; font-weight:700; font-size:.86rem; margin-top:8px; color:#333; }
.fig{ margin:6px 0 10px; text-align:center; }
.fig > svg{ width:100%; height:auto; max-width:380px; display:inline-block; }
.figcap{ font-size:.82rem; font-weight:600; color:#333; margin-top:2px; }
.qtable{ border-collapse:collapse; margin:4px auto 8px; font-size:.95rem; }
.qtable th, .qtable td{ border:1px solid #333; padding:5px 12px; text-align:center; min-width:3.2em; }
.qtable th{ font-weight:600; background:#f4f6fb; }
.answer-space{ display:none; }

.reveal-wrap{ position:relative; min-height:44px; border-radius:8px; overflow:hidden; min-width:0; margin-top:10px; }
.cover{ position:absolute; inset:0; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:.85rem; cursor:pointer; border-radius:8px; transition:opacity .15s; user-select:none; z-index:2; text-align:center; padding:6px; }
.cover:hover{ background:#001845; }
.cover.hidden{ opacity:0; pointer-events:none; }
.quick-answer{ background:var(--peach); border-radius:8px; padding:10px 14px; font-size:.98rem; min-height:44px; line-height:1.9; overflow-x:auto; overflow-y:hidden; display:flex; flex-wrap:wrap; gap:4px 22px; align-items:center; }
.qa-item b{ color:var(--navy); margin-right:4px; }

.ms-toggle{ margin-top:10px; background:none; border:none; color:var(--navy); font-weight:700; cursor:pointer; font-size:.84rem; padding:4px 0; }
.ms-toggle:hover{ text-decoration:underline; }
.ms{ margin-top:8px; }

/* ── the mark scheme table ── */
.ms-table{ width:100%; border-collapse:collapse; font-size:.9rem; line-height:1.55; background:#fff; }
.ms-table th{ border:1px solid #333; background:#e7ecf6; padding:5px 8px; font-weight:700; text-align:center; color:var(--navy); }
.ms-table td{ border:1px solid #333; padding:5px 8px; vertical-align:top; }
.ms-table .ms-q{ width:4.2em; white-space:nowrap; font-weight:700; }
.ms-table .ms-m{ width:5em; text-align:center; white-space:nowrap; font-weight:600; }
.ms-table .ms-ao{ width:4.6em; text-align:center; white-space:nowrap; font-size:.84em; }
.ms-table .ms-s .qmath{ margin:2px 0 2px 6px; }
.ms-table tr.ms-sub td{ border-top:none; padding-top:0; padding-bottom:3px; }
.ms-table tr.ms-sub .ms-m{ font-weight:700; }
.ms-table tr.ms-alt td{ background:#f6f8fc; font-weight:600; font-style:italic; }
.ms-table tr.ms-tot td{ background:#f6f8fc; }
.ms-table tr.ms-tot .ms-m{ font-weight:800; }
.ms-notes{ border:1px solid #333; border-top:none; padding:6px 10px 8px; font-size:.86rem; line-height:1.55; background:#fff; }
.ms-notes-h{ font-weight:800; color:var(--navy); margin-bottom:2px; }
.ms-note{ margin:2px 0; }
.ms-note > b:first-child{ color:var(--navy); }
.ms-note-lines{ padding-left:12px; }
.ms-note-lines > div{ margin:1px 0; }
.ms-key{ font-size:.82rem; color:#333; margin:6px 0 14px; line-height:1.5; }
#examSchemePrint{ display:none; }
.print-head{ display:none; }

footer{ text-align:center; color:#8b9bb4; font-size:.75rem; margin-top:30px; }

@media (max-width:700px){
  .controls{ flex-direction:column; align-items:stretch; }
  .qpart{ grid-template-columns:2.2em 1fr 2.6em; }
  .ms-table{ font-size:.82rem; }
  .ms-table .ms-ao{ width:3.2em; white-space:normal; font-size:.72em; }
  .ms-table .ms-m{ width:3.4em; }
  .ms-table th, .ms-table td{ padding:4px 5px; }
  .ms{ overflow-x:auto; }
  /* a phone: the columns keep their widths, and wide maths in the Scheme cell scrolls inside it instead of pushing
     Marks and AOs off the card */
  .ms-table{ table-layout:fixed; }
  .ms-table th:nth-child(1){ width:4.9em; } .ms-table th:nth-child(3){ width:3.9em; } .ms-table th:nth-child(4){ width:3.6em; }
  .ms-table th{ font-size:.8em; padding:4px 2px; }
  .ms-table .ms-m{ white-space:normal; }
  .ms-table .ms-ao{ font-size:.66em; }
  .ms-table tr.ms-tot .ms-m{ font-size:.82em; }
  .ms-table td.ms-s .katex{ display:inline-block; max-width:100%; overflow-x:auto; overflow-y:hidden; vertical-align:middle; }
  .ms-table td.ms-s{ overflow-wrap:anywhere; }
  .ms-table .ms-s .qmath, .ms-table .ms-s .katex-display{ overflow-x:auto; overflow-y:hidden; max-width:100%; }
}

/* ── print: the paper, then the mark scheme ── */
@media print{
  body{ background:#fff; padding:0; color:#000; }
  header, .controls, .action-row, footer, .exam-info, .qtoolbar, .cover, .reveal-wrap, .ms-toggle, .ms{ display:none !important; }
  .wrap{ max-width:none; padding:0; }
  .print-head{ display:block; margin:0 0 10px; border-bottom:2px solid #000; padding-bottom:6px; }
  .print-head-title{ font-size:1.25rem; font-weight:800; }
  .print-head-line{ font-size:.86rem; margin-top:2px; }
  .qgrid{ display:block !important; margin-top:0; }
  .qcard{ box-shadow:none; border:none !important; border-radius:0; padding:8px 0 4px; margin:0 0 6px; break-inside:avoid; page-break-inside:avoid; border-top:1px solid #999 !important; }
  .qhead{ margin-bottom:4px; }
  .qnum{ color:#000; font-size:1rem; }
  .qbody{ font-size:11pt; line-height:1.5; }
  .qmath{ overflow:visible !important; }
  .fig > svg{ max-width:300px; }
  body.print-space .answer-space{ display:block; height:calc(var(--marks) * 1.5cm); max-height:19cm; margin-top:6px; }
  body.print-space .qcard{ break-inside:auto; page-break-inside:auto; }
  body.print-ms #examSchemePrint{ display:block; break-before:page; page-break-before:always; }
  #examSchemePrint h2{ margin:0 0 6px; font-size:1.2rem; }
  .ms-print-q{ margin:0 0 14px; break-inside:avoid; page-break-inside:avoid; }
  .ms-table{ font-size:9.5pt; }
  .ms-notes{ font-size:9pt; }
}