/* ═══════════════════════════════════════════════════════════════════
   OWLMARK EXAM PAPERS & COVER SHEETS
   Studio chrome comes from timetable-studio.css. This is the paperwork:
   an official cover, ruled registers and marks sheets, answer pages and
   an invigilation report — all built to be written on in pen.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --x-page-w:210mm; --x-page-h:297mm;
  --x-banner:#101A2D; --x-accent:#C99A3D; --x-ink:#1B2233; --x-paper:#FFFFFF;
}

#printable{
  background:none;box-shadow:none;border-radius:0;
  display:flex;flex-direction:column;gap:24px;align-items:center;
  width:auto;max-width:none;
}

.x-page{
  position:relative;
  width:var(--x-page-w);height:var(--x-page-h);
  padding:13mm 14mm 12mm;
  background:var(--x-paper);color:var(--x-ink);
  font-family:'Lato','Manrope',sans-serif;font-size:9.6pt;line-height:1.45;
  display:flex;flex-direction:column;
  box-shadow:0 24px 64px rgba(16,26,45,.3),0 0 0 1px rgba(201,154,61,.16);
  overflow:hidden;
}
body.lang-ar .x-page{font-family:'Cairo',sans-serif}
.x-watermark{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56%;opacity:.05;pointer-events:none;filter:grayscale(1);
}
.x-page > *{position:relative;z-index:1}

/* ── Sheet head ─────────────────────────────────────────────────── */
.x-head{
  display:flex;align-items:center;justify-content:space-between;gap:8mm;
  padding-bottom:3mm;margin-bottom:4mm;border-bottom:.7mm solid var(--x-banner);
}
.x-head-side{display:flex;align-items:center;gap:4mm;min-width:0}
.x-logo{height:14mm;width:auto;max-width:32mm;object-fit:contain}
.x-school{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:15pt;line-height:1.1;color:var(--x-banner)}
body.lang-ar .x-school{font-family:'Cairo',sans-serif;font-size:13pt}
.x-auth{font-size:7.6pt;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
body.lang-ar .x-auth{letter-spacing:.02em}
.x-head-label{
  padding:2mm 4mm;border-radius:1.5mm;white-space:nowrap;
  background:var(--x-banner);color:#fff;
  font-size:8.4pt;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
body.lang-ar .x-head-label{letter-spacing:.01em}
.x-alt{opacity:.72;font-weight:700;margin-inline-start:1.5mm}
.x-cont{opacity:.8;font-weight:700}

/* ── Meta strip ─────────────────────────────────────────────────── */
.x-meta{
  display:flex;flex-wrap:wrap;gap:2mm 6mm;
  padding:2.5mm 3mm;margin-bottom:4mm;border-radius:1.5mm;
  background:rgba(0,0,0,.035);border:.25mm solid rgba(0,0,0,.12);
  font-size:8.6pt;
}
.x-meta b{font-weight:800;opacity:.65;font-size:7.8pt;text-transform:uppercase;letter-spacing:.05em}
body.lang-ar .x-meta b{letter-spacing:0;text-transform:none}

/* ── Cover ──────────────────────────────────────────────────────── */
.x-cover-title{text-align:center;margin:2mm 0 5mm}
.x-cover-title h1{
  font-family:'Cormorant Garamond',serif;font-weight:700;font-size:22pt;line-height:1.15;
  color:var(--x-banner);
}
body.lang-ar .x-cover-title h1{font-family:'Cairo',sans-serif;font-size:18pt}
.x-code{
  margin-top:1.5mm;font-size:8.4pt;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--x-accent);
}
body.lang-ar .x-code{letter-spacing:.02em}

.x-candidate{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3mm 5mm;
  padding:4mm;margin-bottom:5mm;border-radius:2mm;
  border:.4mm solid var(--x-banner);
}
.x-candidate.compact{padding:3mm;margin-bottom:4mm}
.x-field{display:flex;flex-direction:column;gap:1.5mm}
.x-field.wide{grid-column:span 3}
.x-candidate .x-field.wide{grid-column:span 3}
.x-field span{font-size:7.8pt;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.65}
body.lang-ar .x-field span{letter-spacing:0;text-transform:none}
.x-field i{display:block;height:7mm;border-bottom:.3mm dotted rgba(0,0,0,.55)}

.x-instructions{margin-bottom:5mm}
.x-instructions h2,.x-notes h2{
  font-size:9pt;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--x-accent);padding-bottom:1.5mm;margin-bottom:2.5mm;
  border-bottom:.3mm solid var(--x-accent);
}
body.lang-ar .x-instructions h2,body.lang-ar .x-notes h2{letter-spacing:0;text-transform:none;font-size:10pt}
.x-instructions ol{margin:0;padding-inline-start:6mm}
.x-instructions li{margin-bottom:1.4mm}

.x-marks-grid{width:100%;border-collapse:collapse;margin-bottom:5mm;table-layout:fixed}
.x-marks-grid th,.x-marks-grid td{
  border:.3mm solid rgba(0,0,0,.45);text-align:center;padding:2mm 1mm;font-size:9pt;
}
.x-marks-grid thead th{background:var(--x-banner);color:#fff;font-weight:800}
.x-marks-grid .x-rowlbl{
  text-align:start;font-weight:800;font-size:8pt;text-transform:uppercase;letter-spacing:.05em;
  background:rgba(0,0,0,.05);width:26mm;
}
body.lang-ar .x-marks-grid .x-rowlbl{letter-spacing:0;text-transform:none}
.x-marks-grid .x-total-col{background:rgba(201,154,61,.16);font-weight:800}
.x-marks-grid .x-awarded td{height:11mm}

/* ── Tables (register and marks) ────────────────────────────────── */
.x-table{width:100%;border-collapse:collapse;table-layout:fixed;flex:1}
.x-table th,.x-table td{border:.3mm solid rgba(0,0,0,.4);padding:1.4mm 2mm;font-size:9pt}
.x-table thead th{
  background:var(--x-banner);color:#fff;font-weight:800;font-size:8.2pt;
  letter-spacing:.05em;text-transform:uppercase;text-align:center;
}
body.lang-ar .x-table thead th{letter-spacing:0;text-transform:none}
.x-table .x-no{width:9mm;text-align:center;font-weight:700}
.x-table .x-seat{width:14mm;text-align:center}
.x-table .x-name{text-align:start}
.x-table .x-tick{width:14mm}
.x-table .x-sigcell{width:42mm}
.x-table tbody tr:nth-child(even) td{background:rgba(0,0,0,.028)}
.x-table tbody td{height:7.4mm}

.x-marks-table .x-qcol{width:11mm;text-align:center}
.x-marks-table .x-total-col{width:14mm;text-align:center;background:rgba(201,154,61,.16)}
.x-marks-table .x-gradecell{width:14mm;text-align:center}
.x-marks-table .x-maxrow td{
  background:rgba(0,0,0,.07);text-align:center;font-weight:800;font-size:8.2pt;height:6mm;
}
.x-marks-table .x-maxrow td.x-name{text-align:end;text-transform:uppercase;letter-spacing:.05em;opacity:.7}
body.lang-ar .x-marks-table .x-maxrow td.x-name{letter-spacing:0;text-transform:none}

/* ── Answer booklet ─────────────────────────────────────────────── */
.x-answer-area{position:relative;flex:1;display:flex;border:.3mm solid rgba(0,0,0,.3);border-radius:1mm;overflow:hidden}
.x-exam-margin{
  width:18mm;flex:0 0 auto;
  border-inline-end:.3mm solid rgba(201,154,61,.8);
  background:repeating-linear-gradient(180deg, transparent 0 15mm, rgba(0,0,0,.06) 15mm 15.3mm);
}
.x-answer-field{flex:1}
.ruling-lined .x-answer-field{
  background-image:repeating-linear-gradient(180deg, transparent 0 8mm, rgba(0,0,0,.35) 8mm 8.25mm);
}
.ruling-grid .x-answer-field{
  background-image:
    repeating-linear-gradient(180deg, transparent 0 5mm, rgba(0,0,0,.22) 5mm 5.2mm),
    repeating-linear-gradient(90deg, transparent 0 5mm, rgba(0,0,0,.22) 5mm 5.2mm);
}
.ruling-blank .x-answer-field{background-image:none}
.ruling-half .x-answer-field{
  background-image:repeating-linear-gradient(180deg, transparent 0 8mm, rgba(0,0,0,.35) 8mm 8.25mm);
  background-size:100% 50%;background-position:0 100%;background-repeat:no-repeat;
}
.x-page-foot{
  padding-top:2.5mm;text-align:center;
  font-size:7.8pt;font-weight:700;opacity:.55;
}

/* ── Invigilation report ────────────────────────────────────────── */
.x-count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm;margin-bottom:5mm}
.x-count{
  padding:3mm;border-radius:2mm;text-align:center;
  border:.4mm solid var(--x-banner);
}
.x-count span{display:block;font-size:7.6pt;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.65}
body.lang-ar .x-count span{letter-spacing:0;text-transform:none}
.x-count b{display:block;margin-top:1.5mm;height:9mm;font-size:15pt;font-weight:800;color:var(--x-banner)}
.x-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm;margin-bottom:5mm}
.x-notes{flex:1}
.x-notes-lines{display:flex;flex-direction:column;gap:6.5mm;padding-top:2mm}
.x-notes-lines i{display:block;border-bottom:.3mm dotted rgba(0,0,0,.45)}

/* ── Signature blocks ───────────────────────────────────────────── */
.x-signs{display:flex;gap:8mm;margin-top:5mm;padding-top:2mm}
.x-sign{flex:1}
.x-sign i{display:block;height:10mm;border-bottom:.3mm solid rgba(0,0,0,.5)}
.x-sign span{
  display:block;margin-top:1.5mm;font-size:7.8pt;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;opacity:.65;
}
body.lang-ar .x-sign span{letter-spacing:0;text-transform:none}

/* ── Empty state ────────────────────────────────────────────────── */
.x-empty{align-items:center;justify-content:center}
.x-empty-body{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--ok-text-soft,#5B647A)}
.x-empty-body img{width:56px;height:56px;opacity:.5}
.x-empty-body strong{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--ok-navy,#101A2D)}

/* ── Panel extras ───────────────────────────────────────────────── */
.sheet-list{display:flex;flex-direction:column;gap:7px}
.sheet-row{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:10px 12px;border-radius:12px;
  border:1.5px solid var(--ok-border,#DDD5C6);background:var(--ok-ivory,#FAF7EF);
  transition:.15s;
}
.sheet-row:hover{border-color:var(--ok-gold,#C99A3D)}
.sheet-row.on{background:rgba(201,154,61,.1);border-color:var(--ok-gold,#C99A3D)}
.sheet-row input{width:16px;height:16px;accent-color:var(--ok-gold,#C99A3D);flex:0 0 auto}
.sr-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sr-text strong{font-size:.82rem;color:var(--ok-navy,#101A2D)}
.sr-text small{font-size:.68rem;color:var(--ok-text-soft,#5B647A)}
.sr-count{
  font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ok-gold,#C99A3D);white-space:nowrap;
}
body.lang-ar .sr-count{letter-spacing:0}

.quick-build{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;margin-bottom:10px}
.q-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:12px 0 8px;padding-top:10px;border-top:1px solid var(--ok-border,#DDD5C6);
  font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ok-slate,#64748B);
}
body.lang-ar .q-head{letter-spacing:0}
.q-list{display:flex;flex-direction:column;gap:5px;max-height:250px;overflow-y:auto}
.q-item{
  display:flex;align-items:center;gap:7px;
  padding:6px 9px;border-radius:10px;
  background:var(--ok-cream,#F2EBDD);border:1px solid var(--ok-border,#DDD5C6);
}
.q-item.plain{gap:9px;font-size:.8rem;font-weight:600}
.q-label{flex:1;padding:6px 9px !important;font-size:.78rem !important}
.q-marks{width:64px;padding:6px 9px !important;font-size:.78rem !important;text-align:center}
.q-num{
  width:22px;height:22px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--ok-navy,#101A2D);color:var(--ok-ivory,#FAF7EF);
  font-size:.62rem;font-weight:800;
}
.q-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.th-mini .thm-rule{height:3px;margin:3px 0}
.th-mini .thm-lines{display:flex;flex-direction:column;gap:2px;padding:2px 4px 4px}
.th-mini .thm-lines i{height:2px;border-radius:1px;background:rgba(16,26,45,.28);display:block}
.th-mini .thm-lines i.short{width:60%}

/* ── Print ──────────────────────────────────────────────────────── */
@media print{
  #printable{gap:0 !important;display:block !important;transform:none !important}
  .x-page{
    box-shadow:none !important;
    width:var(--x-page-w) !important;height:var(--x-page-h) !important;
    break-after:page;page-break-after:always;margin:0 !important;
  }
  .x-page:last-child{break-after:auto;page-break-after:auto}
  .x-empty{display:none !important}
  .x-head-label,.x-table thead th,.x-marks-grid thead th,.x-marks-grid .x-total-col,
  .x-marks-table .x-total-col,.x-marks-table .x-maxrow td,.x-table tbody tr:nth-child(even) td,
  .x-meta,.x-exam-margin,.x-answer-field{
    -webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;
  }
  tr,td,th{page-break-inside:avoid !important;break-inside:avoid !important}
}

/* ═══════════════ GRADE BOUNDARY STRIP ═══════════════
   Printed on the marks sheet, where the paper is actually marked, so
   whoever converts a mark to a grade does it the same way every time. */
.x-gradestrip{
  display:flex;flex-wrap:wrap;align-items:center;gap:2mm;
  margin:2mm 0 1mm;padding:1.6mm 2mm;
  border:.3mm solid var(--x-banner);border-radius:1mm;
  background:rgba(0,0,0,.02);
  font-size:7pt;
}
.x-gradestrip em{
  font-style:normal;font-weight:800;color:var(--x-banner);
  margin-inline-end:1mm;
}
.x-band{
  display:inline-flex;align-items:baseline;gap:1mm;
  padding:.4mm 1.4mm;border-radius:.8mm;
  background:rgba(0,0,0,.045);
  white-space:nowrap;
}
.x-band b{font-size:8pt;font-weight:800;color:var(--x-banner)}

/* The mismatch warning is editor-only, and must read as a problem. */
.x-total-warn{
  margin-top:6px;padding:8px 11px;border-radius:9px;
  background:rgba(201,154,61,.14);
  border:1px solid rgba(201,154,61,.34);
  color:#8A6420;font-weight:700;
}
.x-total-warn[hidden]{display:none !important}

/* ═══════════════ MARK SCHEME SHEET ═══════════════
   Unmistakably the teacher's copy: the banner is the loudest thing on
   the page, and it prints. A scheme that slipped into thirty exam packs
   is a mistake a school remembers. */
.x-scheme-banner{
  margin:0 0 4mm;padding:2mm 3mm;
  border:.5mm solid #8A1E1E;border-radius:1.4mm;
  background:rgba(138,30,30,.06);
  color:#8A1E1E;
  font-size:9pt;font-weight:800;letter-spacing:.05em;
  text-align:center;
}
body.lang-ar .x-scheme-banner{letter-spacing:0}

.x-scheme{display:flex;flex-direction:column;gap:2.6mm}
.x-scheme-row{
  display:grid;grid-template-columns:30mm 1fr;gap:3mm;
  padding-bottom:2.4mm;
  border-bottom:.25mm solid rgba(16,26,45,.14);
  break-inside:avoid;
}
.x-scheme-q b{display:block;font-size:10.5pt}
.x-scheme-q span{font-size:7.5pt;color:#5A6478;font-weight:700}
.x-scheme-key{font-size:9pt;line-height:1.55;white-space:normal}
.x-scheme-rule{
  display:block;height:6mm;
  border-bottom:.25mm solid rgba(16,26,45,.3);
}
.x-scheme-total{
  margin-top:4mm;text-align:end;
  font-size:10pt;font-weight:800;
}

/* The editor's per-question key field spans the full row beneath. */
.q-item{flex-wrap:wrap}
.q-item .q-key{
  flex:1 1 100%;min-height:34px;resize:vertical;
  font-size:.8rem;margin-top:4px;
}
@media print{
  .x-scheme-banner{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ═══════════════ PAPER VERSIONS ═══════════════ */
.x-version-tag{
  display:inline-block;margin:0 0 3mm;
  padding:1.6mm 5mm;
  border:.6mm solid var(--x-accent,#101A2D);border-radius:1.6mm;
  font-size:12pt;font-weight:800;letter-spacing:.14em;
  color:var(--x-accent,#101A2D);
}
body.lang-ar .x-version-tag{letter-spacing:0}
.x-ver{width:11mm;text-align:center;font-weight:800}
.x-vmap{
  margin-top:5mm;padding-top:3mm;
  border-top:.35mm solid rgba(16,26,45,.25);
  break-inside:avoid;
}
.x-vmap-title{font-size:9.5pt;font-weight:800;margin-bottom:1.2mm}
.x-vmap-hint{font-size:7.6pt;color:#5A6478;margin:0 0 2mm;line-height:1.5}
.x-vmap-row{
  display:flex;gap:3mm;align-items:baseline;
  font-size:9pt;line-height:1.7;
}
.x-vmap-row b{flex:0 0 auto;font-weight:800}
.x-vmap-row span{letter-spacing:.02em}
@media print{
  .x-version-tag{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}