/* ============================================================
   The A4 sheet.
   This node is BOTH the on-screen preview and the print target —
   there is no second "printable version", so the preview cannot
   drift from what the printer produces.
   All box geometry is in mm so it survives the trip to paper.
   ============================================================ */

:root {
  /* paper geometry */
  --pg-w: 210mm;
  --pg-h: 297mm;
  --pg-pad: 10mm;
  --pg-inner: 190mm;              /* pg-w - 2*pg-pad */

  /* ink: black only — nothing on the sheet may depend on a
     colour the printer might drop */
  --ink: #000;
  --rule: 0.3mm solid var(--ink);
  --hair: 0.25mm solid var(--ink);

  /* type on paper */
  --sheet-font: 'Cairo', system-ui, sans-serif;
  --t-body: 11pt;
  --t-small: 8.5pt;
  --t-cap: 7.5pt;
  --t-title: 17pt;
  --t-head: 10pt;

  /* party block.
     The ID slot is the real size of an Iraqi البطاقة الوطنية الموحدة —
     ID-1, 85.6 x 54mm — so the printed sheet carries the card at the
     size the court is used to seeing photocopied onto it. At that
     width a 93mm column has no room left beside it, which is why the
     بصمة and توقيع boxes sit UNDER the cards rather than next to them. */
  --id-w: 85.6mm;
  --id-h: 54mm;
  --mark-w: 34mm;                 /* thumbprint */
  --mark-h: 22mm;                 /* real ink size for both boxes */

  /* preview scaling, driven from app.js */
  --sheet-scale: 1;
}

/* ---------- stage: scales the sheet as one unit ---------- */
.stage {
  display: flex;
  justify-content: center;
  padding: var(--sp-4) 0;
}
.sheet {
  width: var(--pg-w);
  height: var(--pg-h);
  /* the sheet is a flex item of .stage, and a flex item shrinks by
     default. Letting it shrink would squash the page to the width of
     a phone while the mm boxes inside kept their real size — the
     preview would stop being the printed page. It scales, never
     shrinks. */
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: var(--pg-pad);
  overflow: hidden;               /* guarantees a single page */
  background: #fff;
  color: var(--ink);
  font-family: var(--sheet-font);
  font-size: var(--t-body);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  transform: scale(var(--sheet-scale));
  transform-origin: top center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .18), 0 8px 24px rgba(15, 23, 42, .10);
}

/* a value the user typed; empty values simply collapse */
.sheet .v { font-weight: 700; }

/* ---------- header band ---------- */
.s-head__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4mm;
}
/* three tracks so the basmala is truly centred on the page while
   NO: stays pinned to the top-left corner, as on the paper */
.s-head__row--top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
}
.s-head__row--top .s-head__no { text-align: left; }
.s-head__basmala { font-size: var(--t-head); }
.s-head__no,
.s-head__date { font-size: var(--t-small); white-space: nowrap; }
.s-head__no { direction: ltr; }
.s-head__spacer { width: 22mm; }
.s-head__salawat { font-size: var(--t-head); }
.s-head__hadith {
  margin: 1mm 0 0;
  font-size: var(--t-head);
}

/* ---------- narrative paragraph ---------- */
.s-para { margin-top: 3mm; }
.s-para__text {
  margin: 0;
  text-align: justify;
  line-height: 1.85;
}
.blank {
  display: inline-block;
  min-width: 26mm;
  border-bottom: var(--hair);
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
}
.s-para__rule {
  margin: 3mm 0 0;
  border-bottom: var(--hair);
  min-height: 7mm;
  line-height: 7mm;
  font-weight: 700;
}

/* ---------- title ---------- */
.s-title {
  margin: 4mm auto 0;
  padding-bottom: 1mm;
  width: fit-content;
  border-bottom: var(--rule);
  font-size: var(--t-title);
  font-weight: 700;
  line-height: 1.2;
}

/* ---------- the two parties ---------- */
.s-parties {
  display: flex;
  gap: 4mm;
  margin-top: 4mm;
}
.s-party { flex: 1 1 0; min-width: 0; }
.s-party__head {
  margin: 0 0 2mm;
  padding-bottom: 0.8mm;
  font-size: var(--t-head);
  font-weight: 700;
  text-align: center;
  border-bottom: var(--rule);
}

/* the ID-card photo slot, at true card size */
.s-id { margin: 0 0 2mm; }
.s-id__box {
  width: var(--id-w);
  height: var(--id-h);
  margin-inline: auto;
  border: var(--hair);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.s-id__box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;            /* never crop a legal document */
}
.s-id__box img:not([src]) { display: none; }
.s-id__cap {
  display: block;
  margin-top: 0.8mm;
  font-size: var(--t-cap);
  text-align: center;
}

/* بصمة / توقيع — print-only ink boxes, sitting under the two cards
   because a true-size card leaves no room beside it.
   They take no input and hold no data: they must come out of the
   printer completely empty so a real thumbprint and a real
   signature fit inside them. Never add a fill, line or icon. */
.s-marks {
  display: flex;
  gap: 4mm;
  margin-top: 1mm;
}
.s-mark--thumb { flex: 0 0 var(--mark-w); }
.s-mark--sign  { flex: 1 1 auto; }       /* a signature needs the width */
.s-mark__label {
  display: block;
  margin-bottom: 0.8mm;
  font-size: var(--t-cap);
  text-align: center;
}
.s-mark__box {
  width: 100%;
  height: var(--mark-h);
  border: var(--hair);
  background: #fff;
}

/* ---------- witnesses ---------- */
.s-witnesses { margin-top: 5mm; }
.s-witnesses__head {
  margin: 0 0 2mm;
  font-size: var(--t-head);
  font-weight: 700;
  text-align: center;
}
.s-witnesses__row {
  display: flex;
  gap: 4mm;
}
.s-wit { flex: 1 1 0; min-width: 0; }
.s-wit__box {
  height: 12mm;
  border: var(--hair);
  padding: 1mm 1.5mm;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: var(--t-small);
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
  overflow-wrap: anywhere;        /* a long name wraps, never overflows */
}
.s-wit__cap {
  display: block;
  margin-top: 0.8mm;
  font-size: var(--t-cap);
  text-align: center;
}

/* ---------- footer ---------- */
.s-foot {
  margin-top: auto;               /* pinned to the bottom of the page */
  padding-top: 4mm;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6mm;
}
.s-foot__officiant {
  flex: 0 0 68mm;
  text-align: center;
}
.s-foot__cap {
  display: block;
  font-size: var(--t-small);
  margin-bottom: 1mm;
}
.s-foot__line {
  display: block;
  border-top: var(--hair);
  padding-top: 1mm;
  min-height: 6mm;
  font-size: var(--t-small);
}
.s-foot__note {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--t-cap);
  line-height: 1.5;
}

/* While html2canvas captures the sheet for the PDF, pin it back to
   1:1 so the export is the page, not the preview at preview size. */
.is-exporting .sheet {
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================================
   PRINT — hide the app, print the very same sheet node.
   ============================================================ */
@page { size: A4; margin: 0; }

@media print {
  html, body {
    margin: 0;
    padding: 0;
    background: #fff;
  }
  /* everything that is not the sheet goes away */
  .topbar, .tabs, .actionbar, .pane--form, .modal, .toast, .lock { display: none !important; }

  .app        { display: block !important; }
  .workspace  { display: block !important; padding: 0 !important; }
  .pane--preview {
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .stage { display: block; padding: 0; }

  .sheet {
    transform: none !important;   /* print at true size, never the preview scale */
    box-shadow: none !important;
    margin: 0;
    width: var(--pg-w);
    height: var(--pg-h);
    break-inside: avoid;
    page-break-after: avoid;
  }

  /* hairlines and photos must survive "no background graphics" */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}