/* Permukaan baca-saja di luar beranda.
   Dirancang untuk HP entry-level bersinyal buruk: tanpa font luar, tanpa gambar,
   tanpa kerangka kerja.

   PALETNYA SATU, DIPEGANG BERSAMA beranda.css. Sampai 23 Agustus 2026 berkas ini
   punya paletnya sendiri — netral kelabu-hangat — dan beranda.css punya paletnya
   sendiri yang bias hijau. Keduanya cuma berbagi dua nama token dari tiga puluh
   empat, jadi tiap komponen harus dibangun dua kali atau (yang terjadi) cuma di
   salah satu. Nilai di bawah ini disalin apa adanya dari beranda.css; kalau salah
   satu berubah, keduanya wajib berubah bersama.

   NAMA LAMA DIPERTAHANKAN SEBAGAI ALIAS di bagian bawah blok :root. Alias itu
   lapis pindahan, bukan lapis tetap: seluruh komponen di berkas ini masih menyebut
   --aksen, --teks, --latar-kartu, dan seterusnya. Mengganti 155 penyebutan itu
   sekaligus akan bertabrakan dengan pekerjaan yang sedang berjalan di berkas yang
   sama, jadi penggantiannya dikerjakan belakangan dan aliasnya dihapus saat itu.
   Alias cukup ditulis sekali di sini: nilainya `var(--token)` diselesaikan saat
   dipakai, jadi ia ikut berubah sendiri di tema gelap.

   Tema terang, gelap, dan "ikut sistem" tergarap ketiganya — bukan dua dari tiga. */

:root {
  color-scheme: light;

  --tinta: #123126;
  --lemah: #5f6e66;
  --pudar: #87948d;

  --kertas: #fffef8;
  --kanvas: #f5f6ee;
  --permukaan: #e9eee5;
  --garis: #cfdbd2;

  --hijau: #00442f;
  --hijau-2: #00745d;
  --hijau-lembut: #e7f1e9;
  --hijau-sorot: #006149;
  --limau: #79d20a;
  --limau-lembut: #edf8d9;
  --tosca: #087a73;
  --jingga: #ec6a2c;
  --amber: #976000;
  --amber-lembut: #fff1d2;
  --merah: #993d36;
  --merah-lembut: #fae8e5;

  --di-aksen: #ffffff;
  --isian: #ffffff;
  --bayang: 0 18px 48px rgb(0 68 47 / 10%);
  --sudut: 16px;

  --lebar: 44rem;

  /* Alias pindahan — lihat catatan kepala. Dihapus setelah penyebutannya diganti. */
  --latar: var(--kanvas);
  --latar-kartu: var(--kertas);
  --teks: var(--tinta);
  --teks-lemah: var(--lemah);
  --aksen: var(--hijau-2);
  --aksen-lemah: var(--hijau-lembut);
  --awas: var(--amber);
  --awas-lemah: var(--amber-lembut);
  --bahaya: var(--merah);
  --bahaya-lemah: var(--merah-lembut);
}

/* Gelap ditulis dua kali dengan sengaja: sekali untuk yang belum memilih apa pun
   (ikut sistem), sekali untuk yang memilih gelap secara eksplisit. Menaruhnya hanya
   di media query membuat tombol tema tidak bisa melawan sistem.

   Yang didefinisikan ulang cuma palet dasarnya; aliasnya tidak perlu ikut ditulis
   karena ia menunjuk token, bukan menyalin nilainya. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) { color-scheme: dark; }
  :root:not([data-tema="terang"]) {
    --tinta: #edf5ef;
    --lemah: #b4c2b9;
    --pudar: #899a90;
    --kertas: #17261f;
    --kanvas: #0d1712;
    --permukaan: #203229;
    --garis: #385044;
    --hijau: #91e0c2;
    --hijau-2: #54c7a6;
    --hijau-lembut: #1d382c;
    --hijau-sorot: #b4f0d7;
    --limau: #8ddd24;
    --limau-lembut: #293b1b;
    --tosca: #67d0c8;
    --jingga: #ff9a64;
    --amber: #f4c45e;
    --amber-lembut: #3c3018;
    --merah: #ffaaa3;
    --merah-lembut: #452724;
    --di-aksen: #0d1712;
    --isian: #101e17;
    --bayang: 0 18px 48px rgb(0 0 0 / 30%);
  }
}

:root[data-tema="gelap"] { color-scheme: dark; }
:root[data-tema="gelap"] {
  --tinta: #edf5ef;
  --lemah: #b4c2b9;
  --pudar: #899a90;
  --kertas: #17261f;
  --kanvas: #0d1712;
  --permukaan: #203229;
  --garis: #385044;
  --hijau: #91e0c2;
  --hijau-2: #54c7a6;
  --hijau-lembut: #1d382c;
  --hijau-sorot: #b4f0d7;
  --limau: #8ddd24;
  --limau-lembut: #293b1b;
  --tosca: #67d0c8;
  --jingga: #ff9a64;
  --amber: #f4c45e;
  --amber-lembut: #3c3018;
  --merah: #ffaaa3;
  --merah-lembut: #452724;
  --di-aksen: #0d1712;
  --isian: #101e17;
  --bayang: 0 18px 48px rgb(0 0 0 / 30%);
}

* { box-sizing: border-box; }

/* Wadah yang difokuskan PROGRAM, bukan oleh jempol atau Tab.
   Sepuluh layar rincian di delapan halaman memakai `tabindex="-1"` lalu `.focus()` supaya
   pembaca layar mengumumkan layar barunya — itu satu-satunya gunanya, dan wadahnya tidak
   pernah bisa dicapai dengan Tab. Chromium tidak melukis cincin fokus untuk fokus yang
   datang dari skrip; Safari melukisnya, dan hasilnya garis biru setinggi seluruh kartu di
   tepi kiri tiap layar rincian.

   Menghapusnya di sini TIDAK menghilangkan penanda fokus dari apa pun yang benar-benar
   bisa difokuskan orang: pemilihnya menuntut `tabindex="-1"`, dan seluruh tombol, tautan,
   serta isian tetap memakai :focus-visible masing-masing. */
[tabindex="-1"]:focus { outline: none; }

/* ------------------------------------------------------------------ cangkang
   Disuntik cangkang.js; alasannya lengkap di kepala berkas itu. Aturannya di sini
   karena gaya.css lembar gaya keempat belas halaman yang menerimanya — beranda punya
   cangkangnya sendiri dan tidak memuat berkas ini. */

.lewati {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: .7rem 1rem;
  background: var(--latar-kartu);
  color: var(--aksen);
  border: 1px solid var(--aksen);
  border-radius: 0 0 var(--sudut) 0;
  font-weight: 600;
}
.lewati:focus { left: 0; }

/* Bilah lengket menutupi apa pun yang digulir ke posisi 0, dan seluruh permukaan ini
   menggulir dengan `scrollIntoView({ block: 'start' })` — tombol kembali, pembuka daftar
   bahan, dan pemulih pilihan tanaman semuanya begitu. Tanpa ini, judul bagian yang
   dituju berhenti PERSIS di bawah bilah dan yang terbaca baris kedua kartunya. Nilainya
   tinggi bilah (61 px terukur) ditambah sedikit napas; dipasang di sini, bukan di tiap
   pemanggil, karena penyebabnya milik bilah ini. */
:where(h2, h3, .kartu, ul.daftar, section, #daftarBahan) { scroll-margin-top: 4.5rem; }

.bilah-cangkang {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Ditarik keluar dari padding <body> supaya ia selebar layar, lalu isinya dikembalikan
     ke lebar yang sama dengan header dan main. */
  margin: -1.25rem -1rem 1.25rem;
  padding: .5rem 1rem;
  background: var(--latar);
  border-bottom: 1px solid var(--garis);
}

.merek-cangkang {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--teks);
  text-decoration: none;
  min-height: 44px;
}
/* Yang dulu grid-nya `.merek-cangkang` sendiri; sejak ada tanda merek di sebelahnya,
   barisnya mendatar dan susunan dua barisnya pindah ke pembungkus teks ini. */
.merek-cangkang .teks-merek {
  display: grid;
  gap: 0;
  align-content: center;
}
/* `flex: none` supaya tandanya tidak ikut menyusut saat kotak cari menuntut tempat —
   yang mengalah di bilah ini subjudulnya (lihat @media 460px di bawah), bukan tandanya. */
.merek-cangkang .tanda-merek { flex: none; display: block; width: 30px; height: 30px; }

/* Versi gelap, dua aturan dengan alasan yang sama seperti blok token di atas: "ikut
   sistem" dan "gelap eksplisit" dua keadaan berbeda, dan `prefers-color-scheme` saja
   hanya menjawab yang pertama. Geometri kedua berkasnya sama persis — yang berpindah
   cuma warnanya, jadi tidak ada pergeseran tata letak. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .tanda-merek { content: url("logo-pranatani-gelap.svg"); }
}
:root[data-tema="gelap"] .tanda-merek { content: url("logo-pranatani-gelap.svg"); }

.merek-cangkang strong { font-size: .95rem; letter-spacing: -.01em; }
.merek-cangkang small {
  font-size: .58rem;
  letter-spacing: .12em;
  color: var(--teks-lemah);
}
.merek-cangkang:hover strong { color: var(--aksen); }
.merek-cangkang:focus-visible { outline: 3px solid var(--aksen); outline-offset: 2px; }

/* Tombol tema pindah ke bilah; jarak lamanya di .baris-atas tidak berlaku lagi. */
.bilah-cangkang .tombol-tema { margin: 0; }

/* ------------------------------------------------------- kotak cari tetap (K2) */

/* Bilah harus muat merek + kotak + tombol tema di 375 px. Yang mengalah subjudul
   mereknya: ia hiasan, dan kotak cari yang tidak muat bukan kotak cari. */
.cari-cangkang { flex: 1 1 auto; min-width: 0; margin: 0; }
.cari-cangkang input {
  width: 100%;
  min-height: 44px;
  padding: .45rem .7rem;
  font: inherit;
  font-size: .9rem;
  color: var(--teks);
  background: var(--latar-kartu);
  border: 1px solid var(--garis);
  border-radius: 999px;
}
.cari-cangkang input:focus-visible { outline: 3px solid var(--aksen); outline-offset: 1px; }

@media (max-width: 460px) {
  /* Bilahnya harus memuat tanda + wordmark + kotak cari + tombol tema. Jaraknya
     dirapatkan dan tandanya diturunkan ke 26 px supaya yang dikembalikan itu jatuh ke
     kotak cari — bagian yang paling dirugikan kalau ruangnya habis. */
  .bilah-cangkang { gap: .6rem; }
  .merek-cangkang { flex: none; gap: .4rem; }
  .merek-cangkang .tanda-merek { width: 26px; height: 26px; }
  .merek-cangkang small { display: none; }
  .merek-cangkang strong { font-size: .82rem; white-space: nowrap; }
}

/* ------------------------------------------------------------ lembar cangkang */
.lembar-cangkang {
  width: min(560px, calc(100vw - 24px));
  padding: 0;
  border: 1px solid var(--garis);
  border-radius: 16px;
  background: var(--latar-kartu);
  color: var(--teks);
}
.lembar-cangkang::backdrop { background: rgb(9 24 18 / 55%); }
.lembar-cangkang[open] { display: flex; flex-direction: column; max-height: min(80vh, 720px); }
.lembar-cangkang-isi { overflow-y: auto; overscroll-behavior: contain; padding: .9rem 1rem 1.1rem; }
.lembar-cangkang-kepala {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0; padding: .9rem 1rem .7rem;
  border-bottom: 1px solid var(--garis);
}
.lembar-cangkang-kepala h2 { margin: 0; font-size: 1rem; }
.lembar-cangkang-kepala button {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--garis); border-radius: 8px;
  background: transparent; color: var(--teks);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.lembar-cangkang-kepala button:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }

.daftar-cangkang { list-style: none; margin: .6rem 0 0; padding: 0; }
.daftar-cangkang li + li { margin-top: .4rem; }
.daftar-cangkang a {
  display: block;
  padding: .6rem .7rem;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  color: var(--teks);
  text-decoration: none;
}
.daftar-cangkang a:hover { border-color: var(--aksen); }
.daftar-cangkang a:focus-visible { outline: 3px solid var(--aksen); outline-offset: 1px; }
.daftar-cangkang .nama { display: block; font-weight: 600; }
.daftar-cangkang .sub { display: block; font-size: .82rem; color: var(--teks-lemah); }
.daftar-cangkang .pembeda {
  display: block;
  margin-top: .25rem;
  font-size: .86rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--aksen);
}
.daftar-cangkang .pembeda.kosong-pembeda { font-weight: 400; font-style: italic; color: var(--teks-lemah); }

/* ------------------------------------------------------------ tab bawah (K2) */

/* Dalam jangkauan jempol, dan karena itu MENUTUPI isi — <body> diberi ruang di bawahnya
   supaya baris terakhir tiap halaman tidak berakhir di balik bilah ini. */
.tab-cangkang {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--latar);
  border-top: 1px solid var(--garis);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab-cangkang > * {
  display: grid;
  place-items: center;
  min-height: 52px;
  padding: .4rem .2rem;
  font: inherit;
  font-size: .72rem;
  text-align: center;
  color: var(--teks-lemah);
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
}
.tab-cangkang a:hover { color: var(--aksen); }
.tab-cangkang > *:focus-visible { outline: 3px solid var(--aksen); outline-offset: -3px; }

/* Halaman yang sedang dibuka tidak menautkan dirinya sendiri — aturan yang sama dengan
   kaki halaman, dan alasan yang sama. */
.tab-cangkang [aria-current="page"] {
  color: var(--teks);
  font-weight: 700;
  box-shadow: inset 0 2px 0 var(--aksen);
}

body.bertab { padding-bottom: 5.5rem; }

/* Di layar lebar tab bawah tidak berguna: kaki halaman sudah terlihat tanpa menggulir
   jauh, dan bilah tetap di bawah layar besar cuma memakan tempat. */
@media (min-width: 720px) {
  .tab-cangkang { display: none; }
  body.bertab { padding-bottom: 4rem; }
}

.kaki {
  max-width: var(--lebar);
  margin: 2.5rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--garis);
}

/* Dua kolom sudah muat di 375 px — 9rem × 2 + celah = 312 px dari 343 px yang tersedia.
   Dengan 11rem ia jatuh ke satu kolom dan kakinya jadi 898 px: navigasi yang bekerja,
   tetapi lebih tinggi daripada paragraf tautan yang digantikannya. */
.kaki nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.1rem 1.2rem;
}

.kaki-grup h2 {
  margin: 0 0 .45rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teks-lemah);
}
.kaki-grup ul { list-style: none; margin: 0; padding: 0; }
.kaki-grup li + li { margin-top: .1rem; }

/* Sasaran sentuh penuh, dan tiap butir berdiri sendiri — bukan deret titik-tengah yang
   membungkus dan menyisakan pemisah menggantung di ujung baris. */
.kaki-grup a,
.kaki-kini {
  display: block;
  padding: .5rem 0;
  min-height: 44px;
  font-size: .88rem;
  line-height: 1.5;
}
.kaki-grup a { color: var(--aksen); }

/* Halaman yang sedang dibuka tidak menautkan dirinya sendiri. Inilah yang tidak pernah
   bisa dilakukan paragraf tautan lama: isinya sama di tiap halaman, jadi ia tak pernah
   memberi tahu orang ia sedang di mana. */
.kaki-kini {
  color: var(--teks);
  font-weight: 700;
  border-left: 3px solid var(--aksen);
  padding-left: .55rem;
  margin-left: -.55rem;
}

.kaki-catatan {
  margin: 1.6rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--garis);
  font-size: .82rem;
  color: var(--teks-lemah);
}
.kaki-catatan a { color: var(--aksen); }

/* ------------------------------------------------- daftar simpanan (ukur.html) */
/* Peringatan kunci tak terdaftar. TIDAK memakai .bj-cacat: kelas itu membaca token
   --bj-* yang hanya didefinisikan di dalam .batas-jawaban, jadi di luar sana ia tergambar
   tanpa warna sama sekali — peringatan yang tidak terlihat seperti peringatan. */
.simpanan-asing {
  margin: .8rem 0 0;
  padding: .7rem .8rem;
  border: 1px solid var(--bahaya);
  border-radius: 8px;
  background: var(--bahaya-lemah);
  color: var(--bahaya);
  font-size: .87rem;
}
.simpanan-asing strong { display: block; }

.simpanan { margin: .8rem 0 0; }
.simpanan dt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .8rem;
  margin-top: .9rem;
  font-weight: 600;
  font-size: .92rem;
}
.simpanan dt:first-child { margin-top: 0; }
.simpanan dt em { font-weight: 400; color: var(--awas); font-style: normal; }
.simpanan-ukur {
  flex: none;
  font-size: .8rem;
  font-weight: 400;
  color: var(--teks-lemah);
  font-variant-numeric: tabular-nums;
}
.simpanan dd { margin: .15rem 0 0; font-size: .86rem; color: var(--teks-lemah); }

/* Tombol yang menghapus segalanya berpakaian seperti akibatnya. */
#hapusSemua {
  border-color: var(--bahaya);
  color: var(--bahaya);
}

body {
  margin: 0;
  padding: 1.25rem 1rem 4rem;
  background: var(--latar);
  color: var(--teks);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

header, main { max-width: var(--lebar); margin: 0 auto; }

/* Tombol tema, sebaris dengan label jalur. Bukan di atas judul: urutan bacanya tetap
   label lalu judul, dan tombolnya tidak menyisip di antara keduanya. */

.baris-atas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.tombol-tema {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--latar-kartu);
  color: var(--aksen);
  cursor: pointer;
}

.tombol-tema:hover { border-color: var(--aksen); background: var(--aksen-lemah); }
.tombol-tema svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.jalur {
  margin: 0 0 .35rem;
  font-size: .84rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teks-lemah);
}

h1 { margin: 0 0 .5rem; font-size: 1.65rem; line-height: 1.25; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
h3 { font-size: .95rem; margin: 1.2rem 0 .3rem; }
.lede { margin: 0 0 1.75rem; color: var(--teks-lemah); }

/* ---------------------------------------------------------------- pencarian */
.cari label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .35rem;
}

.cari input {
  width: 100%;
  padding: .8rem .9rem;
  font-size: 1.05rem;
  font-family: inherit;
  color: var(--teks);
  background: var(--latar-kartu);
  border: 2px solid var(--garis);
  border-radius: var(--sudut);
}

.cari input:focus-visible { outline: 3px solid var(--aksen); outline-offset: 1px; }

.bantuan { margin: .4rem 0 0; font-size: .82rem; color: var(--teks-lemah); }

/* ------------------------------------------------------------------- hasil */
.daftar { list-style: none; margin: 1.25rem 0 0; padding: 0; }

.daftar li + li { margin-top: .5rem; }

.daftar button {
  width: 100%;
  text-align: left;
  padding: .7rem .85rem;
  font: inherit;
  color: var(--teks);
  background: var(--latar-kartu);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  cursor: pointer;
}

.daftar button:hover { border-color: var(--aksen); }
.daftar button:focus-visible { outline: 3px solid var(--aksen); outline-offset: 1px; }

.daftar .nama { display: block; font-weight: 600; }
.daftar .sub { display: block; font-size: .82rem; color: var(--teks-lemah); }

/* PEMILIH TANAMAN — daftar yang isinya cuma nama dan satu angka, dan karena itu tidak
   berhak atas satu baris penuh masing-masing.

   Bentuk `.daftar` biasa dipakai daftar gejala, dan di sana tinggi barisnya memang perlu:
   yang dibandingkan kalimat pembeda, bukan nama. Pemilih tanaman tidak punya kalimat apa
   pun — "Cabai" dan "184 produk terdaftar" — tetapi mewarisi tinggi yang sama: 71 px per
   baris, dan kartunya jadi 1.296 px untuk ulat grayak (13 tanaman) di layar 812 px. Yang
   menanam anggrek — baris terakhir — menggulir melewati dua belas nama yang bukan
   miliknya untuk sampai ke satu tombol. Pada "Gulma Berdaun Lebar" (75 komoditas)
   daftarnya 5.325 px, dan memilih dari sana berhenti jadi memilih.

   Jadi barisnya dijajarkan menyamping selebar yang muat, dan sesaknya dikurangi. Urutannya
   tetap menurut banyaknya produk — dibaca kiri ke kanan lalu turun. Yang tidak berubah:
   satu tombol per ejaan registri, tidak digabung dan tidak dijumlahkan (lihat
   EJAAN_TERPISAH di `tanaman.js`) — yang dipadatkan bentuknya, bukan isinya.

   NAMA DAN ANGKANYA TETAP BERTUMPUK, DAN ITU SUDAH DIUJI SEBALIKNYA. Menyandingkannya
   dalam satu baris memang lebih pendek lagi, tetapi pada kolom 150 px di ponsel 375 px
   nama dua kata — "Kacang panjang", "Bawang merah", "Cabai merah" — patah dan barisnya
   jadi 67 px sementara tetangganya 42 px. Daftar yang tingginya berselang-seling lebih
   sulit dipindai daripada daftar yang sedikit lebih panjang, dan memendekkan angkanya
   jadi "184" saja menghapus satu-satunya kata yang menyatakan ini pendaftaran. */
.daftar.ringkas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .4rem;
  margin-top: .9rem;
}

.daftar.ringkas li + li { margin-top: 0; }

/* `height: 100%` menyamakan tinggi sesama kolom dalam satu baris petak; tanpa itu tombol
   yang namanya pendek berdiri lebih rendah daripada tetangganya dan tepinya bergerigi. */
.daftar.ringkas button { height: 100%; padding: .5rem .6rem; }

.daftar.ringkas .nama { font-size: .95rem; line-height: 1.35; }

/* Angkanya tidak boleh patah dua baris: yang membedakan "184" dari "1" cuma dia, dan
   `tabular-nums` menyejajarkan kolomnya tanpa perlu tabel. */
.daftar.ringkas .sub { margin-top: .1rem; font-size: .78rem; font-variant-numeric: tabular-nums; }

/* Baris yang sedang ditutup saringan. `.daftar.ringkas` petak, dan anak petak yang
   `hidden` tetap menempati selnya di sebagian peramban kalau `display`-nya diberi nilai
   lain di tempat mana pun — jadi dinyatakan sekali di sini, bukan diandalkan dari lembar
   bawaan peramban. */
.daftar.ringkas li[hidden] { display: none; }

/* ----------------------------------------------------- saringan nama tanaman */
/* NAMANYA `cari-tanaman`, BUKAN `saring`, DAN ITU BUKAN SELERA. `batas.css` sudah memakai
   `.saring` untuk penyaring kemampuan lab di layar C7 — sebuah fieldset `display: flex`
   berbingkai — dan `tanaman.html` memuat lembar itu untuk komponen batas jawabannya. Kotak
   ini sempat mewarisinya utuh: bingkai kotak di sekeliling label dan sebuah baris flex yang
   kebetulan masih terbaca karena `flex-wrap`. Dua komponen berlainan di bawah satu nama
   kelas hanya menunggu salah satunya diperbaiki.

   Kotaknya lebih kecil daripada `.cari` di beranda, dan itu bukan penghematan ruang.
   Kotak beranda pintu masuk halaman — ia yang ditanya lebih dulu. Yang ini berdiri di
   tengah kartu, sesudah pertanyaannya ("Di tanaman apa?") dijawab daftar di bawahnya;
   sebesar kotak beranda ia akan terbaca sebagai pencarian seluruh situs, dan yang
   mengetik nama hama ke dalamnya akan dijawab "tidak ada baris yang cocok" oleh saringan
   yang memang cuma tahu nama tanaman. */
.cari-tanaman { margin: 1rem 0 0; }

.cari-tanaman label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }

.cari-tanaman input {
  width: 100%;
  padding: .55rem .7rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--teks);
  background: var(--latar-kartu);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
}

.cari-tanaman input:focus-visible { outline: 3px solid var(--aksen); outline-offset: 1px; }

/* Cacahnya berubah tiap ketukan dan dibacakan `aria-live`; tingginya dikunci supaya
   daftar di bawahnya tidak bergeser naik-turun saat angkanya berganti panjang. */
.cari-tanaman .bantuan { min-height: 1.2em; margin-top: .35rem; }

.cari-tanaman-nihil { margin: 1.25rem 0 0; }
.cari-tanaman-nihil p { margin: 0; color: var(--teks-lemah); }
.cari-tanaman-nihil .kembali { margin-top: .9rem; }

/* Kalimat pembeda di bawah judul gejala jalur 1. BUKAN `.sub`: yang di sana keterangan
   cacah yang boleh diabaikan, sedangkan kalimat ini justru yang memutuskan pilihan —
   dua judul bisa sama-sama berbunyi "daun mengeriting" dan yang membedakannya arah
   keritingnya, ada di sini. Jadi ia seukuran teks biasa dan tidak diredupkan sejauh
   `.sub`; yang membedakannya dari judul cuma tebalnya. */
.daftar .gejala-ringkas {
  display: block;
  margin: .25rem 0 .3rem;
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--teks);
}

.lencana {
  display: inline-block;
  padding: .05rem .45rem;
  margin-left: .4rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: .12em;
  border-radius: 999px;
  background: var(--aksen-lemah);
  color: var(--aksen);
}

/* ------------------------------------------------------------------ kartu */
.kartu {
  margin: 1.25rem 0 0;
  padding: 1rem 1.1rem;
  background: var(--latar-kartu);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
}

.kartu.peringatan { border-color: var(--awas); background: var(--awas-lemah); }
.kartu.tabrakan { border-color: var(--bahaya); background: var(--bahaya-lemah); }
/* Pencabutan sertifikat bukan kedaluwarsa. Kedaluwarsa memakai amber `.peringatan` karena
   masih bisa diperpanjang; pencabutan memakai merah karena tidak ada yang bisa ditanyakan
   lagi — keputusannya sudah diambil lembaga penerbitnya. */
.kartu.cabut { border-color: var(--bahaya); background: var(--bahaya-lemah); }
.kartu > :first-child { margin-top: 0; }
.kartu > :last-child { margin-bottom: 0; }

.kunci {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: .3rem .9rem;
  margin: 0;
  font-size: .92rem;
}

.kunci dt { color: var(--teks-lemah); }
.kunci dd { margin: 0; }

@media (max-width: 30rem) {
  .kunci { grid-template-columns: 1fr; gap: 0; }
  .kunci dt { margin-top: .55rem; font-size: .8rem; }
}

.pembungkus-tabel { overflow-x: auto; margin: .75rem 0 0; overscroll-behavior-inline: contain; }
.pembungkus-tabel[tabindex]:focus-visible { outline: 3px solid var(--aksen); outline-offset: 2px; }

table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--garis); }
th { font-weight: 600; color: var(--teks-lemah); white-space: nowrap; }
td.angka { white-space: nowrap; font-variant-numeric: tabular-nums; }

.tanda-larangan {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .4rem;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--bahaya-lemah);
  color: var(--bahaya);
  border: 1px solid var(--bahaya);
}

.catatan { margin: .8rem 0 0; font-size: .83rem; color: var(--teks-lemah); }
.catatan strong { color: var(--teks); }

.kembali {
  margin: 1.5rem 0 0;
  min-height: 44px;
  padding: .55rem .9rem;
  font: inherit;
  color: var(--teks);
  background: transparent;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  cursor: pointer;
}

.kembali:focus-visible { outline: 3px solid var(--aksen); outline-offset: 1px; }

/* ------------------------------------------------------------------ batas */
.batas { margin: 2.5rem 0 0; border-top: 1px solid var(--garis); padding-top: 1rem; }
.batas summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .35rem 0;
  cursor: pointer;
  font-weight: 600;
  font-size: .92rem;
}

/* Label bagian ini judul sungguhan sejak 23 Agustus 2026, supaya h3 di dalamnya punya
   induk dan tidak ada layar yang melompat h1 → h3. Gayanya sengaja tidak berubah:
   yang diperbaiki strukturnya, bukan rupanya. */
.batas summary h2 { display: inline; margin: 0; font: inherit; }
.batas-isi { font-size: .9rem; color: var(--teks-lemah); }
.batas-isi strong, .batas-isi em { color: var(--teks); }

.sumber { margin: 2rem 0 0; font-size: .8rem; color: var(--teks-lemah); }

.kosong { margin: 1.25rem 0 0; color: var(--teks-lemah); }

/* Kartu pelepasan sengaja berbeda warna dari pendaftaran dan PVT: keempat surat
   sama-sama terdengar "resmi", dan pelepasan yang paling sering dimaksud orang
   ketika bertanya apakah benihnya sah. */
.kartu.pelepasan { border-color: var(--aksen); background: var(--aksen-lemah); }

.judul-bagian { margin: 1.75rem 0 .25rem; font-size: 1.05rem; }

/* ------------------------------------------------- pemilih direktori (C7) */
/* Empat kumpulan yang menjawab empat pertanyaan berbeda, dan sampai 25 Agustus 2026
   keempatnya berdiri berurutan ke bawah di `toko.html`: 7.269 px pada layar 812 px,
   dengan laboratorium mulai di layar keempat dan balai penyuluhan di layar ketiga.
   Yang mendarat di halaman itu melihat satu dari empat, dan satu-satunya tempat
   keempatnya disebut adalah paragraf pembuka tujuh baris — bentuk paling sulit
   dipindai untuk sesuatu yang sebenarnya sebuah daftar pilihan.

   KARTUNYA MEMBAWA KETERJANGKAUAN, BUKAN CUMA NAMA. Perbedaan yang menentukan di
   halaman itu bukan berapa isinya melainkan seberapa jauh masing-masing bisa
   mengantarkan orang: yang berkoordinat bisa dituju, yang bernama kabupaten tidak.
   Kalimat kedua tiap kartu menyebut itu — jadi pemisahan yang selama ini cuma
   diterangkan prosa kini justru jadi hal pertama yang terbaca.

   TIDAK ADA WARNA PERINGATAN DI SINI, dan itu disengaja. "Tidak bisa dituju" bukan
   keadaan bahaya, dan `batas.css` sudah menetapkan satu-satunya pemakaian warna awas
   untuk keadaan data adalah akreditasi yang lewat masa. Yang membedakan keempat kartu
   ini kalimatnya, bukan rona tepinya. */
.pemilih { display: grid; gap: .35rem; margin: 0; }

.pemilih button {
  display: grid;
  gap: .14rem;
  width: 100%;
  padding: .6rem .8rem;
  text-align: left;
  font: inherit;
  color: var(--teks);
  background: var(--latar-kartu);
  border: 1px solid var(--garis);
  border-left: 3px solid var(--aksen);
  border-radius: 12px;
  cursor: pointer;
}

.pemilih button:hover { border-color: var(--aksen); }
.pemilih button:focus-visible { outline: 3px solid var(--aksen); outline-offset: 1px; }
.pemilih button[aria-expanded="true"] { background: var(--aksen-lemah); border-color: var(--aksen); }

.pm-mata {
  font-size: .66rem; font-weight: 700; letter-spacing: .09em; line-height: 1.3;
  text-transform: uppercase; color: var(--teks-lemah);
}
.pm-nama { display: flex; align-items: center; font-weight: 600; }
.pm-nama .lencana { margin-left: auto; }
.pm-sub { font-size: .81rem; line-height: 1.38; color: var(--teks-lemah); }

/* SESUDAH SATU PINTU DIBUKA KEEMPATNYA TETAP TERLIHAT — tetapi tinggal namanya.
   Kartu penuh yang bertahan di atas tiap panel akan membebankan ~360 px gulir pada
   tiap ketukan, di layar yang justru jadi sasaran seluruh berkas ini. Yang sudah
   dibaca sekali tidak perlu dibaca lagi; yang masih perlu adalah bahwa ketiga pintu
   lain ada dan tinggal disentuh. Dua lajur, ~44 px tiap kartu. */
.pemilih[data-terpilih] { gap: .3rem; }
.pemilih[data-terpilih] .pm-mata,
.pemilih[data-terpilih] .pm-sub { display: none; }
.pemilih[data-terpilih] button { padding: .4rem .7rem; min-height: 44px; align-content: center; }
/* Satu lajur, satu baris per kartu. Dua lajur pada 375 px memaksa "Balai penyuluhan"
   dan "Penjual benih" membungkus jadi dua baris dengan cacah menggantung di sampingnya
   — lebih tinggi DAN lebih berantakan daripada empat baris tunggal. */
.pemilih[data-terpilih] .pm-nama { font-size: .9rem; }

.pemilih-bantu { margin: .7rem 0 0; font-size: .83rem; color: var(--teks-lemah); }
.pemilih-bantu[hidden] { display: none; }

/* Panel yang dibuka. Judulnya sasaran fokus sesudah kartunya diketuk — pola yang sama
   dengan layar rincian di seluruh permukaan lain, jadi pembaca layar mendarat di nama
   bagian yang baru saja dipilihnya alih-alih tertinggal di kartu. */
.pintu { margin: 1.5rem 0 0; }
.pintu > .judul-bagian { margin-top: 0; }
.pintu > .judul-bagian:focus { outline: none; }
.pintu > .judul-bagian:focus-visible { outline: 3px solid var(--aksen); outline-offset: 3px; }

@media (min-width: 34rem) {
  .pemilih,
  .pemilih[data-terpilih] { grid-template-columns: 1fr 1fr; }
}

.kartu ol { margin: .6rem 0 0; padding-left: 1.2rem; }
.kartu ol li + li { margin-top: .4rem; }

/* Warna tautan dipasang di `a`, bukan hanya di `.lain a`. Sebelumnya satu tautan di
   luar pembungkus itu — jalur 6 ke jalur 5 — mewarisi biru bawaan peramban, dan di
   tema gelap rasionya 1,72:1. Yang di luar daftar navigasi justru tautan di tengah
   kalimat, yang paling perlu terbaca. */
a { color: var(--aksen); }

/* Tombol yang berupa tautan, untuk tujuan yang ADA DI HALAMAN INI.
   Sampai 25 Agustus 2026 dua kalimat di jalur 1 mengajak "mulai dari apa yang terlihat"
   lewat <a href="index.html"> — meninggalkan dokumen demi pemilih gejala yang sebenarnya
   ada di dokumen yang sama, cuma sedang disembunyikan. Yang berpindah halaman memang
   tautan; yang membuka sesuatu di halaman ini tombol, dan rupanya tetap tautan supaya
   ajakannya terbaca sebagai ajakan. */
.tautan-dalam {
  padding: 0;
  font: inherit;
  color: var(--aksen);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

.tautan-dalam:focus-visible { outline: 3px solid var(--aksen); outline-offset: 2px; }

/* Navigasi antarjalur dipakai di kebun, kerap dengan tangan basah. Tautannya tadinya
   setinggi 17 px — tinggi baris teks belaka. `inline-block` beserta padding tegaknya
   membawa kotak sentuh ke ~44 px tanpa mengubah rupa barisnya; `line-height` dinaikkan
   supaya kotak yang membesar tidak saling menindih saat barisnya membungkus. */
.lain { margin: 2rem 0 0; font-size: .92rem; line-height: 2.4; }
.lain a { display: inline-block; padding: .55rem 0; }

/* ------------------------------------------------------ tombol tindakan */
/* `ukur.html` punya dua tombol dan sampai 23 Agustus 2026 tidak ada satu pun aturan
   untuknya: keduanya memakai bawaan peramban, setinggi 22 px. Salah satunya menghapus
   seluruh catatan dan tidak bisa dibatalkan — sasaran sentuh sebesar itu untuk aksi
   yang tidak bisa ditarik kembali adalah kekeliruan yang mahal di layar sempit. */

#tindakan .tombol-baris { display: flex; flex-wrap: wrap; gap: .6rem; }

.tombol-baris button,
#hapusSemua {
  min-height: 44px;
  padding: .6rem 1rem;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--latar-kartu);
  color: var(--teks);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

#hapusSemua { border-color: var(--bahaya); color: var(--bahaya); }

main details > summary {
  min-height: 44px;
  box-sizing: border-box;
}

#tindakan button {
  min-height: 44px;
  padding: .6rem 1rem;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--latar-kartu);
  color: var(--teks);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

#tindakan button:hover { border-color: var(--aksen); background: var(--aksen-lemah); }
#tindakan button:focus-visible { outline: 3px solid var(--aksen); outline-offset: 1px; }

/* Yang menghapus diberi rupa yang berbeda. Dua tombol berdampingan yang tampak sama
   membuat yang merusak sama mudahnya diketuk dengan yang tidak. */
#tindakan #hapus { border-color: var(--bahaya); color: var(--bahaya); }
#tindakan #hapus:hover { background: var(--bahaya-lemah); border-color: var(--bahaya); }

/* ------------------------------------------------------- kalkulator jalur 3 */
.masukan { margin-top: .9rem; }
.masukan label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }

.masukan input {
  width: 100%;
  padding: .7rem .8rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--teks);
  background: var(--latar);
  border: 2px solid var(--garis);
  border-radius: var(--sudut);
}

.masukan input:focus-visible { outline: 3px solid var(--aksen); outline-offset: 1px; }

.preset { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }

.preset button {
  padding: .35rem .7rem;
  font: inherit;
  font-size: .85rem;
  color: var(--teks-lemah);
  background: transparent;
  border: 1px solid var(--garis);
  border-radius: 999px;
  cursor: pointer;
}

.preset button:hover { border-color: var(--aksen); color: var(--teks); }
/* Terpilih ditandai border DAN warna teks, bukan warna latar saja: satu penanda warna
   sendirian gagal pada layar HP di bawah matahari, dan itu keadaan pemakaian yang biasa
   di sini, bukan yang langka. */
.preset button[aria-pressed="true"] { border-color: var(--aksen); color: var(--teks); font-weight: 600; }
.preset button:focus-visible { outline: 3px solid var(--aksen); outline-offset: 1px; }

/* Angka besar sengaja tidak diberi warna aksen: ia hasil aritmetika atas harga yang
   dimasukkan pengguna, bukan temuan atau anjuran. */
.kartu.sorot { border-width: 2px; }
.angka-besar { margin: 0; font-size: 2.1rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.angka-label { margin: .15rem 0 0; color: var(--teks-lemah); font-size: .9rem; }

.bilah {
  height: .5rem;
  margin: .7rem 0 0;
  background: var(--garis);
  border-radius: 999px;
  overflow: hidden;
}

.bilah span { display: block; height: 100%; background: var(--aksen); }

.daftar.polos { margin-top: .8rem; }
.daftar.polos li {
  padding: .55rem .85rem;
  background: var(--latar);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
}
.daftar.polos .nama { display: block; font-weight: 600; font-size: .92rem; }
.daftar.polos .sub { display: block; font-size: .8rem; color: var(--teks-lemah); }

/* ---------------------------------------------------------- resep jalur 5 */
.daftar button.terpilih { border-color: var(--aksen); background: var(--aksen-lemah); }

.tanda-syarat {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .4rem;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--awas-lemah);
  color: var(--awas);
  border: 1px solid var(--awas);
}

.kriteria { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--garis); }
.kriteria:first-of-type { margin-top: .3rem; padding-top: 0; border-top: 0; }
.kriteria-ukuran { margin: 0; font-weight: 600; font-size: .95rem; }

/* Padanan lapangan sengaja disorot: uji laboratorium yang jadi dua gelas dan seminggu
   menunggu adalah bagian paling berharga di kosakata ini, dan yang paling mudah
   terlewat di antara kriteria resminya. */
.kriteria-kebun {
  margin: .5rem 0 0;
  padding: .6rem .75rem;
  font-size: .9rem;
  background: var(--aksen-lemah);
  border-left: 3px solid var(--aksen);
  border-radius: 0 var(--sudut) var(--sudut) 0;
}

/* ------------------------------------------------------- kartu bahan jalur 1 */
.periksa { margin: .7rem 0 0; padding-left: 1.3rem; }
.periksa li + li { margin-top: .7rem; }
.periksa .sub { display: block; margin-top: .25rem; font-size: .82rem; color: var(--teks-lemah); }

.kartu.bahan { padding: 0; overflow: hidden; }

.bahan-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  width: 100%;
  padding: .85rem 1rem;
  text-align: left;
  font: inherit;
  color: var(--teks);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.bahan-kepala:hover { background: var(--aksen-lemah); }
.bahan-kepala:focus-visible { outline: 3px solid var(--aksen); outline-offset: -3px; }
.bahan-nama { font-weight: 600; }
.bahan-jumlah { font-size: .85rem; color: var(--teks-lemah); margin-left: auto; }
.bahan-kepala[aria-expanded="true"] { background: var(--aksen-lemah); }
.bahan-isi { padding: 0 1rem 1rem; }
.bahan-isi > :first-child { margin-top: 0; }

/* Pemisah untuk bahan yang ditolak: mereka TIDAK disembunyikan, tetapi juga tidak
   berdiri sejajar dengan resep yang boleh. */
.pemisah { margin: 2rem 0 0; border: 0; border-top: 2px dashed var(--bahaya); }

/* Pembeda SKU pada daftar hasil.
   Nama saja tidak membedakan: "PHONSKA" milik Petrokimia Gresik ada empat kali
   dengan grade NPK yang berlainan. Yang membedakannya komposisi, jadi komposisi
   ikut ke barisnya — bukan cuma ke layar rinciannya. */
/* Pembeda naik ke atas nama pemegang, dan naik ukurannya.
   Sebelumnya ia baris ketiga berukuran .8rem di bawah produsen, dan mencari PHONSKA
   memberi lima kartu yang seluruh baris pertamanya sama — yang membedakan keempatnya
   nisbah NPK, tercetak paling kecil dan paling redup di kartu. Urutan bacanya sekarang
   nama, lalu apa yang membedakannya, baru siapa yang mendaftarkannya.

   `tabular-nums` bukan hiasan: memilih di antara 15-8-10, 15-15-10, dan 15-10-15 adalah
   membandingkan angka kolom demi kolom, dan itu hanya bekerja kalau angkanya selebar. */
.daftar .pembeda {
  display: block;
  margin-top: .3rem;
  font-size: .88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--aksen);
}

/* Dipakai hanya saat namanya memang berulang di hasil yang sama — di situ komposisi
   berhenti jadi keterangan dan jadi satu-satunya cara memilih. */
.daftar .pembeda-utama {
  display: inline-block;
  padding: .12rem .45rem;
  margin-top: .35rem;
  border-radius: 6px;
  background: var(--aksen-lemah);
}

/* Nama, komposisi, dan pemegang sama persis — yang tersisa nomor pendaftaran, dan
   indeks cari tidak membawanya. */
.daftar .kembar { margin-top: .2rem; font-style: italic; }

/* Nama merek di dalam tabel: tetap tombol, karena ia membuka layar — tetapi
   berpakaian tautan, karena itulah yang dilakukannya. */
.tautan {
  min-height: 44px;
  padding: .45rem 0;
  border: 0;
  background: none;
  color: var(--aksen);
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.tautan:hover { text-decoration-thickness: 2px; }
.tautan:focus-visible { outline: 3px solid var(--aksen); outline-offset: 2px; }
.daftar .pembeda.kosong-pembeda { color: var(--teks-lemah); font-weight: 400; font-style: italic; }

/* Label yang hanya untuk pembaca layar. Ada di beranda.css sejak awal tetapi tidak di
   sini, dan itu baru ketahuan saat formulir kandungan memakainya: labelnya tampil utuh
   di layar. Kelas yang dipakai bersama dua lembar gaya harus ada di keduanya. */
.khusus-pembaca {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------- pemeriksaan kandungan (C2) */
/* Masuk dari angka yang tercetak di karung, bukan dari nama atau nomor pendaftaran.
   Barisnya kisi supaya nama hara yang panjang tidak mendorong kolom kadar keluar
   layar; di layar sempit ia menumpuk jadi dua baris, bukan menyusut jadi tak terbaca.

   DI LAYAR SEMPIT PATAHANNYA JATUH ANTARA NAMA DAN ANGKA, bukan antara angka dan
   satuannya. Versi sebelumnya memotong di tempat kedua — kadar di larik atas, satuan di
   larik bawah — padahal "15" dan "%" adalah satu besaran yang dibaca sekali jalan; dan
   tombol buangnya diberi kolom sendiri yang membentang dua larik, sehingga ia mendarat
   di selokan antara keduanya dan menonjol sendirian ke kanan. Tiga baris hara terbaca
   sebagai enam kotak dengan tiga tombol mengambang, bukan tiga pasang.

   Sekarang larik atas nama hara + tombol buang, larik bawah kadar + satuannya. Kedua
   lariknya rata di kiri dan kanan, dan tombolnya menutup larik yang dilabelinya alih-alih
   melayang di tengah.

   PEMBAGIAN KOLOMNYA DIUKUR, BUKAN DIKIRA. Di layar 375 px satu baris hara punya 305 px.
   "% — kemasan kilogram" menuntut 168 px teks + 19 px padding + panah bawaan peramban,
   jadi kotak satuannya butuh ~207 px; menaruhnya sebaris dengan kadar DAN tombol buang
   hanya menyisakan 175 px, dan ia terpotong jadi "% — kemasan kilogra". Yang pindah
   karena itu tombolnya, bukan satuannya: kadar 4,75rem + satuan sampai tepi kanan
   memberi 223 px, dan nama hara di larik atas dapat 255 px. Dua-duanya utuh.

   Jarak ANTAR baris hara juga dibuat lebih besar daripada jarak di DALAM satu baris.
   Ketika keduanya .4rem lawan .6rem, mata tidak punya dasar mengelompokkan satuan ke
   hara di atasnya — dan pengelompokan itu satu-satunya yang membuat formulir enam kotak
   terbaca sebagai tiga hara. */

.baris-kandungan { display: grid; gap: 1rem; margin-bottom: .8rem; }

.baris-hara {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  gap: .35rem;
  align-items: center;
}

.baris-hara select,
.baris-hara input {
  min-height: 44px;
  padding: .45rem .6rem;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--latar-kartu);
  color: var(--teks);
  font: inherit;
}

.baris-hara .k-hara   { grid-row: 1; grid-column: 1 / 3; }
.baris-hara .k-nilai  { grid-row: 2; grid-column: 1; }
.baris-hara .k-satuan { grid-row: 2; grid-column: 2 / -1; }

.baris-hara .k-buang {
  grid-row: 1;
  grid-column: 3;
  min-width: 44px; min-height: 44px;
  border: 1px solid var(--garis); border-radius: var(--sudut);
  background: transparent; color: var(--teks-lemah);
  font-size: 1.1rem; cursor: pointer;
}
.baris-hara .k-buang:hover { border-color: var(--bahaya); color: var(--bahaya); }

.aksi-kandungan { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .5rem; }

.aksi-kandungan button {
  min-height: 44px; padding: .6rem 1rem;
  border: 1px solid var(--garis); border-radius: var(--sudut);
  background: var(--latar-kartu); color: var(--teks);
  font: inherit; font-weight: 600; cursor: pointer;
}
.aksi-kandungan button:hover { border-color: var(--aksen); background: var(--aksen-lemah); }
.aksi-kandungan #periksaKandungan { border-color: var(--aksen); color: var(--aksen); }

/* 44rem, bukan 34rem. Ambang lama disetel ketika kolom satuan masih 8,5rem; setelah ia
   melebar jadi 13rem, satu larik menuntut ~567 px isi baris — dan di 548 px ambang lama
   menyalakannya terlalu cepat, menyisakan 122 px untuk nama hara sehingga EMPAT label
   terpotong sekaligus. Ambang yang benar diturunkan dari lebar yang dibutuhkan isinya,
   bukan dari angka bulat yang kelihatan seperti "tablet". */
@media (min-width: 44rem) {
  /* 13rem, bukan 8,5rem: ukuran yang sama yang menentukan larik sempit berlaku di
     sini juga — kotak satuan butuh ~207 px, dan 8,5rem (136 px) memotongnya jadi
     "% — kemasan k" persis seperti di layar sempit, cuma lebih lama tak terlihat
     karena barisnya terlanjur rapi. */
  .baris-hara { grid-template-columns: minmax(0, 1fr) 5.5rem 13rem auto; }
  .baris-hara .k-hara,
  .baris-hara .k-nilai,
  .baris-hara .k-satuan,
  .baris-hara .k-buang { grid-row: auto; grid-column: auto; }
}

/* ------------------------------------------------ kalibrasi & takaran (D4/D5) */

.kisi-isian { display: grid; gap: .8rem; margin: .9rem 0 0; }
@media (min-width: 34rem) { .kisi-isian { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.isian { margin: 0; }
.isian label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }

.isian input,
.isian select {
  width: 100%;
  min-height: 44px;
  padding: .5rem .7rem;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--latar-kartu);
  color: var(--teks);
  font: inherit;
}

.isian input:focus-visible,
.isian select:focus-visible { outline: 3px solid var(--aksen); outline-offset: 1px; }

/* Satu angka besar sebagai jawaban, lalu pembagiannya di bawahnya. Bentuk yang sama
   dipakai jalur 3: yang dibaca lebih dulu hasilnya, yang dibantah pembagiannya. */
.hasil-besar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  margin: 1rem 0 0; padding: .8rem .9rem;
  border: 1px solid var(--aksen); border-radius: var(--sudut);
  background: var(--aksen-lemah);
}
.hasil-besar strong { font-size: 1.5rem; line-height: 1.1; color: var(--teks); }
.hasil-besar span { color: var(--teks-lemah); font-size: .88rem; }

#hasilKalibrasi table th,
#hasilDosis table th,
#hasilTakar table th { white-space: normal; width: 11rem; }

/* ===========================================================================
   Profil principal, harga komoditas, dan gambar kemasan
   ===========================================================================
   Ditambahkan 23 Agustus 2026. Tidak ada token warna baru di sini: ketiganya
   memakai palet yang sudah ada, sehingga sakelar tema tidak perlu tahu bahwa
   halaman-halaman ini ada. */

/* Nama yang jadi tautan DI DALAM tabel — pemegang pendaftaran, dan nama OPT di
   tabel "terdaftar untuk".
   Digarisbawahi, bukan sekadar berwarna: keduanya muncul di dalam tabel dan daftar
   definisi, tempat warna sendirian tidak cukup membedakan yang bisa diketuk dari
   yang tidak. */
.tautan-principal,
.tautan-opt {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--aksen);
  text-underline-offset: 2px;
}
.tautan-principal:hover,
.tautan-principal:focus-visible,
.tautan-opt:hover,
.tautan-opt:focus-visible { color: var(--aksen); }

/* Baris daftar yang seluruhnya jadi tautan — dipakai daftar harga dan hasil
   pencarian principal. Sasaran ketuknya sebaris penuh, bukan sepotong teks. */
.baris-tautan {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  align-items: baseline;
  padding: 0.7rem 0.85rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--latar-kartu);
}
.baris-tautan:hover,
.baris-tautan:focus-visible { border-color: var(--aksen); }
.baris-tautan .nama { flex: 1 1 12rem; font-weight: 600; }
.baris-tautan .sub { color: var(--teks-lemah); font-size: 0.9rem; }

/* --- Kotak pengaya principal: tingkat bukti D di dalam halaman bertingkat B ---
   Latar dan garisnya sengaja berbeda dari kartu biasa. Ini satu-satunya cara
   visual menyatakan bahwa isinya TIDAK berasal dari registri, dan pemisahan itu
   yang menahan tebakan riset agar tidak terbaca sesetara cacah pendaftaran. */
.kartu.pengaya {
  background: var(--awas-lemah);
  border-color: var(--awas);
}
.lencana-d {
  background: var(--awas);
  color: var(--latar-kartu);
  font-weight: 600;
}
/* Lencana menilai MUTU BUKTINYA, bukan mutu badannya — aturan yang lahir bersama lencana
   tingkat D dan berlaku sama untuk B. Warna aksen di sini menandai register pihak ketiga
   yang bertanggal, bukan badan yang bagus. */
.lencana-b {
  background: var(--aksen);
  color: var(--latar-kartu);
  font-weight: 600;
}
.catatan-tegas { color: var(--teks); }
.merek-payung {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0.5rem 0;
  list-style: none;
}
.merek-payung li {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--garis);
  border-radius: 999px;
  font-size: 0.88rem;
  background: var(--latar-kartu);
}
.situs { overflow-wrap: anywhere; }

/* --- Harga --- */

/* Strip tingkat. Menempel di bawah bilah cangkang, jadi peringatannya ikut terbaca pada
   baris ke-40 seperti pada baris pertama. Offsetnya diukur di harga.js, bukan ditebak:
   bilahnya membungkus dan meninggi sendiri di layar sempit. */
.strip-tingkat {
  position: sticky;
  top: var(--atas-bilah, 61px);
  z-index: 9;
  margin: 0 0 1.1rem;
  border: 1px solid var(--awas);
  border-radius: var(--sudut);
  background: var(--awas-lemah);
  color: var(--awas);
}
.strip-tingkat[data-tingkat="farmgate"] {
  border-color: var(--aksen);
  background: var(--aksen-lemah);
  color: var(--aksen);
}
.strip-tingkat > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  list-style: none;
}
.strip-tingkat > summary::-webkit-details-marker { display: none; }
.strip-tingkat > summary:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; border-radius: var(--sudut); }
.st-teks { flex: 1; min-width: 0; }
.st-judul { display: block; font-size: 0.88rem; font-weight: 650; line-height: 1.35; }
.st-sub { display: block; font-size: 0.8rem; }
/* Tanda buka-tutup digambar CSS, bukan diketik: segitiga teks ikut terbaca pembaca layar
   sebagai kata, dan <summary> sudah mengumumkan keadaannya sendiri. */
.st-tanda {
  flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.strip-tingkat[open] .st-tanda { transform: rotate(-135deg) translate(-2px, -2px); }
.st-isi {
  padding: 0 0.8rem 0.7rem;
  color: var(--teks);
  max-height: 55vh;
  overflow-y: auto;
}
.st-isi p { margin: 0 0 0.5rem; font-size: 0.85rem; line-height: 1.6; }
.st-isi p:last-child { margin-bottom: 0; }

/* Kepala kelompok daftar. Daftarnya menjalankan alfabet dua kali — 38 yang berangka, lalu
   17 yang terdaftar tanpa angka — dan sampai 24 Agustus 2026 pergantiannya tidak ditandai
   apa pun. Yang menggulir mencari "Kacang Tanah" berhenti di "Udang Basah" dan menyimpulkan
   daftarnya habis.

   Tiap kelompok dibungkus <section> sendiri. Tanpa itu kedua kepala berbagi satu blok
   penampung, keduanya menempel di offset yang sama, dan yang pertama menutupi yang kedua. */
.kelompok-harga { margin: 1.4rem 0 0; }
.kelompok-harga > h2 {
  position: sticky;
  top: calc(var(--atas-bilah, 61px) + var(--tinggi-strip, 54px));
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0;
  padding: 0.35rem 0;
  background: var(--latar);
  border-bottom: 1px solid var(--garis);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teks-lemah);
}
.harga-tanpa-angka > summary {
  position: sticky;
  top: calc(var(--atas-bilah, 61px) + var(--tinggi-strip, 54px));
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: .35rem 0;
  background: var(--latar);
  border-bottom: 1px solid var(--garis);
  color: var(--teks-lemah);
  cursor: pointer;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kelompok-harga .cacah {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  font-size: 0.95em;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--permukaan);
}

/* Baris tanpa angka yang punya lanjutan di jalur lain. Keempat pupuk buntu di layar ini,
   tetapi TIDAK buntu di platform ini — jalur 3 membandingkannya dengan HET bersubsidi. */
.baris-lanjut {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.2rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--aksen);
  text-decoration: none;
}
.baris-lanjut:hover { text-decoration: underline; }
.baris-lanjut:focus-visible { outline: 3px solid var(--aksen); outline-offset: 2px; border-radius: 8px; }
.tanggal-daftar { font-variant-numeric: tabular-nums; margin-bottom: 0.2rem; }

.daftar-harga { display: grid; gap: 0.5rem; padding: 0; margin: 1rem 0; list-style: none; }
.daftar-harga .harga-kini { font-variant-numeric: tabular-nums; font-weight: 700; }
.daftar-harga .satuan { color: var(--teks-lemah); font-weight: 400; font-size: 0.85em; }

.tampilkan-lain {
  width: 100%;
  min-height: 48px;
  padding: .65rem 1rem;
  border: 1px solid var(--aksen);
  border-radius: var(--sudut);
  background: var(--aksen-lemah);
  color: var(--aksen);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

/* Dua pertanyaan pada layar produk kini dipilih lebih dulu. Keduanya tetap satu URL
   karena hasil angka kandungan membuka perender produk yang sama, tetapi hanya satu
   alat yang berada di alur baca dan urutan fokus pada satu waktu. */
.pemilih-tugas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin: 0 0 1.25rem;
}
.pemilih-tugas button {
  min-height: 64px;
  padding: .7rem .8rem;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--latar-kartu);
  color: var(--teks);
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.pemilih-tugas button span { display: block; margin-top: .15rem; color: var(--teks-lemah); font-size: .78rem; font-weight: 400; }
.pemilih-tugas button[aria-pressed="true"] { border-color: var(--aksen); background: var(--aksen-lemah); color: var(--aksen); }
.pemilih-tugas button:focus-visible { outline: 3px solid var(--aksen); outline-offset: 2px; }

.kelompok-kadar { margin-top: 1.5rem; }
.kelompok-kadar > .kartu { margin-top: .55rem; }
.tampil-semua-kadar { width: 100%; margin-top: .75rem; }

@media (max-width: 34rem) {
  .pemilih-tugas { grid-template-columns: 1fr; }
}

.harga-besar {
  margin: 0.35rem 0 0.2rem;
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.harga-besar .satuan { font-size: 0.42em; font-weight: 400; color: var(--teks-lemah); }

/* Arah perubahan: kata dan tanda segitiga ikut, warna hanya menguatkan.
   Warna sendirian tidak terbaca oleh yang buta warna, jadi ▲/▼ dan katanya
   tetap dicetak. Warnanya mengikuti kelaziman grafik harga — hijau naik,
   merah turun — dan menandai arah, bukan bagus-buruk: naik-turun harga
   dibaca berlawanan oleh pembeli dan penjual. */
.ubah, .ubah-keping { font-variant-numeric: tabular-nums; }
.ubah-jangka { color: var(--teks-lemah); font-size: 0.82em; font-weight: 400; }
.naik { color: var(--aksen); }
.turun { color: var(--bahaya); }
.datar { color: var(--teks-lemah); }

.ubah-baris { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0; }
.ubah-keping {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  min-width: 5.5rem;
}

/* --- Grafik SVG ---
   LABELNYA DI LUAR viewBox, DAN ITU BUKAN SELERA. Sampai 24 Agustus 2026 keempat label
   (dua tahun, dua ujung sumbu harga) adalah <text> di dalam viewBox 720x260 yang diperkecil
   ke lebar layar. Pada ponsel 375 px faktornya 0,476 — `font-size: 12` terbit jadi 6,5 px
   di layar, dan "Rp60.845" muat dalam kotak selebar 26,9 px. Keempatnya satu-satunya angka
   di grafik ini, jadi yang tidak terbaca justru rentang harganya sendiri.

   Penulisnya sudah tahu soal penskalaan — `vector-effect: non-scaling-stroke` di .g-garis
   memang dipasang supaya garisnya tidak ikut menipis. Yang terlewat cuma teksnya.

   Sekarang: yang di dalam viewBox tinggal garis, dan seluruh teks jadi elemen HTML yang
   diletakkan di sekeliling plot lewat padding .grafik-plot. 12 px tetap 12 px di lebar
   mana pun. Posisi mendatarnya dioper JS lewat `--f` (pecahan 0..1 sepanjang sumbu). */
.grafik { margin: 1.1rem 0; }
.grafik-plot {
  --pl: 62px; --pr: 10px; --pt: 12px; --pb: 22px;
  position: relative;
  padding: var(--pt) var(--pr) var(--pb) var(--pl);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--latar-kartu);
}
.grafik-plot svg {
  display: block;
  width: 100%;
  height: clamp(110px, 26vw, 190px);
  overflow: visible;
}
.g-sumbu { stroke: var(--garis); stroke-width: 1; vector-effect: non-scaling-stroke; }
.g-tahun { stroke: var(--garis); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.g-isi { fill: var(--aksen); opacity: 0.09; }
.g-garis { fill: none; stroke: var(--aksen); stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Penanda titik terakhir juga elemen HTML, bukan <circle>. Dengan preserveAspectRatio
   "none" viewBox 720x200 diregangkan ke kotak yang rasionya lain, dan lingkaran di
   dalamnya terbit jadi elips. Di luar viewBox ia bundar di lebar mana pun. */
.g-titik {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--aksen);
  box-shadow: 0 0 0 2px var(--latar-kartu);
  left: calc(100% - var(--pr));
  top: calc(var(--pt) + (100% - var(--pt) - var(--pb)) * var(--fy));
}

.g-label {
  position: absolute;
  font-size: 12px;
  line-height: 1;
  color: var(--teks-lemah);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.g-y { left: 0; width: calc(var(--pl) - 8px); text-align: right; transform: translateY(-50%); }
.g-y-atas { top: var(--pt); }
.g-y-bawah { top: calc(100% - var(--pb)); }
.g-x {
  bottom: 4px;
  left: calc(var(--pl) + (100% - var(--pl) - var(--pr)) * var(--f));
  transform: translateX(-50%);
}
.grafik figcaption { color: var(--teks-lemah); font-size: 0.85rem; margin-top: 0.4rem; }

.kartu.komentar .komentar-teks { margin: 0.4rem 0 0.9rem; }
.atribusi { color: var(--teks-lemah); font-size: 0.82rem; margin-top: 1.5rem; }

/* --- Logo badan di halaman profil --- */
/* Piring netral, dan warnanya SAMA di kedua tema. Logo merek dagang tidak boleh diwarnai
   ulang atau dibalik supaya kontras, jadi yang menyesuaikan latarnya, bukan logonya.
   Diuji pada ketiga puluh sembilan: sepuluh di antaranya bertulisan gelap di latar
   transparan dan namanya hilang sama sekali di tema gelap tanpa piring ini. */
.logo-badan { margin: 0 0 0.9rem; }
.logo-piring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.8rem;
  border-radius: var(--sudut);
  background: #ffffff;
  border: 1px solid var(--garis);
}
.logo-piring img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(15rem, 100%);
  max-height: 4.5rem;
}
.logo-badan figcaption {
  margin-top: 0.45rem;
  color: var(--teks-lemah);
  font-size: 0.83rem;
}
.logo-badan figcaption .sub {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
}

/* --- Gambar kemasan --- */
.kemasan { margin: 0.6rem 0; }
.kemasan img {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--latar);
}
.kemasan figcaption { color: var(--teks-lemah); font-size: 0.85rem; margin-top: 0.4rem; }

.kemasan-lain { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.7rem 0; }
.kemasan-lain img {
  width: 5.5rem;
  height: auto;
  border: 1px solid var(--garis);
  border-radius: 6px;
  background: var(--latar);
}
.kemasan-lain figcaption { color: var(--teks-lemah); font-size: 0.75rem; text-align: center; }

/* Petak kemasan di dalam tabel merek — dipakai kedua tabel merek yang ada, yang per
   OPT + komoditas di jalur 1 dan yang per bahan + kadar di jalur 2. Keduanya
   menyatakan hal yang sama, jadi keduanya berupa sama.
   Ukurannya TETAP dan sama untuk yang bergambar maupun yang belum: nisbah gambar
   `kecil` berselisih (320x320 sampai 320x213), jadi tinggi baris yang mengikuti
   gambarnya akan bergoyang saat satu per satu mendarat. `contain` menahan seluruh
   kemasan tetap terlihat — memangkasnya jadi persegi memotong justru bagian yang
   dicocokkan mata. */
.merek-tautan {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}
/* Dipakai <a> di tabel merek jalur 1 dan <button class="tautan"> di layar bahan
   jalur 2. Yang kedua datang membawa warna aksen dan garis bawah dari `.tautan`;
   keduanya dinetralkan di sini supaya garis bawahnya jatuh pada namanya saja —
   petak kemasan yang ikut tergaris bawah terbaca sebagai gambar yang rusak. */
button.merek-tautan { cursor: pointer; }
.merek-tautan .merek-nama {
  text-decoration: underline;
  text-decoration-color: var(--aksen);
  text-underline-offset: 2px;
}
.merek-tautan:hover .merek-nama,
.merek-tautan:focus-visible .merek-nama { color: var(--aksen); }
.merek-tautan:focus-visible { outline: 3px solid var(--aksen); outline-offset: 2px; }

.merek-kemasan {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 6px;
  background: var(--latar);
  object-fit: contain;
  border: 1px solid var(--garis);
}
/* Yang belum bergambar tetap menempati ruang yang sama. Garis putus-putus dan tanpa
   isi supaya ia terbaca sebagai "belum ada", bukan sebagai kotak yang gagal muat. */
.merek-kemasan-kosong {
  display: inline-block;
  border-style: dashed;
  background: none;
}

/* Petak yang sama, tetapi di dalam sel tabel — daftar pendaftaran di halaman profil badan,
   bukan baris flex seperti di jalur 1.

   Dua hal yang berbeda karena wadahnya tabel. `width: 1%` membuat kolomnya menciut ke lebar
   isinya, sehingga kolom nama dan nomor tetap mendapat ruang; dan `line-height: 0` mencabut
   garis dasar teks, sebab petak setinggi 2,5rem yang duduk di garis dasar menyisakan jarak
   kosong di bawah tiap baris dan membuat tabelnya renggang tanpa sebab yang terlihat. */
.sel-kemasan { width: 1%; line-height: 0; }
.sel-kemasan .merek-kemasan { display: block; }

/* Placeholder. Sengaja BERTULISAN, bukan kotak abu-abu: 14.493 dari 14.920
   produk mendarat di sini, jadi keadaan yang lazim adalah keadaan ini — dan
   kotak kosong yang diam terbaca sebagai "produk ini meragukan". */
.kemasan-kosong {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.6rem 1rem;
  max-width: 22rem;
  border: 1px dashed var(--garis);
  border-radius: var(--sudut);
  background: var(--latar);
  text-align: center;
}
.kemasan-ikon svg { fill: none; stroke: var(--teks-lemah); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: 0.65; }
.kemasan-kosong-judul { margin: 0; color: var(--teks-lemah); font-weight: 600; }

/* --- Formulir usul gambar --- */
.usul-gambar { margin-top: 1rem; border-top: 1px solid var(--garis); padding-top: 0.8rem; }
.usul-gambar > summary { cursor: pointer; font-weight: 600; color: var(--aksen); }
.usul-isi { margin-top: 0.8rem; display: grid; gap: 0.35rem; }
.usul-isi label { font-weight: 600; font-size: 0.9rem; margin-top: 0.5rem; }
.usul-isi input,
.usul-isi select,
.usul-isi textarea {
  width: 100%;
  padding: 0.55rem 0.65rem;
  font: inherit;
  color: var(--teks);
  background: var(--latar);
  border: 1px solid var(--garis);
  border-radius: 8px;
}
.usul-isi input:focus-visible,
.usul-isi select:focus-visible,
.usul-isi textarea:focus-visible { outline: 2px solid var(--aksen); outline-offset: 1px; }
.aksi-usul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.usul-kabar { color: var(--aksen); font-size: 0.88rem; min-height: 1.2em; }
.usul-pratinjau {
  max-height: 14rem;
  overflow: auto;
  padding: 0.7rem;
  font-size: 0.78rem;
  background: var(--latar);
  border: 1px solid var(--garis);
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Dua pemeriksaan berdampingan di kartu komentar harga.
   Yang BELUM terpenuhi digambar sama besar dan sama tegas dengan yang sudah — bukan
   dipucatkan. Kartu yang menampilkan satu centang hijau lalu membisikkan sisanya akan
   berbohong tanpa satu kata pun yang salah. */
.periksa-daftar {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  margin: 0.9rem 0;
  list-style: none;
}
.periksa-daftar li {
  display: flex;
  gap: 0.6rem;
  align-items: start;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--latar);
}
.periksa-tanda {
  flex: 0 0 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}
.periksa-lolos { border-color: var(--aksen); }
.periksa-lolos .periksa-tanda { background: var(--aksen-lemah); color: var(--aksen); }
.periksa-gagal { border-color: var(--bahaya); background: var(--bahaya-lemah); }
.periksa-gagal .periksa-tanda { background: var(--bahaya); color: var(--latar-kartu); }
.periksa-belum { border-color: var(--awas); }
.periksa-belum .periksa-tanda { background: var(--awas-lemah); color: var(--awas); }
.periksa-isi { display: block; margin-top: 0.15rem; color: var(--teks-lemah); font-size: 0.88rem; }

/* Yang di luar lingkup pertanian: disembunyikan dari daftar, TIDAK disembunyikan dari
   pembaca. Cacah dan daftarnya ada di balik satu ketukan, supaya angka di layar tetap
   bisa direkonsiliasi dengan angka di dokumen. */
.luar-lingkup {
  margin: 0.6rem 0 1rem;
  padding: 0.6rem 0.85rem;
  border: 1px dashed var(--garis);
  border-radius: var(--sudut);
}
.luar-lingkup > summary { cursor: pointer; color: var(--teks-lemah); font-size: 0.9rem; }
.luar-lingkup .catatan:last-child { color: var(--teks-lemah); font-size: 0.82rem; }

/* Cakupan hukum sebuah harga yang DITETAPKAN: siapa yang dinaungi, dan siapa yang tidak.
   Diberi rupa peringatan, bukan catatan kaki, karena pembaca yang berada di luar cakupannya
   akan menyimpulkan angka itu miliknya kalau kalimatnya tidak menghentikannya. */
.cakupan-hukum {
  margin: 0.9rem 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--awas);
  border-left-width: 4px;
  border-radius: var(--sudut);
  background: var(--awas-lemah);
}
.cakupan-hukum > strong { display: block; margin-bottom: 0.25rem; }
.cakupan-hukum p { margin: 0; font-size: 0.9rem; }

.lencana-pekebun { background: var(--aksen-lemah); color: var(--aksen); font-weight: 600; }

/* Bilah perbandingan di tabel pita umur. Bukan grafik — hanya panjang relatif, supaya mata
   menangkap bentuk sebaran umur tanpa harus membaca tiga belas angka berurutan.

   NAMANYA `.bilah-isi`, BUKAN `.bilah`, dan itu memperbaiki tabrakan yang sempat mematikan
   satu visual. `.bilah` sudah dipakai jalur 3 sebagai KONTAINER berisi `<span>` yang
   panjangnya disetel `width`; aturan ini menyetel `width: var(--isi)` pada elemennya
   sendiri. Karena ia datang belakangan di berkas yang sama, ia menang kaskade — dan div
   jalur 3 yang tidak pernah menyetel `--isi` runtuh jadi sepihan 2 px, sehingga bilah
   pembanding "yang kamu bayar vs HET bersubsidi" — inti jalur 3 — tidak terlihat sama
   sekali. Komentar di cangkang.js sudah memperingatkan nama itu terpakai; peringatannya
   yang terlewat, bukan tidak ada. */
.bilah-isi {
  display: block;
  height: 0.55rem;
  width: var(--isi, 0%);
  min-width: 2px;
  border-radius: 999px;
  background: var(--aksen);
  opacity: 0.75;
}

/* ------------------------------------------------------------ B2 keselamatan */

/* ---------------------------------------------------------------------------
   Gambar OPT — menempel pada kalimat yang diperlihatkannya
   ---------------------------------------------------------------------------
   Lebarnya ditahan di 24rem dan TIDAK dibuat selebar kartunya. Gambar gejala yang
   memenuhi layar terbaca sebagai jawaban; yang dimaksud di sini pembanding — sesuatu
   untuk ditaruh di sebelah daun yang sedang dipegang, lalu dicocokkan. Ukuran yang
   sederajat dengan paragrafnya menjaga bacaannya tetap begitu.

   `aspect-ratio` sengaja tidak dipatok. Gambar ilmiah datang dengan bentuk apa saja —
   pelat berpanel yang lebar, mikrograf yang nyaris bujur sangkar — dan memaksanya ke
   satu rasio berarti memotong justru bagian yang jadi alasan gambar itu dipilih. */

/* GAMBAR DAN TAKARIRNYA BERSEBELAHAN, BUKAN BERTUMPUK.
   Foto tegak yang lebarnya ditahan 15rem meninggalkan lahan kosong selebar dua pertiga
   kartu di sebelahnya, dan takarirnya — yang justru panjang, karena memuat apa yang
   terlihat DITAMBAH baris kredit yang wajib ikut — dipaksa mengalir di lajur 15rem itu
   sampai patah tiap tiga kata. Menaruhnya di samping menyelesaikan keduanya sekaligus.
   `flex-wrap` membuatnya menumpuk sendiri di layar telepon, tanpa titik putus yang
   perlu ditebak. */
.gambar-opt {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .45rem .95rem;
  margin: .8rem 0;
  max-width: 42rem;
}

/* TINGGINYA DIBATASI LEWAT LEBAR FIGURNYA, BUKAN LEWAT `max-height` PADA GAMBARNYA.
   Foto lapangan 900×1200 pada lebar 24rem menjadi 512 px tinggi dan mendorong butir
   pemeriksaan berikutnya keluar layar telepon — padahal yang dibaca justru URUTAN
   pemeriksaannya. Godaannya memasang `max-height` dan `width: auto`, dan itu memasang
   jebakan: gambar yang BELUM termuat tidak punya lebar intrinsik, `width: auto`
   menciutkannya ke nol, dan gambar setinggi nol tidak pernah dianggap masuk viewport
   sehingga `loading="lazy"` tidak pernah memicunya. Nol tetap nol, selamanya.

   Jadi rasionya dihitung saat merender — penyaji menyempitkan `max-width` figur tegak
   sampai tinggi hasilnya jatuh di bawah batas — dan gambarnya cukup `width: 100%`.
   Ruangnya dipesan sebelum bit pertamanya datang, tata letak tidak melompat, dan
   pemuatan malas tetap bekerja. */
.gambar-opt img {
  flex: 0 0 auto;
  display: block;
  width: min(100%, var(--lebar-gambar, 21rem));
  height: auto;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--latar);
}

/* `flex: 1 1 15rem` — ikut melebar mengisi sisa ruang, tetapi turun ke bawah gambar
   begitu sisanya kurang dari 15rem. Itu titik di mana takarir bersebelahan mulai
   patah-patah, dan lebih baik turun daripada menyempit. */
.gambar-opt figcaption {
  flex: 1 1 15rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .82rem;
  color: var(--teks-lemah);
}
.gambar-opt .tunjuk { color: var(--teks); }

/* Kredit dikecilkan tetapi TIDAK dipudarkan sampai hilang: ia syarat lisensi, bukan
   keterangan tambahan. Yang tidak terbaca sama saja dengan yang tidak ada. */
.gambar-opt .kredit { font-size: .76rem; color: var(--teks-lemah); }

/* Yang identifikasinya cuma klaim pengunggah diberi tanda yang terlihat, bukan catatan
   kaki. Gambar semacam ini sah untuk "kenali kelompoknya" dan menyesatkan untuk "ini
   spesiesnya" — dan pembaca tidak bisa membedakan keduanya dari rupa fotonya. */
.gambar-opt.ragu img { border-style: dashed; }
.gambar-opt .ragu-nota { color: var(--teks); font-style: italic; }

.gambar-strip { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--garis); }
.gambar-strip .strip-l {
  margin: 0 0 .5rem;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teks-lemah);
}
.gambar-strip .strip-isi { display: flex; flex-wrap: wrap; gap: .9rem; }
/* Di strip, figurnya kembali menumpuk: yang dijajarkan justru gambar-gambarnya satu
   sama lain, jadi takarir di samping akan memutus jajaran itu. */
.gambar-strip .gambar-opt { margin: 0; max-width: 13rem; flex-direction: column; }
.gambar-strip .gambar-opt img { width: 100%; }
.gambar-strip .gambar-opt figcaption { flex: 0 1 auto; }
.gambar-strip .gambar-opt .tunjuk { font-size: .78rem; }

/* Di dalam butir pemeriksaan, gambarnya menjorok sedikit supaya terbaca sebagai milik
   butir itu — bukan sebagai gambar berikutnya yang kebetulan menyusul. */
.periksa .gambar-opt { margin: .55rem 0 .2rem; max-width: 38rem; }