/* ---------------------------------------------------------------
   Acknowledgement slip — screen and print.

   The same stylesheet drives both, so what the applicant sees on
   screen is what comes out of the printer (and out of the browser's
   "Save as PDF"). Sizes are in mm for print predictability.
   --------------------------------------------------------------- */

.ack-body { background: #e9edf2; }

.ack-actions {
  position: sticky; top: 0; z-index: 5;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.ack-actions .wrap { display: flex; gap: 10px; flex-wrap: wrap; }

.sheet {
  max-width: 210mm;
  margin: 22px auto 60px;
  padding: 16mm 15mm;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  position: relative;
}

.sheet-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding-bottom: 12px; border-bottom: 2.5px solid var(--brand);
}
.sheet-head h1 { margin: 0; font-size: 19px; color: var(--brand); letter-spacing: .2px; }
.sheet-head p  { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.sheet-when    { font-size: 11px; color: var(--ink-soft); text-align: right; line-height: 1.45; }

/* The token is the whole point of the receipt, so it gets the space. */
.tokenbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin: 14px 0 20px; padding: 13px 16px;
  background: var(--ok-bg); border: 1px solid #9ed3ba; border-radius: 7px;
}
.tokenbar span {
  display: block; font-size: 9.5px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: #4a6a5c;
}
.tokenbar strong { font-size: 16px; color: var(--brand); }
.tokenbar .token {
  font-size: 25px; letter-spacing: 1.5px; color: var(--ok);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tokenbar .right { text-align: right; }

.sheet-photo {
  position: absolute; top: 74mm; right: 15mm;
  width: 30mm; height: 37mm; object-fit: cover;
  border: 1px solid var(--line); background: #eef1f5;
}

.ack-sec { margin-bottom: 16px; }
.ack-sec h2 {
  margin: 0 0 7px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .7px; text-transform: uppercase; color: var(--brand);
  border-bottom: 1px solid #cfd8e2; padding-bottom: 4px;
}
.ack-sec dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.ack-sec dl > div {
  display: grid; grid-template-columns: 42% 58%; gap: 6px;
  padding: 3.5px 0; border-bottom: 1px dotted #e3e8ee;
}
.ack-sec dt { margin: 0; font-size: 11px; color: var(--ink-soft); }
.ack-sec dd { margin: 0; font-size: 11.5px; font-weight: 600; word-break: break-word; }

/* Sections whose values are long read better in one column. */
.ack-sec:nth-of-type(4) dl,
.ack-sec:nth-of-type(6) dl { grid-template-columns: 1fr; }
.ack-sec:nth-of-type(4) dl > div,
.ack-sec:nth-of-type(6) dl > div { grid-template-columns: 22% 78%; }

.decl-text { font-size: 10.5px; line-height: 1.6; color: #3c4652; margin: 0 0 26px; }
.signs { display: flex; justify-content: space-between; gap: 30px; }
.signs > div { font-size: 10px; color: var(--ink-soft); flex: 1; }
.signs span {
  display: block; border-top: 1px solid #7d8896;
  margin-bottom: 5px; max-width: 62mm;
}
.signs > div:last-child { text-align: right; }
.signs > div:last-child span { margin-left: auto; }

.foot {
  margin-top: 20px; padding-top: 9px; border-top: 1px solid #e3e8ee;
  font-size: 9.5px; font-style: italic; color: var(--ink-soft); text-align: center;
}

/* ---------------- Print / Save-as-PDF ---------------- */
@media print {
  @page { size: A4; margin: 12mm; }

  html, body { background: #fff !important; }
  .no-print, .ack-actions, .topbar { display: none !important; }

  .sheet {
    max-width: none; margin: 0; padding: 0;
    border: 0; box-shadow: none;
  }
  .sheet-photo { top: 62mm; right: 0; }

  /* Never split a section across a page break mid-way. */
  .ack-sec { break-inside: avoid; page-break-inside: avoid; }
  .signs   { break-inside: avoid; page-break-inside: avoid; }

  /* Keep the coloured token bar in print — greyscale printers still
     show the border, and it is the field people look for first. */
  .tokenbar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  a[href]::after { content: none !important; }
}

@media (max-width: 640px) {
  .sheet { padding: 20px 16px; margin: 12px 8px 40px; }
  .ack-sec dl { grid-template-columns: 1fr; }
  .sheet-photo { position: static; display: block; margin: 0 0 14px; }
  .tokenbar { flex-direction: column; align-items: flex-start; }
  .tokenbar .right { text-align: left; }
}