/* ============================================================
   Exam practice for a set text — /version2/assets/js/settext-exam.js
   The settings panel, then the paper and its mark scheme on A4
   sheets in the plain black-and-white of a printed exam paper.
   ============================================================ */

/* ── settings ── */
.xp-controls .pb { display: grid; gap: 16px; }
.xp-controls [hidden] { display: none !important; }
.xp-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.xp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.xp-field > span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.xp-field select { font: inherit; font-size: 14px; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; max-width: 100%; }
.xp-range { flex: 1 1 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xp-range select { width: 100%; }
.xp-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-kind { font: inherit; font-size: 14px; text-align: left; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 9px; padding: 9px 13px; cursor: pointer; line-height: 1.3; }
.xp-kind small { display: block; font-size: 12px; color: var(--muted); }
.xp-kind:hover { border-color: var(--ink); }
.xp-kind[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--brand-soft); }
.xp-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); cursor: pointer; padding-bottom: 8px; }
.xp-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.xp-code { font-size: 13px; color: var(--muted); margin-left: auto; }
.xp-code b { color: var(--ink); font-weight: 700; letter-spacing: .04em; }
@media (max-width: 640px) {
  .xp-range { grid-template-columns: 1fr; }
  .xp-code { margin-left: 0; width: 100%; }
}

/* ── the sheets ── */
.xp-stage { display: grid; gap: 26px; justify-items: center; padding: 26px 0 40px; }
.xp-stage [hidden] { display: none; }
.xp-out { width: 100%; min-width: 0; display: flex; justify-content: center; }
.xp-out > * { min-width: 0; }
.xp-sheet { width: 100%; max-width: 21cm; background: #fff; color: #000; padding: 1.8cm 1.6cm;
  font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.45;
  box-shadow: 0 6px 24px rgba(14,30,63,.12); border-radius: 2px; }
.xp-sheet i { font-style: italic; }
.xp-empty { max-width: 21cm; width: 100%; background: var(--paper); border: 1px dashed var(--rule); border-radius: 12px; padding: 28px; text-align: center; color: var(--body); }

.xp-head { border-bottom: 2px solid #000; padding-bottom: 12px; margin-bottom: 16px; }
.xp-kicker { font-size: 9.5pt; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; }
.xp-title { font-family: Arial, Helvetica, sans-serif; font-size: 19pt; font-weight: 700; color: #000; margin: 0 0 4px; line-height: 1.2; letter-spacing: 0; }
.xp-sub { font-size: 12pt; margin: 0; }
.xp-note { font-size: 9.5pt; font-style: italic; margin: 6px 0 0; }
.xp-facts { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-top: 10px; font-size: 10.5pt; }
.xp-instr { border: 1px solid #000; padding: 10px 12px; margin-bottom: 18px; font-size: 10pt; }
.xp-instr-h { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 3px; }
.xp-instr ul { margin: 0 0 8px; padding-left: 17px; }
.xp-instr ul:last-child { margin-bottom: 0; }
.xp-section { margin: 20px 0 14px; }
.xp-section h3 { font-family: Arial, Helvetica, sans-serif; font-size: 13pt; font-weight: 700; color: #000; letter-spacing: 0; margin: 0; }
.xp-section p { font-size: 10.5pt; font-weight: 700; margin: 2px 0 0; }

.xp-question { margin: 0 0 22px; }
.xp-qhead { display: flex; gap: 8px; margin: 0 0 12px; }
.xp-qhead p { flex: 1; margin: 0; }
.xp-num { flex: none; min-width: .9cm; font-weight: 700; }

/* the Latin, line-numbered in the left margin, each line exactly as laid out
   so that the line numbers in the questions are true */
.xp-passage { margin: 0 0 4px 0.9cm; font-size: 11pt; line-height: 1.6; overflow-x: auto; }
/* the line numbers stand in the right margin, as on OCR's papers */
.xp-line { position: relative; padding-right: 1.1cm; white-space: nowrap; }
.xp-ln { position: absolute; right: 0; top: 0; width: .8cm; text-align: right; font-size: 9pt; }
.xp-cite { text-align: right; font-style: italic; font-size: 10pt; margin: 2px 0 14px; }

.xp-q { display: flex; gap: 8px; margin: 0 0 12px .9cm; break-inside: avoid; page-break-inside: avoid; }
.xp-letter { flex: none; min-width: 1cm; }
.xp-qmain { flex: 1; min-width: 0; }
.xp-qmain p { margin: 0; }
.xp-marks { float: right; margin-left: 12px; font-weight: 700; white-space: nowrap; }
.xp-lines { margin-top: 8px; }
.xp-lines span { display: block; height: 0.9cm; border-bottom: 1px dotted #555; }
.xp-end { text-align: center; font-weight: 700; margin-top: 28px; border-top: 2px solid #000; padding-top: 10px; }

/* ── the mark scheme ── */
.xp-ms { width: 100%; border-collapse: collapse; font-size: 9.5pt; line-height: 1.4; }
.xp-ms th, .xp-ms td { border: 1px solid #000; padding: 6px 7px; vertical-align: top; text-align: left; }
.xp-ms th { background: #eee; font-weight: 700; }
.xp-ms ul { margin: 0; padding-left: 15px; }
.xp-ms li { margin: 0 0 3px; }
.xp-ms p { margin: 0 0 5px; }
.xp-ms-num { white-space: nowrap; font-weight: 700; width: 1.4cm; }
.xp-ms-marks { text-align: center !important; font-weight: 700; width: 1.2cm; }
.xp-ms-guide { width: 4.2cm; font-size: 9pt; }
.xp-ms-sub { font-weight: 700; margin-top: 6px !important; }
.xp-ms-sub:first-child { margin-top: 0 !important; }
.xp-ms-latin { font-size: 9.5pt; }
.xp-ms-app { margin-top: 22px; break-inside: avoid; page-break-inside: avoid; }
.xp-ms-app h3 { font-family: Arial, Helvetica, sans-serif; font-size: 11pt; font-weight: 700; color: #000; letter-spacing: 0; margin: 16px 0 6px; }
.xp-ms-grid { border-collapse: collapse; font-size: 9.5pt; width: 100%; }
.xp-ms-grid th, .xp-ms-grid td { border: 1px solid #000; padding: 5px 7px; text-align: left; vertical-align: top; }
.xp-ms-grid th { background: #eee; }
.xp-ms-grid td:first-child { width: 1.4cm; text-align: center; font-weight: 700; }
.xp-ms-note { font-size: 9pt; margin: 6px 0 0; }
.xp-ms-lead { margin: 0 0 8px; font-style: italic; }
.xp-ms-grid ul, .xp-ms-advice { margin: 0 0 4px; padding-left: 16px; }
.xp-ms-advice { font-size: 9.5pt; }
.xp-ms li i { color: #555; }

@media (max-width: 700px) {
  .xp-sheet { padding: 22px 16px; font-size: 10.5pt; }
  .xp-passage { margin-left: 0; }
  .xp-q { margin-left: 0; }
  .xp-ms { font-size: 9pt; }
  .xp-ms-guide { width: auto; }
}

/* ── print: only the sheets ── */
@media print {
  @page { size: A4; margin: 1.8cm 1.6cm; }
  body { background: #fff !important; }
  .cx-top, .cx-menu, .cx-foot, [data-shell], .phead, .xp-controls, .xp-intro, .skip { display: none !important; }
  .page, .inner { padding: 0 !important; max-width: none !important; }
  .xp-stage { display: block; padding: 0; }
  .xp-sheet { max-width: none; padding: 0; box-shadow: none; border-radius: 0; font-size: 11pt; }
  .xp-passage { overflow: visible; }
  body.xp-print-paper .xp-ms-out { display: none !important; }
  body.xp-print-ms .xp-ms-out { display: block !important; break-before: page; page-break-before: always; }
  .xp-ms th, .xp-ms-grid th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}