/* Tahap 3: tata letak editor (daftar bab, area baca, tombol aksi).
   Tahap 13 menambahkan tampilan edit, bandingkan revisi, dan pratinjau. */
.editor-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .editor-grid { grid-template-columns: 15rem 1fr; align-items: start; } }

.daftar-bab {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.25rem 1rem;
}
.daftar-bab summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.daftar-bab ul { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.daftar-bab li { padding: 0.5rem 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.25rem; }

.baca {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.1rem;
  font-family: var(--font-baca);
  font-size: 1.15rem;
  line-height: 1.8;
}
.baca h2 { margin-bottom: 0.75rem; }
.baca p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 1em; }
.baca h2 + p { margin-top: 0; }
.bab-snapshot { margin-bottom: 1.25rem; }
.bab-snapshot:last-child { margin-bottom: 0; }
.peringatan {
  background: var(--rose);
  color: var(--rose-text);
  border: 1px solid #e3c3b9;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.perlindungan { margin: 0 0 1.25rem; padding: 0.75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.perlindungan p { margin: 0 0 0.5rem; }
.perlindungan p:last-child { margin-bottom: 0; }

.toolbar { display: grid; gap: 0.5rem; grid-template-columns: 1fr 1fr; margin-top: 1rem; }
@media (min-width: 600px) { .toolbar { grid-template-columns: repeat(3, 1fr); } }

/* Tahap 6: riwayat revisi dan perbandingan */
.daftar-riwayat { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.75rem; }
.daftar-riwayat li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; display: grid; gap: 0.25rem; }
.daftar-riwayat .aksi { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.banding p { padding: 0.5rem 0.75rem; border-radius: 6px; border-left: 4px solid transparent; }
.banding-label { display: block; font-family: var(--font-ui, sans-serif); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.15rem; opacity: 0.8; }
.banding-hapus { background: var(--rose); color: var(--rose-text); border-left-color: var(--rose-text); }
.banding-tambah { background: #e4f1e6; color: #1f4d2b; border-left-color: #1f4d2b; }

/* Tahap 7: hapus proyek */
.hapus-proyek { margin-top: 2rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.25rem 1rem 1rem; }
.hapus-proyek summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.hapus-proyek input[type=text] { display: block; width: 100%; margin: 0.5rem 0 0.75rem; min-height: 44px; }

/* Tahap 8: Story Bible */
.field textarea { width: 100%; }
.temuan { margin-bottom: 0.5rem; }
.temuan-perhatian strong { color: var(--rose-text); }

/* Tahap 10: Generate Story */
.pratinjau { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 20rem; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; font-size: 0.85rem; }
.pratinjau-kotak { margin-bottom: 1rem; }
.pratinjau-kotak summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.daftar-status { list-style: none; padding: 0; }
.daftar-status li { padding: 0.4rem 0; border-top: 1px solid var(--border); }
.btn:disabled:not(.btn-pending) { opacity: 0.5; cursor: not-allowed; }

/* Tahap 11: karakter */
.kartu-tokoh { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.kartu-tokoh h3 { margin: 0 0 0.5rem; }
.kartu-tokoh p { margin: 0 0 0.4rem; overflow-wrap: anywhere; }
.kartu-tokoh summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }

/* Tahap 13: edit manual */
#pratinjau-edit { margin-top: 1rem; }
#pratinjau-edit label { display: block; margin: 0.75rem 0 0.25rem; }
#pratinjau-edit input[type=text] { width: 100%; margin-bottom: 0.75rem; }
#edit-isi { width: 100%; }

/* Tahap 14: tampilan buku dan cetak A5 */
.buku-halaman { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.1rem; margin-bottom: 1rem; font-family: var(--font-baca); line-height: 1.7; }
.buku-sampul { text-align: center; padding: 4rem 1rem; }
.buku-penulis { font-size: 1.1rem; margin-top: 1.5rem; }
.buku-isi ol { padding-left: 1.4rem; }
.buku-judul-bab { font-style: italic; margin: 0 0 1rem; }
.buku-bab p { margin: 0 0 0.9em; text-align: justify; overflow-wrap: anywhere; white-space: pre-wrap; }
@page { size: A5; margin: 16mm 14mm; }
@media print {
  .app-header, .tanpa-cetak, #nav, nav { display: none !important; }
  html, body { background: #fff !important; }
  main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .buku-halaman { border: 0; border-radius: 0; background: #fff; padding: 0; margin: 0; color: #000; font-size: 11pt; box-shadow: none; }
  .buku-halaman + .buku-halaman { break-before: page; }
  .buku-sampul { padding: 40mm 0 0; }
  .buku-sampul h1 { font-size: 26pt; }
  .buku-bab h2 { break-after: avoid; }
}