/*
 * sheets.css — the printed surface. Everything inside .ac-sheet.
 * Loaded on all media so the on-screen preview is what prints.
 *
 * Version log
 * 1.0.0  2026-08-05  Initial.
 */

.ac-sheet {
  --ar: 'AC Naskh', 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', 'Geeza Pro', serif;
}

.ac-sheet .ac-ar-run,
.ac-sheet .ac-ar-cell,
.ac-sheet .ac-passage,
.ac-sheet [dir='rtl'] {
  font-family: var(--ar);
}
.ac-sheet .ac-ar-run { font-size: 15pt; line-height: 2; }
.ac-sheet [dir='rtl'] { text-align: right; }

.ac-sheet .ac-empty-ex { font-size: 9.5pt; color: #777; font-style: italic; }

/* ---------- blanks ---------- */
/* A run of underscores behaves unpredictably at a bidi boundary, so every
   blank is a fixed-width bordered span instead. */
.ac-sheet .ac-blank,
.ac-sheet .ac-blank-inline {
  display: inline-block;
  border-bottom: 1pt solid #000;
  height: 1em;
  vertical-align: -0.2em;
  margin: 0 2mm;
}
.ac-sheet .ac-blank-inline { min-width: 16mm; }

.ac-sheet .ac-writeline {
  display: block;
  border-bottom: 0.6pt solid #999;
  height: 8mm;
  margin: 0 0 1mm;
}
.ac-sheet .ac-lines { display: block; margin-top: 2mm; }

/* ---------- numbered lists ---------- */
/* RTL numbering is the browser's job — faking it with manual numbers puts the
   digit on the wrong side. */
.ac-sheet .ac-numbered {
  margin: 0;
  padding-inline-start: 8mm;
  padding-inline-end: 0;
}
.ac-sheet .ac-numbered > li {
  margin-bottom: 3.5mm;
  list-style: decimal;
  page-break-inside: avoid;
  break-inside: avoid;
}
.ac-sheet .ac-numbered[dir='rtl'] > li { list-style-position: outside; }

/* ---------- matching ---------- */

.ac-sheet .ac-match { width: 100%; border-collapse: collapse; }
.ac-sheet .ac-match td { padding: 1.5mm 2mm; vertical-align: middle; }
.ac-sheet .ac-match .ac-num { width: 8mm; font-weight: 700; font-size: 10pt; }
.ac-sheet .ac-match .ac-ar-cell { width: 38%; text-align: right; }
.ac-sheet .ac-match .ac-gap { width: 14mm; }
.ac-sheet .ac-answer-row {
  margin-top: 4mm;
  font-size: 10.5pt;
  letter-spacing: .02em;
}

/* ---------- word search ---------- */

.ac-sheet .ac-wsgrid {
  border-collapse: collapse;
  margin: 0 auto 4mm;
  table-layout: fixed;
}
.ac-sheet .ac-wsgrid td {
  width: 9mm;
  height: 9mm;
  border: 0.4pt solid #bbb;
  text-align: center;
  vertical-align: middle;
  font-family: var(--ar);
  font-size: 13pt;
  line-height: 1;
  padding: 0;
}
.ac-sheet .ac-wsgrid td.is-answer {
  background: #d8eef7;
  font-weight: 700;
}
.ac-sheet .ac-wordbank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2mm 5mm;
  justify-content: center;
  font-family: var(--ar);
  font-size: 13pt;
}
.ac-sheet .ac-wordbank li { border: 0.5pt solid #999; border-radius: 2mm; padding: 0.5mm 3mm; }

/* ---------- unscramble tiles ---------- */

.ac-sheet .ac-tiles { display: inline-flex; gap: 1.5mm; vertical-align: middle; }
.ac-sheet .ac-tile {
  display: inline-block;
  min-width: 8mm;
  text-align: center;
  border: 0.6pt solid #666;
  border-radius: 1.5mm;
  font-family: var(--ar);
  font-size: 13pt;
  line-height: 1.5;
  padding: 0 1mm;
}
.ac-sheet .ac-en-hint { font-size: 9pt; color: #555; }

/* ---------- multiple choice ---------- */

.ac-sheet .ac-opts { display: block; margin-top: 1.5mm; font-size: 10pt; }
.ac-sheet .ac-opt { display: inline-block; min-width: 42mm; margin: 0 4mm 1mm 0; }

/* ---------- tables ---------- */

.ac-sheet .ac-transtable { width: 100%; border-collapse: collapse; }
.ac-sheet .ac-transtable th,
.ac-sheet .ac-transtable td {
  border: 0.5pt solid #666;
  padding: 2mm 3mm;
  height: 9mm;
  font-size: 10.5pt;
}
.ac-sheet .ac-transtable .ac-ar-cell {
  text-align: right;
  font-family: var(--ar);
  font-size: 14pt;
  width: 50%;
}

/* ---------- odd one out ---------- */

.ac-sheet .ac-group { display: inline-flex; gap: 6mm; flex-wrap: wrap; }
.ac-sheet .ac-group-item { font-family: var(--ar); font-size: 14pt; }

/* ---------- passage exercises ---------- */

.ac-sheet .ac-passage {
  font-size: 14pt;
  line-height: 2.4;
  text-align: justify;
  border: 0.5pt solid #ccc;
  border-radius: 2mm;
  padding: 4mm 5mm;
  margin-bottom: 4mm;
}
.ac-sheet .ac-bank {
  border: 0.6pt dashed #666;
  border-radius: 2mm;
  padding: 3mm 4mm;
  font-family: var(--ar);
  font-size: 13pt;
  line-height: 2;
}
.ac-sheet .ac-bank strong { font-size: 11pt; margin-inline-end: 3mm; }
.ac-sheet .ac-bank-word { display: inline-block; margin: 0 3mm; }
.ac-sheet .ac-tf { display: inline-block; margin-inline-start: 6mm; font-size: 10pt; white-space: nowrap; }
.ac-sheet .ac-orderbox {
  display: inline-block;
  width: 8mm;
  height: 8mm;
  border: 0.6pt solid #000;
  vertical-align: middle;
  margin-inline-end: 3mm;
}
.ac-sheet .ac-reorder > li { list-style: none; }

/* ---------- handwriting ---------- */

.ac-sheet .ac-hw-row {
  position: relative;
  margin-bottom: 3mm;
  page-break-inside: avoid;
  break-inside: avoid;
}
.ac-sheet .ac-hw-row svg { display: block; width: 100%; height: auto; }
.ac-hw-guide { stroke: #cfd9de; stroke-width: 0.8; }
.ac-hw-base { stroke: #8fa6b0; stroke-width: 1.1; }
.ac-hw-x { stroke: #dbe4e8; stroke-width: 0.8; stroke-dasharray: 3 3; }
/* Dotted outline letters: SVG text is shaped by the browser, so the joining is
   correct with no glyph-path extraction at all. */
.ac-hw-solid { fill: #9aa7ad; stroke: none; }
.ac-hw-trace {
  fill: none;
  stroke: #9aa7ad;
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
  paint-order: stroke;
}
.ac-hw-label { fill: #55666f; font-size: 9px; font-family: sans-serif; }

/* ---------- flashcards, dominoes, loop cards ---------- */

.ac-sheet .ac-cardgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  height: 267mm;
}
.ac-sheet .ac-card-cut {
  border: 0.5pt dashed #999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4mm;
  overflow: hidden;
}
.ac-sheet .ac-card-cut .ac-card-ar {
  font-family: var(--ar);
  font-size: 26pt;
  line-height: 1.6;
  direction: rtl;
}
.ac-sheet .ac-card-cut .ac-card-en { font-size: 16pt; }
.ac-sheet .ac-card-cut .ac-card-sub { font-size: 9pt; color: #666; margin-top: 2mm; }

.ac-sheet .ac-bingo { width: 100%; border-collapse: collapse; margin-bottom: 4mm; }
.ac-sheet .ac-bingo td {
  border: 0.8pt solid #000;
  text-align: center;
  vertical-align: middle;
  font-family: var(--ar);
  font-size: 15pt;
  height: 22mm;
  padding: 1mm;
}
.ac-sheet .ac-bingo-title { font-size: 11pt; font-weight: 700; margin: 0 0 2mm; }

.ac-sheet .ac-domino {
  display: flex;
  border: 0.8pt solid #000;
  height: 24mm;
  margin-bottom: -0.8pt;
}
.ac-sheet .ac-domino > div {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2mm;
  text-align: center;
}
.ac-sheet .ac-domino > div + div { border-inline-start: 0.8pt dashed #666; }
.ac-sheet .ac-domino .ac-d-ar { font-family: var(--ar); font-size: 16pt; direction: rtl; }

.ac-sheet .ac-loopcard {
  border: 0.8pt solid #000;
  padding: 3mm 4mm;
  margin-bottom: -0.8pt;
  min-height: 20mm;
}
.ac-sheet .ac-loopcard .ac-l-have { font-size: 11pt; }
.ac-sheet .ac-loopcard .ac-l-who { font-size: 11pt; font-weight: 700; margin-top: 1.5mm; }
.ac-sheet .ac-loopcard .ac-ar-run { font-size: 15pt; }

.ac-sheet .ac-tarsia { display: block; width: 100%; height: auto; }
.ac-tarsia text { font-size: 5px; fill: #000; }
.ac-tarsia .ac-t-ar { font-family: 'AC Naskh', 'Noto Naskh Arabic', serif; font-size: 6px; }
.ac-tarsia polygon { fill: none; stroke: #000; stroke-width: 0.5; }

/* ---------- certificates ---------- */

.ac-cert {
  position: relative;
  width: 297mm;
  height: 210mm;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.ac-cert-field {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: pre-wrap;
  max-width: 90%;
  line-height: 1.3;
}
.ac-cert-field.is-arabic { font-family: var(--ar); direction: rtl; }
.ac-cert-field.is-selected { outline: 1px dashed #12688c; }

.ac-cert-logo {
  position: absolute;
  transform: translate(-50%, -50%);
  height: auto;
  max-width: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.ac-logo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.ac-logo-row .ac-check { margin-bottom: 0; }
.ac-logo-thumb {
  flex: none;
  width: 68px;
  height: 68px;
  object-fit: contain;
  border: 1px solid var(--ac-line, #d5e2e8);
  border-radius: 8px;
  background: #fff;
  padding: 5px;
}