/* Komponen batas jawaban — satu salinan aturan, dua kumpulan token.
 *
 * gaya.css dan beranda.css memakai nama token yang berbeda (--teks/--latar/--aksen
 * lawan --tinta/--kertas/--hijau). Menyalin aturan ini ke kedua berkas berarti dua
 * salinan yang akan menyimpang begitu salah satunya diperbaiki — persis alasan
 * varietas.js dipakai bersama jalur 2 dan 4. Jadi aturannya tinggal di satu berkas,
 * dan pemetaannya dikerjakan rantai fallback var(): yang tidak dikenal lembar gaya
 * tuan rumah jatuh ke nama padanannya.
 *
 * Tema gelap tidak perlu ditulis di sini sama sekali — kedua lembar gaya sudah
 * mendefinisikan ulang tokennya sendiri, dan blok ini ikut karena membacanya. */

.batas-jawaban,
.bj-lembar {
  --bj-teks:  var(--teks,        var(--tinta));
  --bj-lemah: var(--teks-lemah,  var(--lemah));
  --bj-garis: var(--garis);
  --bj-aksen: var(--aksen,       var(--hijau-2));
  --bj-latar: var(--latar-kartu, var(--kertas));
  --bj-awas:  var(--awas,        var(--amber));
  --bj-awas-lemah: var(--awas-lemah, var(--amber-lembut));
  --bj-bahaya: var(--bahaya,     var(--merah));
  --bj-bahaya-lemah: var(--bahaya-lemah, var(--merah-lembut));
}

.batas-jawaban {
  margin: 2.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bj-garis);
  color: var(--bj-lemah);
  font-size: .9rem;
  line-height: 1.55;
}

/* Ringkasan yang selalu terlihat ditempatkan komponen di pucuk <main>. Bentuknya padat:
   status, tingkat, tanggal, dan lubang tetap ada, sedangkan uraian panjang tinggal di
   dialog. Ini peringatan kerja, bukan catatan kaki. */
.batas-jawaban.batas-jawaban-utama {
  margin: 0 0 1rem;
  padding: .75rem .85rem;
  border: 1px solid var(--bj-garis);
  border-left: 4px solid var(--bj-awas);
  border-radius: 10px;
  background: var(--bj-latar);
}
.batas-jawaban-utama .bj-judul { margin-bottom: .45rem; }

/* ------------------------------------------------- ringkasan & lembar (T2)

   Blok batas dulu terbuka penuh di kaki tiap halaman: di principal.html ia 1.789 px
   dari 2.777 px tinggi halaman, dan 367 dari 479 katanya. Isinya tidak dikurangi
   sedikit pun — ia pindah ke lembar. Yang tetap tercetak di layar keempat medan yang
   diwajibkan batas.js: tingkat, sumber, tanggal, dan cacah yang tidak diketahui. */

.bj-cip-baris {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 .5rem;
}

.bj-cip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem .25rem .3rem;
  border: 1px solid var(--bj-garis);
  border-radius: 100px;
  background: var(--bj-latar);
  color: var(--bj-teks);
  font-size: .82rem;
  line-height: 1.3;
}

.bj-ringkas-baris { margin: 0 0 .7rem; font-size: .84rem; }

.bj-buka {
  display: inline-block;
  min-height: 44px;
  padding: .55rem .9rem;
  border: 1px solid var(--bj-garis);
  border-radius: 8px;
  background: var(--bj-latar);
  color: var(--bj-aksen);
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.bj-buka:hover { border-color: var(--bj-aksen); }
.bj-buka:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 2px; }

.bj-lembar {
  width: min(560px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid var(--bj-garis);
  border-radius: 16px;
  background: var(--bj-latar);
  color: var(--bj-lemah);
  font-size: .9rem;
  line-height: 1.55;
}
.bj-lembar::backdrop { background: rgb(9 24 18 / 55%); }
/* `display` hanya saat terbuka — <dialog> memakai display:none untuk menyembunyikan
   dirinya, dan menyetelnya tanpa [open] membuat lembar ini selalu tampil. */
.bj-lembar[open] { display: flex; flex-direction: column; max-height: min(86vh, 760px); }
.bj-lembar-isi { overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.1rem 1.2rem; }

.bj-lembar-kepala {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 1rem 1.1rem .8rem;
  border-bottom: 1px solid var(--bj-garis);
}
.bj-lembar-kepala h2 { margin: 0; font-size: 1rem; color: var(--bj-teks); }
.bj-lembar-kepala button {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--bj-garis);
  border-radius: 8px;
  background: transparent;
  color: var(--bj-teks);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.bj-lembar-kepala button:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 2px; }
.bj-lembar .bj-judul-lubang:first-child,
.bj-lembar .bj-sumber:first-child { margin-top: 0; }

.bj-judul,
.bj-judul-lubang {
  margin: 0 0 .7rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--bj-teks);
}

.bj-judul-lubang { margin-top: 1.4rem; }

/* ------------------------------------------------------------------- sumber */

.bj-sumber { margin: 0; padding: 0; list-style: none; display: grid; gap: .9rem; }

.bj-sumber > li {
  padding: .7rem .8rem;
  border: 1px solid var(--bj-garis);
  border-radius: 8px;
  background: var(--bj-latar);
}

.bj-sumber p { margin: 0; }

.bj-kepala {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  color: var(--bj-teks);
  font-size: .9rem;
}

/* Nama sumber adalah tautan keluar, dan 17 px terlalu kecil untuk diketuk. Padding
   tegaknya membesarkan kotak sentuh tanpa memindahkan garis dasarnya di dalam flex. */
.bj-kepala a { color: inherit; display: inline-block; padding: .7rem 0; }

/* Huruf tingkat bukti. Skalanya sengaja tidak memakai merah: D bukan bahaya, ia
   "belum terverifikasi" — mewarnainya seperti larangan membuat resep yang jujur
   soal dirinya tampak seperti peringatan racun. */
.bj-tingkat {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 5px;
  border: 1px solid currentColor;
  font-size: .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bj-tingkat-a,
.bj-tingkat-b { color: var(--bj-aksen); }
.bj-tingkat-c { color: var(--bj-awas); }
.bj-tingkat-d { color: var(--bj-lemah); }

/* Yang belum ditetapkan bergaris putus — bukan kosong, dan bukan pula huruf yang
   tampak setara dengan A sampai D. */
.bj-tingkat-kosong { color: var(--bj-lemah); border-style: dashed; }

.bj-arti {
  margin-top: .3rem !important;
  font-weight: 600;
  color: var(--bj-teks);
  font-size: .86rem;
}

.bj-keping { font-size: .84rem; }
.bj-keping + .bj-keping { margin-top: .1rem !important; }

.bj-alasan { margin-top: .45rem !important; font-size: .85rem; }

/* -------------------------------------------------------------------- lubang */

.bj-lubang { margin: 0; }

.bj-lubang dt {
  margin-top: .7rem;
  font-weight: 600;
  color: var(--bj-teks);
  font-size: .87rem;
}

.bj-lubang dt:first-child { margin-top: 0; }
.bj-lubang dd { margin: .15rem 0 0; font-size: .85rem; }

/* --------------------------------------------------------------------- cacat */
/* Layar yang melewatkan satu medan wajib gagal terlihat. Diam-diam salah lebih
   buruk daripada jelek — dan blok ini hanya muncul kalau memang ada yang lupa. */

.bj-cacat {
  margin: 0 0 1rem;
  padding: .7rem .8rem;
  border: 1px solid var(--bj-bahaya);
  border-radius: 8px;
  background: var(--bj-bahaya-lemah);
  color: var(--bj-bahaya);
  font-size: .87rem;
}

.bj-cacat ul { margin: .35rem 0 0; padding-left: 1.1rem; }

/* Cakupan: bagian mana dari sumber itu yang benar-benar dibaca layar ini. */
.bj-cakupan { margin-top: .3rem !important; font-size: .85rem; }

/* ------------------------------------------------------------------ sanggahan */
/* B3. Blok ini muncul di keduabelas layar, termasuk beranda — dan beranda memakai
   lembar gaya yang berbeda dari selebihnya. Karena itu ia tinggal di sini bersama
   pemetaan tokennya, bukan di gaya.css tempat formulir usul gambar tinggal: yang
   ditulis di sana tidak akan pernah sampai ke beranda. */

.bj-sanggah {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bj-garis);
}

.bj-sanggah > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .88rem;
  color: var(--bj-aksen);
  padding: .5rem 0;
}

.bj-sanggah > summary:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 2px; }

.bj-sanggah-isi { display: grid; gap: .35rem; margin-top: .5rem; }

/* Kalimat asal: dari registri siapa fakta di layar ini datang, dan karena itu siapa yang
   sebenarnya bisa membetulkannya. Digambar pertama karena ia yang menentukan arti
   ketiga pilihan di bawahnya. */
.bj-asal {
  margin: 0 0 .5rem;
  padding: .6rem .7rem;
  border-radius: 8px;
  background: var(--bj-latar);
  border: 1px solid var(--bj-garis);
  color: var(--bj-teks);
  font-size: .86rem;
}

.bj-osm {
  margin: 0 0 .5rem;
  padding: .6rem .7rem;
  border-left: 3px solid var(--bj-aksen);
  background: var(--bj-latar);
  color: var(--bj-teks);
  font-size: .85rem;
}

.bj-osm a { color: var(--bj-aksen); }

.bj-medan {
  margin: .3rem 0 0;
  padding: .7rem .8rem;
  border: 1px solid var(--bj-garis);
  border-radius: 8px;
  background: var(--bj-latar);
}

.bj-medan legend {
  padding: 0 .3rem;
  font-weight: 600;
  font-size: .87rem;
  color: var(--bj-teks);
}

/* Kotak sentuhnya seluruh baris, bukan lingkaran radionya saja: teks pilihannya panjang,
   dan yang membacanya di ponsel akan mengetuk katanya, bukan titiknya. */
.bj-pilih {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  padding: .62rem .2rem;   /* 44 px tinggi baris — target sentuh, bukan estetika */
  cursor: pointer;
  font-size: .86rem;
  color: var(--bj-teks);
  font-weight: 400;
}

.bj-pilih input { margin-top: .18rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--bj-aksen); }
.bj-pilih:focus-within { outline: 2px solid var(--bj-aksen); outline-offset: 2px; border-radius: 6px; }

/* Akibat pilihan. TIDAK diwarnai merah, dan itu keputusan yang sama dengan huruf tingkat
   bukti: "repositori ini tidak bisa membetulkannya" adalah keterangan jujur, bukan
   bahaya, dan mewarnainya seperti larangan membuat kejujuran tampak seperti kegagalan. */
.bj-akibat {
  margin: .55rem 0 0 !important;
  padding-left: .65rem;
  border-left: 3px solid var(--bj-aksen);
  color: var(--bj-teks);
  font-size: .85rem;
  font-weight: 600;
  min-height: 1.2em;
}

.bj-sanggah-isi > label {
  margin-top: .6rem;
  font-weight: 600;
  font-size: .87rem;
  color: var(--bj-teks);
}

.bj-sanggah-isi input[type="text"],
.bj-sanggah-isi textarea {
  width: 100%;
  padding: .55rem .65rem;
  font: inherit;
  font-size: .88rem;
  color: var(--bj-teks);
  background: var(--bj-latar);
  border: 1px solid var(--bj-garis);
  border-radius: 8px;
}

.bj-sanggah-isi input[type="text"]:focus-visible,
.bj-sanggah-isi textarea:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 1px; }

.bj-catat { margin: .4rem 0 0 !important; font-size: .82rem; color: var(--bj-lemah); }

.bj-catat-tegas {
  margin-top: .8rem !important;
  padding: .6rem .7rem;
  border: 1px solid var(--bj-garis);
  border-radius: 8px;
  background: var(--bj-latar);
}

.bj-catat-tegas strong { color: var(--bj-teks); }

.bj-aksi { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0 !important; }

.bj-aksi button {
  font: inherit;
  font-size: .87rem;
  font-weight: 600;
  padding: .65rem .9rem;
  min-height: 44px;
  color: var(--bj-teks);
  background: var(--bj-latar);
  border: 1px solid var(--bj-aksen);
  border-radius: 8px;
  cursor: pointer;
}

.bj-aksi button:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 2px; }

.bj-kabar { margin: .6rem 0 0 !important; color: var(--bj-teks); font-size: .86rem; min-height: 1.2em; }

.bj-pratinjau {
  margin: .6rem 0 0;
  max-height: 16rem;
  overflow: auto;
  padding: .7rem;
  font-size: .76rem;
  color: var(--bj-teks);
  background: var(--bj-latar);
  border: 1px solid var(--bj-garis);
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------- tinjauan */
/* Keadaan tinjauan bernama (G1). Tidak diberi warna peringatan: "belum ditinjau"
   keterangan jujur tentang umur korpus, bukan cacat — dan mewarnainya merah akan
   membuat kejujuran tampak seperti kegagalan, keputusan yang sama dengan huruf
   tingkat bukti di atasnya. */
.bj-tinjau {
  margin: .9rem 0 0 !important;
  padding: .6rem .7rem;
  border-left: 3px solid var(--bj-garis);
  background: var(--bj-latar);
  color: var(--bj-teks);
  font-size: .85rem;
}

.bj-tinjau a { color: var(--bj-aksen); }

/* ------------------------------------------------------------------ teruskan */
/* Kartu yang bisa diteruskan (A2). Tinggal di berkas ini dan bukan di gaya.css karena
   alasan yang sama dengan blok batas: yang ditulis di gaya.css tidak pernah sampai ke
   beranda, dan kartu teruskan pada akhirnya harus ada di semua layar berjawaban.
   Tokennya diulang di sini karena ia berdiri di luar .batas-jawaban. */

.teruskan {
  --bj-teks:  var(--teks,        var(--tinta));
  --bj-lemah: var(--teks-lemah,  var(--lemah));
  --bj-garis: var(--garis);
  --bj-aksen: var(--aksen,       var(--hijau-2));
  --bj-latar: var(--latar-kartu, var(--kertas));

  margin: 1.2rem 0 0;
  padding: .85rem .9rem;
  border: 1px solid var(--bj-garis);
  border-radius: 10px;
  background: var(--bj-latar);
  color: var(--bj-lemah);
}

.teruskan-ajak {
  margin: 0 0 .1rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--bj-teks);
}

.teruskan-aksi { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0 0 !important; }

.teruskan-aksi button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: .65rem .9rem;
  min-height: 44px;
  color: var(--bj-teks);
  background: transparent;
  border: 1px solid var(--bj-aksen);
  border-radius: 8px;
  cursor: pointer;
}

/* Lambang tidak ikut menyusut saat labelnya membungkus di layar sempit — flex item
   yang boleh mengecil akan menggepengkan gelembungnya jadi oval. */
.ikon-wa { flex: none; }

.teruskan-aksi button:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 2px; }

.teruskan-kabar { margin: .6rem 0 0 !important; font-size: .87rem; color: var(--bj-teks); min-height: 1.2em; }

/* Pratinjau digambar dengan lebar tetap supaya yang mengirim melihat kartunya persis
   seperti yang akan dibaca penerimanya — termasuk bahwa batasnya memang ada di badan
   teks, bukan cuma dijanjikan tautan. */
.teruskan-pratinjau {
  margin: .6rem 0 0;
  max-height: 18rem;
  overflow: auto;
  padding: .7rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--bj-teks);
  background: var(--bj-latar);
  border: 1px dashed var(--bj-garis);
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- harga saya */
/* C4 sisi petani. Tokennya diulang karena kartu ini berdiri di luar .batas-jawaban. */
.kartu-harga-saya {
  --bj-teks:  var(--teks,        var(--tinta));
  --bj-lemah: var(--teks-lemah,  var(--lemah));
  --bj-garis: var(--garis);
  --bj-aksen: var(--aksen,       var(--hijau-2));
  --bj-latar: var(--latar-kartu, var(--kertas));
}

.kartu-harga-saya label { display: block; margin-top: .8rem; font-weight: 600; font-size: .9rem; }

.kartu-harga-saya input {
  width: 100%;
  max-width: 16rem;
  margin-top: .3rem;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--bj-teks);
  background: var(--bj-latar);
  border: 1px solid var(--bj-garis);
  border-radius: 8px;
}

.kartu-harga-saya input:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 1px; }

.aksi-hs { margin: .8rem 0 0 !important; }

.aksi-hs button {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  padding: .65rem 1rem;
  min-height: 44px;
  color: var(--bj-teks);
  background: transparent;
  border: 1px solid var(--bj-aksen);
  border-radius: 8px;
  cursor: pointer;
}

.aksi-hs button:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 2px; }

/* Hasilnya tidak diberi warna hijau atau merah. "Di bawah penetapan" bukan kabar buruk
   yang butuh warna alarm — cakupan hukumnya bisa saja memang tidak menaungi yang membaca,
   dan mewarnainya merah menyimpulkan sesuatu yang datanya tidak menyimpulkan. */
.hs-hasil {
  margin: .9rem 0 0 !important;
  padding: .7rem .8rem;
  border-left: 3px solid var(--bj-aksen);
  background: var(--bj-latar);
  color: var(--bj-teks);
  font-size: .92rem;
  min-height: 1.2em;
}

/* ------------------------------------------------------------- saring lab */
/* Penyaring kemampuan di layar C7. Ia radio, bukan kotak centang: "tanah DAN residu"
   menghasilkan irisan yang hampir selalu kosong, dan daftar kosong yang benar lebih
   membingungkan daripada satu penyaring yang jelas. */
.saring {
  --bj-teks:  var(--teks,        var(--tinta));
  --bj-garis: var(--garis);
  --bj-aksen: var(--aksen,       var(--hijau-2));
  --bj-latar: var(--latar-kartu, var(--kertas));

  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .9rem 0 0;
  padding: .7rem .8rem;
  border: 1px solid var(--bj-garis);
  border-radius: 10px;
}

.saring legend { padding: 0 .3rem; font-weight: 600; font-size: .88rem; color: var(--bj-teks); }

.saring-pilih {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .3rem .6rem;
  border: 1px solid var(--bj-garis);
  border-radius: 999px;
  cursor: pointer;
  font-size: .87rem;
  color: var(--bj-teks);
}

.saring-pilih input { accent-color: var(--bj-aksen); }
.saring-pilih:focus-within { outline: 2px solid var(--bj-aksen); outline-offset: 2px; }
.saring-pilih:has(input:checked) { border-color: var(--bj-aksen); background: var(--bj-latar); }

/* Akreditasi yang sudah lewat masa berlakunya. Ini SATU-SATUNYA tempat di seluruh
   permukaan yang memakai warna peringatan untuk keadaan data, dan sebabnya sempit:
   laboratorium yang akreditasinya lewat bukan laboratorium yang "kurang baik", ia
   laboratorium yang hasil ujinya TIDAK DIAKUI — dan itu tidak terbaca dari namanya.
   Satu dari 17 laboratorium residu berada dalam keadaan itu. */
tr.lewat-masa { opacity: .72; }
tr.lewat-masa td:first-child { border-left: 3px solid var(--awas, var(--amber, #b26a00)); padding-left: .5rem; }

/* --------------------------------------------------------------------- lapor */
/* Pintu serah-terima laporan gejala (G3). Tokennya diulang karena ia berdiri di luar
   .batas-jawaban, sama seperti kartu teruskan. */
.lapor {
  --bj-teks:  var(--teks,        var(--tinta));
  --bj-lemah: var(--teks-lemah,  var(--lemah));
  --bj-garis: var(--garis);
  --bj-aksen: var(--aksen,       var(--hijau-2));
  --bj-latar: var(--latar-kartu, var(--kertas));

  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--bj-garis);
  color: var(--bj-lemah);
}

.lapor > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .92rem;
  color: var(--bj-aksen);
  padding: .5rem 0;
}

.lapor > summary:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 2px; }
.lapor-isi { display: grid; gap: .3rem; margin-top: .5rem; }
.lapor-isi > p { margin: 0 0 .5rem; color: var(--bj-teks); font-size: .9rem; }

.lapor-medan {
  margin: .5rem 0 0;
  padding: .7rem .8rem;
  border: 1px solid var(--bj-garis);
  border-radius: 8px;
  background: var(--bj-latar);
}

.lapor-medan legend { padding: 0 .3rem; font-weight: 600; font-size: .87rem; color: var(--bj-teks); }
.lapor-ciri + .lapor-ciri { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--bj-garis); }
.lapor-tanya { margin: 0 0 .4rem; font-size: .87rem; color: var(--bj-teks); }

/* Pilihan jawaban: SEL BERLEBAR SAMA, bukan pil selebar isinya.
   Sampai 25 Agustus 2026 ini `flex-wrap` dengan pil selebar teksnya masing-masing, dan di
   ponsel 390 px hasilnya selalu compang-camping. Terukur pada wadah 330 px:

     tiga ciri   86 / 129 / 147 px   membungkus 2 + 1, yang ketiga yatim di baris kedua
     empat luas  198 / 239 / 193 / 197 px   empat baris, tiap baris beda lebar

   Yang dibaca mata bukan "tiga pilihan setara" melainkan tiga kotak berlainan ukuran —
   padahal ketiganya jawaban yang sederajat untuk satu pertanyaan. Lebar yang sama
   menyatakan kesederajatan itu; lebar mengikuti panjang teks menyatakan kepentingan yang
   tidak pernah dimaksudkan. */
.lapor-pilih {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .4rem;
}

/* Di lebar ponsel kolomnya dipatok dua, jadi butir ganjil terakhir pasti sendirian di
   barisnya — dilebarkan penuh, bukan dibiarkan menggantung dengan ruang kosong di
   kanannya. Dengan `auto-fit` cacah kolomnya berubah-ubah dan aturan ganjil-genap ini
   tidak lagi benar, jadi ia memang hanya berlaku di sini. */
@media (max-width: 34rem) {
  .lapor-pilih { grid-template-columns: 1fr 1fr; }
  .lapor-pilih > label:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.lapor-pilih label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 44px;
  padding: .35rem .6rem;
  border: 1px solid var(--bj-garis);
  border-radius: 999px;
  cursor: pointer;
  font-size: .85rem;
  line-height: 1.3;
  text-align: center;
  color: var(--bj-teks);
}

.lapor-pilih input { accent-color: var(--bj-aksen); }
.lapor-pilih label:focus-within { outline: 2px solid var(--bj-aksen); outline-offset: 2px; }
.lapor-pilih label:has(input:checked) { border-color: var(--bj-aksen); background: var(--bj-latar); }

.lapor-isi > label { margin-top: .7rem; font-weight: 600; font-size: .87rem; color: var(--bj-teks); }

.lapor-isi textarea,
.lapor-isi input[type="search"] {
  width: 100%;
  padding: .55rem .65rem;
  font: inherit;
  font-size: .88rem;
  color: var(--bj-teks);
  background: var(--bj-latar);
  border: 1px solid var(--bj-garis);
  border-radius: 8px;
}

.lapor-isi textarea:focus-visible,
.lapor-isi input[type="search"]:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 1px; }

.lapor-daftar { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }

.lapor-daftar button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: .87rem;
  min-height: 44px;
  padding: .55rem .7rem;
  color: var(--bj-teks);
  background: var(--bj-latar);
  border: 1px solid var(--bj-garis);
  border-radius: 8px;
  cursor: pointer;
}

.lapor-daftar button:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 2px; }
.lapor-daftar .sub { display: block; font-size: .8rem; color: var(--bj-lemah); margin-top: .15rem; }
.lapor-terpilih { margin: .6rem 0 0 !important; font-size: .88rem; color: var(--bj-teks); }

.lapor-catat { margin: .5rem 0 0 !important; font-size: .83rem; color: var(--bj-lemah); }

.lapor-catat-tegas {
  margin-top: .9rem !important;
  padding: .6rem .7rem;
  border: 1px solid var(--bj-garis);
  border-radius: 8px;
  background: var(--bj-latar);
}

.lapor-catat-tegas strong { color: var(--bj-teks); }
.lapor-aksi { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0 !important; }

.lapor-aksi button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: .65rem .9rem;
  min-height: 44px;
  color: var(--bj-teks);
  background: transparent;
  border: 1px solid var(--bj-aksen);
  border-radius: 8px;
  cursor: pointer;
}

.lapor-aksi button:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 2px; }
.lapor-kabar { margin: .6rem 0 0 !important; font-size: .87rem; color: var(--bj-teks); min-height: 1.2em; }

.lapor-pratinjau {
  margin: .6rem 0 0;
  max-height: 18rem;
  overflow: auto;
  padding: .7rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--bj-teks);
  background: var(--bj-latar);
  border: 1px dashed var(--bj-garis);
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------------- kas */
/* Buku kas (E5). Ia tinggal di sini bersama komponen lintas-layar yang lain karena
   halaman kas memuat batas.css, dan token --bj-* perlu tersedia di luar blok batas. */
.kartu-ringkas, .kartu-catat, .kartu-bawa {
  --bj-teks:  var(--teks,        var(--tinta));
  --bj-lemah: var(--teks-lemah,  var(--lemah));
  --bj-garis: var(--garis);
  --bj-aksen: var(--aksen,       var(--hijau-2));
  --bj-latar: var(--latar-kartu, var(--kertas));
  --bj-awas:  var(--awas,        var(--amber));
}

/* Jawabannya besar dan di atas, dan itu seluruh rancangan halaman ini: yang membuat
   orang menulis catatan kedua adalah melihat hasil catatan pertama. */
.angka-besar {
  margin: .2rem 0 .8rem !important;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--bj-teks);
  font-variant-numeric: tabular-nums;
}

.catat-baris { display: flex; flex-wrap: wrap; gap: .8rem; }
.catat-baris > span { flex: 1 1 9rem; display: block; }

.kartu-catat label { display: block; margin-top: .7rem; font-weight: 600; font-size: .88rem; }
.catat-baris label { margin-top: 0; }

.kartu-catat input,
.kartu-catat select {
  width: 100%;
  margin-top: .25rem;
  padding: .6rem .7rem;
  min-height: 44px;
  font: inherit;
  color: var(--bj-teks);
  background: var(--bj-latar);
  border: 1px solid var(--bj-garis);
  border-radius: 8px;
}

.kartu-catat input:focus-visible,
.kartu-catat select:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 1px; }

.catat-aksi { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0 !important; }

.catat-aksi button {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  padding: .7rem 1rem;
  min-height: 44px;
  color: var(--bj-teks);
  background: transparent;
  border: 1px solid var(--bj-aksen);
  border-radius: 8px;
  cursor: pointer;
}

.catat-aksi button:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 2px; }

/* Satu-satunya tombol di seluruh permukaan yang menghancurkan kerja pemakainya, dan
   satu-satunya yang diberi warna bahaya. Ia juga diletakkan di barisnya sendiri, jauh
   dari tombol bawa keluar, supaya tidak terketuk saat yang dimaksud menyimpan. */
.catat-aksi button.hapus { border-color: var(--bahaya, var(--merah, #b3261e)); }

.catat-kabar { margin: .6rem 0 0 !important; font-size: .88rem; color: var(--bj-teks); min-height: 1.2em; }

.catat-awas {
  margin: 0 0 .3rem !important;
  padding: .7rem .8rem;
  border-left: 3px solid var(--bj-awas);
  background: var(--bj-latar);
  color: var(--bj-teks);
  font-size: .88rem;
}

/* 44 px sekalipun ia tindakan sekunder di dalam baris tabel yang padat. Ia MENGHAPUS,
   dan target sentuh yang meleset pada tombol perusak merugikan dua arah: yang tidak
   sengaja mengetuknya kehilangan catatan, dan yang meleset saat memang ingin menghapus
   mengetuk baris lain. */
.hapus-satu {
  font: inherit;
  font-size: .8rem;
  padding: .4rem .55rem;
  min-height: 44px;
  color: var(--bj-lemah);
  background: transparent;
  border: 1px solid var(--bj-garis);
  border-radius: 6px;
  cursor: pointer;
}

.hapus-satu:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 2px; }

.catat-pratinjau {
  margin: .8rem 0 0;
  max-height: 20rem;
  overflow: auto;
  padding: .7rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--bj-teks);
  background: var(--bj-latar);
  border: 1px dashed var(--bj-garis);
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- musim kas */
.kartu-musim {
  --bj-teks:  var(--teks,        var(--tinta));
  --bj-lemah: var(--teks-lemah,  var(--lemah));
  --bj-garis: var(--garis);
  --bj-aksen: var(--aksen,       var(--hijau-2));
  --bj-latar: var(--latar-kartu, var(--kertas));
}

.kartu-musim label { display: block; margin-top: .6rem; font-weight: 600; font-size: .88rem; }
.kartu-musim .catat-baris label { margin-top: 0; }

.kartu-musim select,
.kartu-musim input {
  width: 100%;
  margin-top: .25rem;
  padding: .6rem .7rem;
  min-height: 44px;
  font: inherit;
  color: var(--bj-teks);
  background: var(--bj-latar);
  border: 1px solid var(--bj-garis);
  border-radius: 8px;
}

.kartu-musim select:focus-visible,
.kartu-musim input:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 1px; }

/* --------------------------------------------- rencana di sebelah realisasinya (D3) */
.kartu.banding {
  --bj-teks:  var(--teks,        var(--tinta));
  --bj-lemah: var(--teks-lemah,  var(--lemah));
  --bj-aksen: var(--aksen,       var(--hijau-2));
  --bj-awas:  var(--awas,        var(--amber));
}

/* Melampaui rencana diberi warna awas, BUKAN merah gagal: melampaui rencana di satu
   kategori kerap berarti rencananya yang meleset, dan sebagian besar musim melampaui
   sesuatu. Yang di luar rencana sama sekali diberi tanda yang berbeda lagi — ia temuan
   tentang daftar rencananya, bukan tentang yang membelanjakannya. */
.kartu.banding td.lewat,
.kartu.banding dd.lewat { color: var(--bj-awas); font-weight: 600; }
.kartu.banding dd.lewat .sub { color: var(--bj-awas); font-weight: 400; }
/* Kartu panen memakai daftar kunci, bukan tabel: isinya pasangan nama–nilai, dan tabel
   empat lajur yang dilipat di sana mengulang nama barisnya dua kali. */
.kartu.banding td.luar-rencana { color: var(--bj-lemah); font-style: italic; }
.kartu.banding tfoot th,
.kartu.banding tfoot td { border-top: 2px solid var(--bj-garis, var(--garis)); font-weight: 700; }

/* Di bawah 560 px empat lajur rupiah tidak muat, dan yang jatuh ke luar layar justru
   "sudah keluar" dan "sisa" — dua lajur yang jadi seluruh alasan kartu ini ada. Jadi
   tabelnya dilipat jadi blok per kategori alih-alih digulir ke samping: yang harus
   ditemukan dengan menggulir sama saja dengan yang tidak ada. */
@media (max-width: 560px) {
  .kartu.banding table,
  .kartu.banding tbody,
  .kartu.banding tfoot,
  .kartu.banding tr,
  .kartu.banding th,
  .kartu.banding td { display: block; width: auto; }
  .kartu.banding thead { display: none; }
  .kartu.banding tr {
    padding: .55rem 0;
    border-bottom: 1px solid var(--bj-garis, var(--garis));
  }
  .kartu.banding tbody tr:last-child { border-bottom: 0; }
  .kartu.banding th[scope="row"] { font-weight: 700; margin-bottom: .2rem; }
  .kartu.banding td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    text-align: right;
    padding: .12rem 0;
    font-size: .92rem;
    border-bottom: 0;   /* garis per sel jadi garis per baris begitu selnya jadi blok */
  }
  /* `.kosong` blok di tempat lain, dan di dalam sel yang jadi flex ia mengambil barisnya
     sendiri — tanda hubung yang melayang di bawah labelnya terbaca seperti nilai yang
     hilang, bukan nilai yang nol. */
  .kartu.banding td .kosong { display: inline; margin: 0; }
  .kartu.banding td::before {
    content: attr(data-l);
    color: var(--bj-lemah);
    font-weight: 400;
    text-align: left;
  }
  .kartu.banding tfoot tr { border-top: 2px solid var(--bj-garis, var(--garis)); border-bottom: 0; }
}

/* Kelas, bukan id: kartunya digambar `musim.js` dan dipasang di dua halaman. */
.atur-musim { margin-top: .9rem; }
/* 44 px, bukan 39: ia satu-satunya jalan ke formulir musim, dan disiplin target sentuh
   di halaman ini tidak boleh berhenti tepat di pintu masuknya. */
.atur-musim > summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--bj-aksen); padding: .7rem 0; min-height: 44px; box-sizing: border-box; }
.atur-musim > summary:focus-visible { outline: 2px solid var(--bj-aksen); outline-offset: 2px; }
.musim-isi { margin-top: .4rem; }

/* Biaya yang berangkat ke buku kas diberi warna aksen — bukan hiasan: ia satu-satunya
   tanda di layar ini bahwa angka itu sampai ke halaman lain. Yang tidak bisa dipastikan
   sampai tidak akan diisi lagi lain kali. */
.sub.biaya { color: var(--bj-aksen, var(--aksen)); font-weight: 600; }

/* Keterangan di bawah angka tidak pernah diberi barisnya sendiri, jadi ia menempel:
   "Rp 1.540.000dari 0,25 ha". Ditemukan di buku kas, lalu muncul lagi di layar rencana,
   lalu ketiga kalinya di kartu panen — jadi aturannya TIDAK diberi skop kartu. Kedelapan
   pemakaian `.sub` di dalam `dd` di seluruh app memaksudkan hal yang sama: keterangan di
   bawah nilainya. Angka yang menempel ke keterangannya terbaca sebagai satu angka yang
   lebih besar. */
.kunci dd .sub {
  display: block;
  margin-top: .1rem;
  font-size: .8rem;
  font-weight: 400;
  color: var(--bj-lemah, var(--teks-lemah, var(--lemah)));
}

/* Kebalikannya di buku kas: catatan yang datang dari layar rencana ditandai supaya tidak
   terbaca seolah ada yang mengetiknya dua kali. */
.sub.asal { font-style: italic; }

/* Formulir realisasi memakai .catat-baris untuk medan biaya, dan di dalam formulir itu
   labelnya sudah rapat. */
.form-realisasi .catat-baris { margin-top: .5rem; }
.form-realisasi .catat-baris label { display: block; font-weight: 600; font-size: .82rem; }
.form-realisasi .catat-baris input,
.form-realisasi .catat-baris select {
  width: 100%;
  margin-top: .25rem;
  padding: .5rem .6rem;
  min-height: 44px;
  font: inherit;
  font-size: .88rem;
  color: var(--bj-teks, var(--teks, var(--tinta)));
  background: var(--bj-latar, var(--latar-kartu, var(--kertas)));
  border: 1px solid var(--bj-garis, var(--garis));
  border-radius: 8px;
}

/* ------------------------------------------------------------------ jadwal */
/* Rencana musim (E1). Kolom "kapan" sengaja selebar tanggal, dan yang tidak bertanggal
   memakai kolom yang SAMA — "menunggu fase" berdiri di tempat tanggal seharusnya berada,
   bukan di catatan kaki. Daftar yang menyembunyikan ketiadaan tanggal di bawah tetap
   terbaca sebagai kalender. */
.jadwal {
  --bj-teks:  var(--teks,        var(--tinta));
  --bj-lemah: var(--teks-lemah,  var(--lemah));
  --bj-garis: var(--garis);
  --bj-aksen: var(--aksen,       var(--hijau-2));

  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}

.jadwal li {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .8rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--bj-garis);
}

.jadwal li:last-child { border-bottom: 0; padding-bottom: 0; }

.jadwal .kapan {
  flex: 0 0 9.5rem;
  font-size: .87rem;
  font-weight: 600;
  color: var(--bj-lemah);
  font-variant-numeric: tabular-nums;
}

/* Yang bertanggal diberi warna aksen; yang tidak, tidak. Bedanya harus terlihat sebelum
   dibaca, karena itu satu-satunya perbedaan yang menentukan apakah baris ini bisa
   dimasukkan ke kalender orang. */
.jadwal .kapan.tgl { color: var(--bj-aksen); }
.jadwal .apa { flex: 1 1 12rem; color: var(--bj-teks); font-size: .92rem; }
.jadwal .apa .sub { display: block; font-size: .82rem; color: var(--bj-lemah); margin-top: .15rem; }

/* ------------------------------------------------------------ realisasi E2 */
.aksi-langkah { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }

.aksi-langkah button,
.sudah button {
  font: inherit;
  font-size: .82rem;
  padding: .4rem .65rem;
  min-height: 44px;
  color: var(--bj-teks, var(--teks, var(--tinta)));
  background: transparent;
  border: 1px solid var(--bj-garis, var(--garis));
  border-radius: 8px;
  cursor: pointer;
}

.aksi-langkah button:focus-visible,
.sudah button:focus-visible { outline: 2px solid var(--bj-aksen, var(--aksen)); outline-offset: 2px; }

/* Yang sudah dikerjakan diberi garis aksen; yang dilewati diberi garis netral, BUKAN
   merah. Melewati langkah dengan alasan bukan kegagalan — sebagian alasan justru
   menunjukkan protokolnya yang salah, dan mewarnainya merah menyalahkan yang mencatat. */
.sudah {
  display: block;
  margin-top: .45rem;
  padding: .45rem .6rem;
  border-left: 3px solid var(--bj-aksen, var(--aksen));
  background: var(--bj-latar, var(--latar-kartu, var(--kertas)));
  font-size: .85rem;
  color: var(--bj-teks, var(--teks, var(--tinta)));
}

.sudah.dilewati { border-left-color: var(--bj-garis, var(--garis)); }
.sudah .sub { display: block; font-size: .8rem; color: var(--bj-lemah, var(--teks-lemah, var(--lemah))); margin-top: .1rem; }
.sudah button { margin-top: .4rem; }

.form-realisasi {
  display: grid;
  gap: .4rem;
  margin-top: .5rem;
  padding: .6rem .7rem;
  border: 1px solid var(--bj-garis, var(--garis));
  border-radius: 8px;
  background: var(--bj-latar, var(--latar-kartu, var(--kertas)));
}

.form-realisasi label { font-size: .84rem; font-weight: 600; color: var(--bj-teks, var(--teks, var(--tinta))); }

.form-realisasi input,
.form-realisasi select {
  display: block;
  width: 100%;
  margin-top: .2rem;
  padding: .5rem .6rem;
  min-height: 44px;
  font: inherit;
  font-size: .87rem;
  color: var(--bj-teks, var(--teks, var(--tinta)));
  background: var(--bj-latar, var(--latar-kartu, var(--kertas)));
  border: 1px solid var(--bj-garis, var(--garis));
  border-radius: 8px;
}

.form-realisasi input:focus-visible,
.form-realisasi select:focus-visible { outline: 2px solid var(--bj-aksen, var(--aksen)); outline-offset: 1px; }

/* Sebab kenapa alasan diminta ditulis di sebelah medannya, bukan disembunyikan. Yang
   diminta memilih alasan berhak tahu apa yang membuatnya diminta. */
.alasan-sebab {
  margin: .1rem 0 0 !important;
  font-size: .82rem;
  color: var(--bj-lemah, var(--teks-lemah, var(--lemah)));
}

/* Gaya B2 keselamatan pindah ke gaya.css: halaman terbitan statis hanya memuat gaya.css,
   dan kartu darurat harus ikut ke sana. Menyalinnya ke dua berkas akan mengulang persis
   tabrakan .bilah yang sudah pernah mematikan satu visual — jadi ia tinggal di satu tempat. */