/* mojtama.worksheet/1 — print-first A4 design. The page chrome is grayscale-safe: nothing in it
   depends on colour alone (images come from the bank and are not covered by that). */

@font-face { font-family: 'Plex Arabic'; font-weight: 400; src: url('../assets/fonts/IBMPlexSansArabic-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Plex Arabic'; font-weight: 600; src: url('../assets/fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Plex Arabic'; font-weight: 700; src: url('../assets/fonts/IBMPlexSansArabic-Bold.ttf') format('truetype'); }

:root {
  --ink: #221a16;
  --muted: #6b5f59;
  --line: #cfc6b8;
  --line-soft: #e6dfd3;
  --accent: #a6432c;        /* Mojtama terracotta — prints as a mid-dark grey */
  --accent-wash: #f7e7df;
  --ok: #1e8e5a;
  --bad: #c43d3d;
  --paper: #ffffff;
  --desk: #ece5d4;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--desk);
  color: var(--ink);
  font-family: 'Plex Arabic', 'Segoe UI', Tahoma, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@page { size: A4; margin: 0; }

/* ---------- page frame ---------- */
.page {
  width: 210mm;
  height: 297mm;
  /* A fixed A4 sheet must never be font-boosted: iPhone WebKit text autosizing inflated it while render.js
     measured it, so the answer key paginated differently from iPad, Android and the server. Scoped to the
     sheet so the on-screen solve view keeps normal mobile text sizing. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  margin: 8mm auto;
  padding: 11mm 12.5mm 8mm;
  background: var(--paper);
  box-shadow: 0 1mm 4mm rgba(58, 36, 28, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3.2mm;
  padding-top: 3.6mm;
}

@media print {
  body { background: none; }
  .page { margin: 0; box-shadow: none; break-after: page; }
  .page:last-child { break-after: auto; }
}

/* iOS WebKit prints at int(document width) = int(793.7px) = 793px and floor(793 × 297/210) = 1121px per
   page, 1.5px shorter than a 297mm .page, so every page spilled onto a blank one. A 795px-wide body gives
   1124px pages that hold it (content scales 0.16% smaller). Only iOS WebKit matches this query, so Chrome
   (server printer) and Android WebView are untouched. Proven on iOS 17.5, 26.4 and 26.6.2 (iPad 10). */
@supports (-webkit-touch-callout: none) {
  @media print {
    body { width: 795px; }
    .page { margin-left: auto; margin-right: auto; }
  }
}

/* ---------- first-page header ---------- */
.head-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 5mm;
  padding-bottom: 3mm;
  border-bottom: 0.7mm solid var(--accent);
}
.school { display: flex; flex-direction: column; align-items: center; gap: 0.6mm; min-width: 0; }
.school:empty { display: none; }
.school-logo { height: 15mm; width: auto; display: block; }
.school-line { margin: 0; font-size: 8.5pt; font-weight: 600; line-height: 1.35; }
.title-block { min-width: 0; }
.eyebrow { margin: 0 0 0.6mm; font-size: 9.5pt; font-weight: 600; color: var(--accent); }
.title { margin: 0; font-size: 17pt; font-weight: 700; line-height: 1.35; }
.context { margin: 0.8mm 0 0; font-size: 9pt; color: var(--muted); line-height: 1.45; }
.key-ribbon {
  align-self: start;
  padding: 1.4mm 3.2mm;
  border-radius: 1.6mm;
  background: var(--accent);
  color: #fff;
  font-size: 10pt;
  font-weight: 700;
  white-space: nowrap;
}

.fields {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1.35fr auto;
  gap: 2.4mm;
  margin-top: 3mm;
}
.field {
  display: flex;
  align-items: flex-end;
  gap: 1.6mm;
  min-width: 0;
  padding: 2mm 2.6mm;
  border: 0.3mm solid var(--line);
  border-radius: 2mm;
  font-size: 9.5pt;
}
.field-label { font-weight: 600; white-space: nowrap; }
.field-line { flex: 1 1 auto; min-width: 6mm; border-bottom: 0.3mm dotted var(--muted); height: 4mm; }
.date-parts { display: inline-flex; align-items: flex-end; gap: 1mm; font-size: 9pt; }
.date-blank { width: 6.5mm; height: 4mm; border-bottom: 0.3mm dotted var(--muted); }
.date-sep { color: var(--muted); }
.date-year { font-weight: 600; }
.field-score { align-items: center; }
.score-box { display: inline-flex; align-items: center; gap: 1.2mm; font-weight: 700; }
.score-blank { width: 10mm; height: 7mm; border: 0.35mm solid var(--ink); border-radius: 1.4mm; }
.score-total { font-size: 10.5pt; }

/* ---------- running header (pages ٢+) ---------- */
.sheet-head.is-running {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4mm;
  padding-bottom: 1.8mm;
  border-bottom: 0.4mm solid var(--accent);
  font-size: 9.5pt;
}
.running-title { font-weight: 700; }
.running-meta { color: var(--muted); }

/* ---------- section bar ---------- */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 3mm;
  padding: 1.8mm 3mm;
  border-inline-start: 1.4mm solid var(--accent);
  border-radius: 1mm;
  background: var(--accent-wash);
}
.section-title { font-size: 11.5pt; font-weight: 700; }
.section-note { font-size: 9pt; color: var(--muted); }

/* ---------- question cards ---------- */
.q-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2mm; align-items: stretch; }
.q-row.is-wide { grid-template-columns: 1fr; }
.q {
  display: flex;
  flex-direction: column;
  gap: 2mm;
  padding: 2.8mm 3.2mm 2.4mm;
  border: 0.3mm solid var(--line);
  border-radius: 2.4mm;
  break-inside: avoid;
}
.q-head { display: flex; align-items: flex-start; gap: 2.2mm; }
.q-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 6.6mm;
  height: 6.6mm;
  margin-top: 0.3mm;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10pt;
  font-weight: 700;
  line-height: 1;
}
.q-prompt { flex: 1 1 auto; font-size: 11.3pt; font-weight: 600; line-height: 1.6; min-width: 0; }
.q-options {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 8.8mm;
  display: grid;
  gap: 0.9mm;
}
.q-options.is-grid { grid-template-columns: 1fr 1fr; column-gap: 3mm; }
.opt-hit {
  display: flex;
  align-items: center;
  gap: 1.8mm;
  width: 100%;
  padding: 0.6mm 1mm;
  border: 0;
  border-radius: 1.4mm;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 10.8pt;
  line-height: 1.5;
  text-align: start;
}
.bubble {
  flex: none;
  width: 4.1mm;
  height: 4.1mm;
  border: 0.35mm solid var(--ink);
  border-radius: 50%;
}
.letter { flex: none; min-width: 3.6mm; font-weight: 700; }
.opt-text { flex: 1 1 auto; min-width: 0; }
.q-source { margin: 0; font-size: 8pt; color: var(--muted); text-align: end; }

/* the teacher's key */
.opt.is-answer .bubble { background: var(--accent); border-color: var(--accent); }
.opt.is-answer .opt-text { font-weight: 700; text-decoration: underline; text-underline-offset: 0.9mm; }

/* ---------- content blocks ---------- */
.neg { font-weight: 700; text-decoration: underline; text-underline-offset: 0.8mm; }
.m-bold { font-weight: 700; }
.m-italic { font-style: italic; }
.m-underline { text-decoration: underline; }
.m-strike { text-decoration: line-through; }
.m-highlight { background: #fff1a8; }
.b-image { display: block; }
.b-image img { display: block; max-width: 100%; max-height: 42mm; margin: 1mm auto; }
.b-image-missing { color: var(--bad); font-size: 9pt; }
math { font-size: 1.2em; }
.is-clipped { outline: 0.6mm dashed var(--bad); }

/* ---------- answer table (key) ---------- */
.key-table { border: 0.3mm solid var(--line); border-radius: 2.4mm; padding: 2.6mm 3.2mm 3.2mm; }
.key-title { margin: 0 0 2mm; font-size: 11pt; font-weight: 700; }
.key-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6mm; }
.key-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2mm 2.4mm;
  border: 0.3mm solid var(--line-soft);
  border-radius: 1.4mm;
  font-size: 10pt;
}
.key-num { color: var(--muted); }
.key-letter { font-weight: 700; color: var(--accent); font-size: 11.5pt; }

/* ---------- footer ---------- */
.sheet-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4mm;
  margin-top: 2mm;
  padding-top: 1.6mm;
  border-top: 0.25mm solid var(--line);
  font-size: 8.5pt;
  color: var(--muted);
}
.foot-credit { font-size: 7.5pt; }

/* ---------- solve (hosted, on screen) ---------- */
.solve {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.solve-head { padding-bottom: 0.75rem; border-bottom: 3px solid var(--accent); }
.solve .title { font-size: 1.45rem; }
.solve .q { background: var(--paper); border-radius: 14px; padding: 1rem; gap: 0.75rem; }
.solve .q-prompt { font-size: 1.1rem; }
.solve .q-options { padding-inline-start: 0; gap: 0.4rem; }
.solve .q-options.is-grid { grid-template-columns: 1fr 1fr; }
.solve .opt-hit {
  min-height: 48px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 1.05rem;
  cursor: pointer;
}
.solve .bubble { width: 1.1rem; height: 1.1rem; border-width: 2px; }
.solve .opt.is-chosen .opt-hit { border-color: var(--ink); }
.solve .opt.is-chosen .bubble { background: var(--ink); }
.solve.is-checked .opt.is-answer .opt-hit { border-color: var(--ok); background: #e4f3ea; }
.solve.is-checked .opt.is-answer .bubble { background: var(--ok); border-color: var(--ok); }
.solve.is-checked .opt.is-wrong .opt-hit { border-color: var(--bad); background: #fbe9e9; }
.solve.is-checked .opt.is-answer .opt-text,
.solve.is-checked .opt.is-wrong .opt-text { font-weight: 700; text-decoration: none; }
.solve-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  background: var(--desk);
}
.solve-check {
  min-height: 48px;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.solve-result { margin: 0; font-weight: 700; }
/* print wording («ظلّل الدائرة») does not apply on a screen */
.solve .section-note { display: none; }
@media (max-width: 520px) {
  .solve .q-options.is-grid { grid-template-columns: 1fr; }
}