/* Lembar cetak A4 hitam-putih. Tampil di layar sebagai pratinjau, dicetak lewat window.print(). */
.pratinjau { background: #E9E2D4; padding: 16px; border-radius: 20px; overflow: auto; }
.lembar {
  width: 210mm; height: 297mm; box-sizing: border-box; overflow: hidden; margin: 0 auto; background: #fff; color: #111;
  padding: 12mm 14mm; display: flex; flex-direction: column; gap: 6mm;
  font-family: var(--font-anak); box-shadow: 0 6px 24px rgba(0,0,0,.15);
  transform-origin: top left;
}
.lembar .lk-kepala { display: flex; align-items: center; gap: 6mm; border-bottom: 2px solid #111; padding-bottom: 4mm; }
.lembar .lk-kepala img { height: 20mm; width: auto; }
.lembar .lk-kepala .lk-judul { flex: 1; }
.lembar .lk-kepala h1 { font-size: 22pt; font-family: var(--font-anak); }
.lembar .lk-kepala .lk-instr { font-size: 13pt; margin-top: 1mm; }
.lembar .lk-nama { display: flex; gap: 8mm; font-size: 13pt; font-family: var(--font-ui); }
.lembar .lk-nama span { flex: 1; border-bottom: 1.5px solid #111; padding-bottom: 1mm; }
.lembar .lk-isi { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4mm; }
.lembar .lk-isi svg { max-width: 100%; }
/* isi menyusut agar kepala + kaki (keterangan orang tua) selalu muat dalam satu A4 */
.lembar .lk-isi > * { min-height: 0; flex-shrink: 1; }
.lembar .lk-isi > svg { flex: 0 1 auto; height: auto; max-height: 100%; }
.lembar .lk-kepala, .lembar .lk-nama, .lembar .lk-kaki, .lembar .lk-isi > p { flex: none; }
.lembar .lk-kaki { border-top: 1.5px dashed #777; padding-top: 3mm; font-family: var(--font-ui); font-size: 9.5pt; display: flex; flex-direction: column; gap: 1.5mm; }
.lembar .lk-kaki .lk-merek { color: #555; font-size: 9pt; display: flex; justify-content: space-between; }
.lembar .obj-cetak { filter: grayscale(1) contrast(1.1); }
.lembar table { border-collapse: collapse; }
.lembar .grid-cetak { display: grid; gap: 5mm; width: 100%; }

/* ---------- cetak massal ----------
   Aturan cetak di bawah dirancang untuk SATU lembar: .lembar ditaruh absolut di
   0,0 dan body dikunci setinggi 297mm. Banyak lembar sekaligus butuh perlakuan
   kebalikannya — mengalir berurutan dengan pemisah halaman.

   Penandanya dipasang di <html>, bukan <body>, supaya tinggi html ikut bisa
   dilepas tanpa memerlukan :has() yang belum ada di peramban lama.

   Di layar, wadahnya disimpan jauh di luar pandangan: ia hanya perlu ada di
   DOM agar bisa dicetak, tidak untuk dilihat. */
#cetak-massal { position: absolute; left: -99999px; top: 0; width: 210mm; }

@page { size: A4 portrait; margin: 0; }
@media print {
  html.cetak-massal, html.cetak-massal body {
    height: auto !important; min-height: 0 !important; overflow: visible !important;
  }
  /* display:none, bukan visibility:hidden — elemen tersembunyi tetap memakan
     ruang, dan itu menyisakan halaman kosong di awal hasil cetak. */
  html.cetak-massal #app { display: none !important; }
  html.cetak-massal #cetak-massal { position: static !important; left: auto !important; }
  html.cetak-massal #cetak-massal .lembar {
    position: static !important; margin: 0 auto; box-shadow: none; transform: none !important;
    break-after: page; page-break-after: always;
  }
  html.cetak-massal #cetak-massal .lembar:last-child {
    break-after: auto; page-break-after: auto;
  }
}
@media print {
  html, body { background: #fff !important; height: 297mm !important; min-height: 0 !important; overflow: hidden !important; }
  body * { visibility: hidden; }
  .lembar, .lembar * { visibility: visible; }
  .lembar { position: absolute; left: 0; top: 0; box-shadow: none; margin: 0; transform: none !important; width: 210mm; height: 297mm; min-height: 0; overflow: hidden; }
  .pratinjau { padding: 0; background: none; }
  .tidak-cetak { display: none !important; }
}