/* ============================================================
   SCAFOLYA — KOMPONEN KHAS PRODUK
   Kotak isian, pilihan berstatus, toolbar simbol, stepper tahap,
   kartu soal, kartu petunjuk, kartu aktivitas, aksi akhir,
   indikator penyimpanan, status, toast.
   ------------------------------------------------------------
   Kosakata terkunci: "Belum diperiksa" / "Tepat" / "Belum tepat"
   (DEC-041), "Tersimpan otomatis" (DEC-040), label CTA DEC-039.
   Semua status disampaikan lewat warna + ikon + teks.
   ============================================================ */

/* ---------- 1. STATUS (pil berikon) ------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-muted);
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  max-width: 100%;
  flex-shrink: 0;          /* dalam baris flex: pindah baris, jangan menyusut */
  text-wrap: pretty;
}

.status .icon { font-size: 1.1em; align-self: flex-start; margin-top: 0.2em; }

.status-lg {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  white-space: normal;
}

.status[data-status="tepat"],
.status[data-status="selesai"],
.status[data-status="semua-selesai"],
.status[data-status="tahap-selesai"],
.status[data-status="dikumpulkan"] {
  background-color: var(--color-tepat-soft);
  border-color: var(--color-tepat-border);
  color: var(--color-tepat-text);
}

.status[data-status="belum-tepat"],
.status[data-status="belum-lengkap"] {
  background-color: var(--color-belum-tepat-soft);
  border-color: var(--color-belum-tepat-border);
  color: var(--color-belum-tepat-text);
}

.status[data-status="belum-diperiksa"],
.status[data-status="belum-dimulai"],
.status[data-status="hanya-dilihat"] {
  background-color: var(--color-belum-diperiksa-soft);
  border-color: var(--color-belum-diperiksa-border);
  color: var(--color-belum-diperiksa-text);
}

.status[data-status="memeriksa"],
.status[data-status="aktif"],
.status[data-status="siap-dikumpulkan"],
.status[data-status="info"] {
  background-color: var(--color-primary-softer);
  border-color: var(--color-primary-border);
  color: var(--color-primary-text);
}

.status[data-status="terkunci"] {
  background-color: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.status[data-status="galat"] {
  background-color: var(--color-danger-soft);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

.status[data-status="memeriksa"] .icon {
  animation: sf-spin var(--dur-slower) linear infinite;
}

/* Status yang baru berubah "muncul" sekali (dipasang JS lewat .is-baru) */
.status.is-baru { animation: sf-pop var(--dur-slow) var(--ease-spring); }

/* ---------- 2. INDIKATOR PENYIMPANAN & KONEKSI (G-04) ------- */

.simpan {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height-sm);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  transition: var(--transition-colors);
}

.simpan .icon { font-size: 1.15em; }

.simpan[data-state="tersimpan"] { color: var(--color-tepat-text); }
.simpan[data-state="menyimpan"] { color: var(--color-primary-text); }
.simpan[data-state="menyimpan"] .icon { animation: sf-spin var(--dur-slower) linear infinite; }

.simpan[data-state="belum-tersambung"],
.simpan[data-state="gagal"] {
  background-color: var(--color-warning-soft);
  border: var(--border-thin) solid var(--color-warning-border);
  color: var(--color-warning-text);
}

.simpan[data-state="gagal"] {
  background-color: var(--color-danger-soft);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

.simpan[data-state="pulih"] {
  background-color: var(--color-success-soft);
  border: var(--border-thin) solid var(--color-success-border);
  color: var(--color-success-text);
}

/* ---------- 3. PENANDA POSISI (G-02) ------------------------ */

.posisi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.posisi li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.posisi li + li::before {
  content: "";
  width: var(--space-1);
  height: var(--space-1);
  border-radius: var(--radius-circle);
  background-color: var(--color-text-subtle);
}

.posisi [aria-current] { color: var(--color-primary-text); }

/* ---------- 4. STEPPER TAHAP (G-03) ------------------------- */
/* Empat tahap Polya sebagai lingkaran bernomor bersambung garis.
   Tahap aktif berwarna sesuai warna tahapnya; selesai = hijau
   centang; terkunci = gembok dan tidak bisa diklik. */

.stepper {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.stepper-langkah {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
}

.stepper-langkah + .stepper-langkah {
  flex: 1 0 auto;
}

.stepper-langkah + .stepper-langkah::before {
  content: "";
  flex: 1 0 var(--space-6);
  min-width: var(--space-4);
  height: var(--border-base);
  background-color: var(--color-border-strong);
  margin-top: calc(var(--icon-tile-md) / 2);
  border-radius: var(--radius-pill);
}

.stepper-langkah.is-selesai + .stepper-langkah::before {
  background-color: var(--color-success);
}

.stepper-tautan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 4.5rem;
  padding-inline: var(--space-1);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease-out);
}

.stepper-tautan:focus-visible { outline: none; }
.stepper-tautan:focus-visible .stepper-nomor { box-shadow: var(--shadow-focus); }

a.stepper-tautan:active { transform: scale(var(--press-scale)); }

@media (hover: hover) {
  a.stepper-tautan:hover .stepper-nomor {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
  }
}

.stepper-nomor {
  display: grid;
  place-items: center;
  width: var(--icon-tile-md);
  height: var(--icon-tile-md);
  border-radius: var(--radius-circle);
  border: var(--border-base) solid var(--color-border-control);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1;
  transition: var(--transition-colors);
}

.stepper-nomor .icon { font-size: var(--fs-lg); }

.stepper-label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-align: center;
  line-height: var(--lh-snug);
}

.stepper-langkah.is-aktif .stepper-nomor {
  background-color: var(--tahap-warna, var(--color-primary));
  border-color: var(--tahap-warna, var(--color-primary));
  color: var(--color-on-primary);
  box-shadow: var(--shadow-md);
}

.stepper-langkah.is-aktif .stepper-label {
  color: var(--tahap-teks, var(--color-primary-text));
  font-weight: var(--fw-bold);
}

.stepper-langkah.is-selesai .stepper-nomor {
  background-color: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success-text);
}

.stepper-langkah.is-terkunci .stepper-nomor {
  background-color: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-subtle);
}

.stepper-langkah.is-terkunci .stepper-label { color: var(--color-text-muted); }

.stepper-langkah[data-tahap="1"] { --tahap-warna: var(--tahap-1); --tahap-teks: var(--tahap-1-text); }
.stepper-langkah[data-tahap="2"] { --tahap-warna: var(--tahap-2); --tahap-teks: var(--tahap-2-text); }
.stepper-langkah[data-tahap="3"] { --tahap-warna: var(--tahap-3); --tahap-teks: var(--tahap-3-text); }
.stepper-langkah[data-tahap="4"] { --tahap-warna: var(--tahap-4); --tahap-teks: var(--tahap-4-text); }

/* Layar sempit (< 36rem / 576 px): lingkaran nomor kecil, langkah lebih rapat.
   Terukur (audit luber): pada 360 px, min-width 4.5rem + penghubung 1.5rem
   melampaui wadah 10 px; padding-inline 0 dan penghubung minimum 0.5rem
   menyisakan ruang cukup sampai 360 px. */
@media (max-width: 35.99rem) {
  .stepper-nomor {
    width: var(--icon-tile-sm);
    height: var(--icon-tile-sm);
    font-size: var(--fs-sm);
  }
  .stepper-langkah + .stepper-langkah::before {
    margin-top: calc(var(--icon-tile-sm) / 2);
    flex-basis: var(--space-3);
    min-width: var(--space-2);
  }
  .stepper-tautan {
    min-width: 3.5rem;
    padding-inline: 0;
  }
  .stepper-label { font-size: var(--fs-2xs); }
}

/* Layar sangat sempit (< 22rem / 352 px) atau wadah sempit (kotak peraga 320 px):
   lebar langkah mengikuti lingkaran nomornya, penghubung minimum 0.25rem,
   sehingga empat tahap tetap satu baris di wadah 240 px. */
@media (max-width: 21.99rem) {
  .stepper-tautan { min-width: var(--icon-tile-sm); }
  .stepper-langkah + .stepper-langkah::before {
    flex-basis: var(--space-2);
    min-width: var(--space-1);
  }
}

/* Label tahap (chip berwarna tahap) */
.tahap-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  width: fit-content;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--tahap-soft, var(--color-primary-softer));
  color: var(--tahap-teks, var(--color-primary-text));
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.tahap-label::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-circle);
  background-color: var(--tahap-warna, var(--color-primary));
}

.tahap-label[data-tahap="1"] { --tahap-warna: var(--tahap-1); --tahap-soft: var(--tahap-1-soft); --tahap-teks: var(--tahap-1-text); }
.tahap-label[data-tahap="2"] { --tahap-warna: var(--tahap-2); --tahap-soft: var(--tahap-2-soft); --tahap-teks: var(--tahap-2-text); }
.tahap-label[data-tahap="3"] { --tahap-warna: var(--tahap-3); --tahap-soft: var(--tahap-3-soft); --tahap-teks: var(--tahap-3-text); }
.tahap-label[data-tahap="4"] { --tahap-warna: var(--tahap-4); --tahap-soft: var(--tahap-4-soft); --tahap-teks: var(--tahap-4-text); }

/* ---------- 5. KARTU SOAL (G-07) ---------------------------- */

.kartu-soal .card-body { gap: var(--space-4); }

.kartu-soal-jenis {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-primary-text);
}

.kartu-soal-jenis::before {
  content: "";
  width: var(--space-6);
  height: var(--border-thick);
  border-radius: var(--radius-pill);
  background-color: var(--color-secondary);
}

.kartu-soal-judul {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
}

.kartu-soal-teks {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
  /* Soal yang ditulis beberapa alinea, dan pertanyaan berbutir a dan b, tetap berbaris sendiri. */
  white-space: pre-line;
}

.kartu-soal-tanya {
  white-space: pre-line;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--color-primary-softer);
  border: var(--border-thin) solid var(--color-primary-border);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-primary-text);
}

.kartu-soal-ilustrasi {
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface-sunken);
}

.kartu-soal-ilustrasi img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pengganti ilustrasi sebelum aset final tersedia (Q-23) */
.ilustrasi-pengganti {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  min-height: 9rem;
  padding: var(--space-6);
  border: var(--border-base) dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  text-align: center;
}

.ilustrasi-pengganti .icon {
  font-size: var(--icon-tile-md);
  color: var(--color-text-subtle);
}

@media (max-width: 63.99rem) {
  .ilustrasi-pengganti { max-height: 220px; min-height: 6rem; }
}

/* ---------- 6. BUTIR (satu pertanyaan bernomor) ------------- */

.butir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  align-items: start;
}

.butir + .butir,
/* Butir berjalur di wadah cabang (KS-11) dan butir sesudahnya berjarak dan bergaris pemisah sama seperti butir
   bersebelahan, supaya nomor 4, 5, dan 6 tidak berdempet dan cincin sorotnya tidak bertumpuk. */
.butir + .cabang-wadah > .butir:first-child,
.cabang-wadah + .butir {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-thin) solid var(--color-border-subtle);
}

.butir-nomor {
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: var(--icon-tile-sm);
  height: var(--icon-tile-sm);
  border-radius: var(--radius-circle);
  border: var(--border-base) solid var(--color-border-control);
  background-color: var(--color-surface-alt);
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  transition: var(--transition-colors);
}

/* Status guru (Detail siswa): latar lembut dan angka berwarna, sama dengan lingkar nomor siswa (bagian 22). Angka putih di
   atas warna status hanya sekitar 2,6:1 dan 1,9:1 di tema gelap, dan 4,3:1 untuk belum tepat di tema terang. */
.butir[data-status="tepat"] .butir-nomor {
  background-color: var(--color-tepat-soft);
  border-color: var(--color-tepat);
  color: var(--color-tepat-text);
}

.butir[data-status="belum-tepat"] .butir-nomor {
  background-color: var(--color-belum-tepat-soft);
  border-color: var(--color-belum-tepat);
  color: var(--color-belum-tepat-text);
}

.butir-isi {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.butir-isi > p { margin: 0; }

.butir-wajib {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.butir-aksi {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* ---------- 7. KALIMAT RUMPANG & KOTAK ISIAN (K-01) --------- */

/* Baris kalimat rumpang: tinggi baris normal, jarak antar baris diberikan oleh
   margin vertikal kotak (margin inline-block ikut menentukan tinggi line box),
   sehingga kotak di dua baris tidak pernah bersinggungan. */
.rumpang {
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

.kotak {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0.35em 0.2em;
  max-width: 100%;
}

.kotak-input {
  width: var(--kotak-lebar);
  max-width: 100%;
  min-height: var(--control-height-sm);
  padding: 0.25em 0.55em;
  border: var(--border-base) solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1em;
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: var(--transition-colors);
}

.kotak-besar .kotak-input { width: var(--kotak-lebar-besar); }

.kotak-input::placeholder {
  color: var(--color-text-subtle);
  font-weight: var(--fw-regular);
}

@media (hover: hover) {
  .kotak-input:hover { border-color: var(--color-text-muted); }
}

.kotak-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.kotak-input:disabled,
.kotak-input[readonly] {
  background-color: var(--color-surface-alt);
  border-style: dashed;
  color: var(--color-text-secondary);
  cursor: default;
}

/* Pecahan bertumpuk (DEC-092): tampilan jawaban "3/4" sebagai pembilang di atas garis dan penyebut
   di bawahnya. Dipakai di layar hanya-baca, lembar jawaban, dan sebagai lapisan di atas kotak isian
   yang sedang tidak diketik. Nilai yang tersimpan tetap teks biasa. */
.pecahan {
  display: inline-grid;
  justify-items: center;
  vertical-align: middle;
  margin-inline: 0.14em;
  font-size: 0.86em;
  line-height: 1.06;
  font-variant-numeric: tabular-nums;
}

.pecahan-atas {
  border-bottom: 0.09em solid currentColor;
  padding-inline: 0.18em;
}

.pecahan-bawah { padding-inline: 0.18em; }

/* Lapisan pecahan di atas kotak isian: tulisan asli disembunyikan hanya selagi kotak tidak difokuskan,
   dan lapisan tidak menerima ketukan sehingga mengetuk kotak tetap membuka papan ketik. */
.pecahan-lapis {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.kotak.pecahan-tampil .kotak-input { color: transparent; }
.kotak[data-status="tepat"].pecahan-tampil .pecahan-lapis { color: var(--color-tepat-text); }
.kotak[data-status="belum-tepat"].pecahan-tampil .pecahan-lapis { color: var(--color-belum-tepat-text); }

/* Ikon status menempel di sudut kanan atas kotak */
.kotak-ikon {
  position: absolute;
  top: -0.55em;
  right: -0.55em;
  display: none;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: var(--radius-circle);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-sm);
  line-height: 1;
  pointer-events: none;
}

.kotak[data-status] .kotak-ikon { display: grid; animation: sf-pop var(--dur-slow) var(--ease-spring); }

.kotak[data-status="tepat"] .kotak-input {
  border-color: var(--color-tepat);
  background-color: var(--color-tepat-soft);
  color: var(--color-tepat-text);
}
.kotak[data-status="tepat"] .kotak-ikon { color: var(--color-tepat); }

.kotak[data-status="belum-tepat"] .kotak-input {
  border-color: var(--color-belum-tepat);
  background-color: var(--color-belum-tepat-soft);
  color: var(--color-belum-tepat-text);
  animation: sf-guncang var(--dur-base) var(--ease-out);
}
.kotak[data-status="belum-tepat"] .kotak-ikon { color: var(--color-belum-tepat); }

.kotak[data-status="memeriksa"] .kotak-input { border-color: var(--color-primary-border); }
.kotak[data-status="memeriksa"] .kotak-ikon { color: var(--color-primary); }
.kotak[data-status="memeriksa"] .kotak-ikon .icon { animation: sf-spin var(--dur-slower) linear infinite; }

/* Kotak isian tanpa status khusus = Belum diperiksa (DEC-041) */
.kotak[data-status="belum-diperiksa"] .kotak-input { border-color: var(--color-border-control); }
.kotak[data-status="belum-diperiksa"] .kotak-ikon { display: none; }

/* ---------- 8. PILIHAN JAWABAN TUNGGAL (K-02) --------------- */

.pilihan {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

.pilihan-legenda {
  padding: 0;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.pilihan-daftar {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .pilihan-daftar-dua { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pilihan-opsi {
  position: relative;
  padding-right: var(--space-12);
  font-family: var(--font-body);
  font-size: var(--fs-base);
}

.pilihan-mark {
  position: absolute;
  right: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-lg);
  line-height: 1;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.pilihan[data-status="tepat"] .pilihan-opsi:has(.control-input:checked) {
  border-color: var(--color-tepat);
  background-color: var(--color-tepat-soft);
  color: var(--color-tepat-text);
}

.pilihan[data-status="tepat"] .pilihan-opsi:has(.control-input:checked) .control-box {
  background-color: var(--color-tepat);
  border-color: var(--color-tepat);
}

.pilihan[data-status="tepat"] .pilihan-opsi:has(.control-input:checked) .pilihan-mark {
  opacity: 1;
  color: var(--color-tepat);
}

.pilihan[data-status="belum-tepat"] .pilihan-opsi:has(.control-input:checked) {
  border-color: var(--color-belum-tepat);
  background-color: var(--color-belum-tepat-soft);
  color: var(--color-belum-tepat-text);
}

.pilihan[data-status="belum-tepat"] .pilihan-opsi:has(.control-input:checked) .control-box {
  background-color: var(--color-belum-tepat);
  border-color: var(--color-belum-tepat);
}

.pilihan[data-status="belum-tepat"] .pilihan-opsi:has(.control-input:checked) .pilihan-mark {
  opacity: 1;
  color: var(--color-belum-tepat);
}

.pilihan[data-status] .pilihan-mark .icon {
  animation: sf-pop var(--dur-slow) var(--ease-spring);
}

.pilihan-opsi:has(.control-input:disabled) {
  cursor: default;
  opacity: 0.85;
}

/* ---------- 9. URAIAN, AREA BESAR, TOOLBAR (K-03, K-04, G-06) */

.uraian {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.uraian .textarea {
  min-height: 7rem;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  field-sizing: content;
}

.area-besar .textarea {
  min-height: 12rem;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--glass-chrome-strong);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .toolbar {
    -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    background-color: var(--glass-chrome);
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--shadow-glass);
  }
}

.toolbar-judul {
  padding-inline: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.toolbar-tombol {
  display: inline-grid;
  place-items: center;
  min-width: var(--toolbar-tombol);
  height: var(--toolbar-tombol);
  padding-inline: var(--space-3);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-primary-text);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .toolbar-tombol:hover {
    border-color: var(--color-primary-border);
    background-color: var(--color-primary-softer);
  }
}

.toolbar-tombol:active { transform: scale(var(--press-scale)); }

.toolbar-tombol:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.toolbar-tombol:disabled {
  background-color: var(--color-disabled-bg);
  border-color: var(--color-disabled-border);
  color: var(--color-disabled-text);
  cursor: not-allowed;
  transform: none;
}

/* Glyph pecahan a/b bertumpuk */
.toolbar-pecahan {
  display: inline-grid;
  justify-items: center;
  font-size: var(--fs-2xs);
  line-height: 1.05;
}

.toolbar-pecahan i {
  font-style: normal;
}

.toolbar-pecahan i:first-child {
  border-bottom: var(--border-thin) solid currentColor;
  padding-inline: 0.2em;
}

/* ---------- 9b. TABEL ISIAN & TABEL KOSONG (K-07, DEC-178) --- */

.tabel-pengantar {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
}

.tabel-isian {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

/* Tabel terakhir di dalam satu butir tidak perlu jarak bawah lagi: butirnya sudah berjarak sendiri. */
.butir-isi > .tabel-isian:last-child { margin-bottom: 0; }

.tabel-isian-judul {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary-text);
}

/* Tabel selalu muat di ponsel: yang menggulir hanya tabelnya, bukan halamannya. Batang gulirnya
   bergaya kaca dari components.css bagian 26, jadi di sini tidak memasang scrollbar-width (DEC-179). */
.tabel-gulir {
  overflow-x: auto;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.tabel-jawab {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.tabel-jawab th,
.tabel-jawab td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-thin) solid var(--color-border);
  border-right: var(--border-thin) solid var(--color-border);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.tabel-jawab th:last-child,
.tabel-jawab td:last-child { border-right: 0; }
.tabel-jawab tbody tr:last-child td { border-bottom: 0; }

.tabel-jawab th {
  background-color: var(--color-surface-sunken);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-primary-text);
}

/* Kolom pertama memuat nama baris, jadi ia rata kiri dan boleh melipat. */
.tabel-jawab td:first-child {
  text-align: left;
  white-space: normal;
  font-weight: var(--fw-semibold);
}

.tabel-sel-operasi {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-secondary-text, var(--color-primary-text));
}

.tabel-sel-isian {
  background-color: var(--color-surface-sunken);
  white-space: nowrap;
}

.tabel-sel-isian .kotak { margin: 0; }

/* Kotak rupiah di tabel (DEC-192) memuat nominal sampai ratusan ribu, misalnya 120.000, tanpa terpotong. Isi yang
   lebih panjang, misalnya bila siswa menambahkan Rp atau ,00, dilebarkan ui.js mengikuti isinya. */
.tabel-sel-isian:has(.tabel-sel-awalan) .kotak-input { width: var(--kotak-lebar-besar); }

.tabel-sel-awalan {
  margin-right: 0.25em;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
}

.tabel-bebas {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: var(--border-thin) dashed var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
}

.tabel-bebas-kepala {
  display: grid;
  gap: var(--space-1);
}

.tabel-bebas-keterangan {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.tabel-bebas .tabel-isian { margin: 0 0 var(--space-3); }
.tabel-bebas .tabel-isian:last-child { margin-bottom: 0; }

.tabel-jawab-bebas td,
.tabel-jawab-bebas td:first-child {
  padding: 0;
  text-align: center;
  white-space: nowrap;
  font-weight: var(--fw-normal);
}

.tabel-sel-input {
  width: 100%;
  min-width: 5.5rem;
  min-height: var(--control-height-sm);
  padding: 0.25em 0.55em;
  border: 0;
  background-color: transparent;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tabel-sel-input:focus-visible {
  outline: var(--border-base) solid var(--color-focus, var(--color-primary));
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.tabel-bebas-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tabel-bebas-baca { display: grid; gap: var(--space-2); }
.tabel-bebas-baca .tabel-isian { margin: 0; }

/* Papan Ide (revisi validasi ahli D-3): kanvas gambar di tahap 2 dan 3 Aktivitas 2 dan 3. Bidang gambarnya selalu putih
   seperti kertas, juga di tema gelap, supaya gambar tampak sama dengan di dashboard dan lembar jawaban. Tombol pena
   berukuran 44 piksel supaya mudah ditekan dengan jari. */
.papan-ide {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: var(--border-thin) dashed var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
}

.papan-ide-kepala { display: grid; gap: var(--space-1); }

.papan-ide-judul {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.papan-ide-judul .icon { width: 1.25em; height: 1.25em; color: var(--color-primary); }

.papan-ide-keterangan {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.papan-ide-alat,
.papan-ide-pilih,
.papan-ide-aksi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.papan-ide-alat { justify-content: space-between; }

.papan-ide-pena {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--border-base) solid var(--color-border);
  border-radius: var(--radius-circle);
  background-color: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.papan-ide-titik {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-circle);
  background-color: var(--warna-pena);
}

.papan-ide-pena[aria-pressed="true"] {
  border-color: var(--warna-pena);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warna-pena) 28%, transparent);
}

.papan-ide-pena:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset, 2px);
}

.papan-ide-hapus[aria-pressed="true"] {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-text);
}

.papan-ide-bidang {
  overflow: hidden;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: #ffffff;
  background-image: radial-gradient(circle, #d3d9e3 1px, transparent 1.3px);
  background-size: 20px 20px;
}

.papan-ide-kanvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  touch-action: none;
  cursor: crosshair;
}

.papan-ide[data-alat-aktif="h"] .papan-ide-kanvas { cursor: cell; }

.papan-ide-penuh {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-warning-text);
}

.papan-ide-baca { display: grid; gap: var(--space-2); margin-top: var(--space-4); }

.papan-ide-gambar {
  max-width: 40rem;
  overflow: hidden;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: #ffffff;
}

.papan-svg { display: block; width: 100%; height: auto; }

/* Papan Ide yang sempit, di ponsel maupun di kolom jawaban yang sempit: ketiga pena dan penghapus tetap satu baris, dan
   Urungkan serta Hapus semua di baris kedua. Diukur dari lebar Papan Ide sendiri (kueri kontainer), bukan lebar layar. */
.papan-ide { container-type: inline-size; }

@media (max-width: 35.99rem) {
  .papan-ide { padding: var(--space-3); }
}

@container (max-width: 24rem) {
  .papan-ide-pilih,
  .papan-ide-aksi { gap: var(--space-1); }
  .papan-ide-pena { width: 2.5rem; height: 2.5rem; }
  .papan-ide-alat .btn-sm { padding-inline: var(--space-3); }
}

/* Di ponsel, kolom Operasi tidak boleh terdorong keluar layar: tanda operasinya bagian bantuan
   Aktivitas 1, jadi tabel dirapatkan dan judul kolomnya boleh melipat sampai ketiga kolomnya muat.
   .tabel-gulir tetap menjadi jaring pengaman untuk tabel yang lebih lebar dari itu. Batasnya sama dengan
   titik ubah ponsel lain di situs ini (36rem); pada batas lama 30rem, tabel data Aktivitas 2 masih
   15 sampai 27 piksel terlalu lebar di layar 481 sampai 515 piksel sehingga kolom pertamanya tergulir. */
@media (max-width: 35.99rem) {
  .tabel-jawab { font-size: var(--fs-xs); }

  .tabel-jawab th,
  .tabel-jawab td {
    padding: var(--space-2) var(--space-1);
    white-space: normal;
  }

  /* Kotak cacah cukup dua sampai tiga angka, sedangkan kotak rupiah perlu tujuh karakter (120.000, DEC-192).
     Hanya kotak berawalan Rp yang dilebarkan, supaya tabel berkolom empat tetap muat; isi yang lebih panjang
     dilebarkan ui.js. */
  .tabel-sel-isian .kotak-input,
  .tabel-sel-isian .kotak-besar .kotak-input {
    width: 4ch;
    padding-inline: 0.3em;
  }

  .tabel-sel-isian:has(.tabel-sel-awalan) .kotak-input { width: 8ch; }

  .tabel-sel-awalan { margin-right: 0.1em; }

  .tabel-sel-input { min-width: 3.5rem; }

  /* K-43: tabel rasio Aktivitas 1 berkolom empat sejak tanda operasi dan angkanya dipisah ke kolom Operasi dan Angka.
     Kedua kolom itu selebar judulnya, jadi jarak mendatar sel dan huruf judul kolomnya dirapatkan lagi supaya tabel tetap
     muat di layar 360 piksel tanpa menyempitkan kotak rupiah (DEC-192). */
  .tabel-jawab-rapat th,
  .tabel-jawab-rapat td { padding-inline: calc(var(--space-1) / 2); }

  .tabel-jawab-rapat th { font-size: var(--fs-2xs); }
}

/* ---------- 10. KARTU PETUNJUK (D-01) ----------------------- */

.petunjuk {
  border: var(--border-thin) solid var(--color-petunjuk-border);
  border-radius: var(--radius-md);
  background-color: var(--color-petunjuk-soft);
  overflow: hidden;
  max-width: 100%;
}

.petunjuk-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-height-md);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-petunjuk-text);
  text-align: left;
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .petunjuk-trigger:hover { background-color: var(--color-petunjuk-ikon); }
}

.petunjuk-trigger:focus-visible {
  outline: none;
  box-shadow: inset var(--shadow-focus);
}

.petunjuk-ikon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--icon-tile-sm);
  height: var(--icon-tile-sm);
  border-radius: var(--radius-circle);
  background-color: var(--color-petunjuk-ikon);
  color: var(--color-petunjuk-text);
  font-size: var(--fs-lg);
  line-height: 1;
}

.petunjuk-trigger::after {
  content: "+";
  flex: 0 0 auto;
  margin-left: auto;
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  color: var(--color-petunjuk-text);
  transition: transform var(--dur-fast) var(--ease-out);
}

.petunjuk-trigger[aria-expanded="true"]::after { transform: rotate(45deg); }

.petunjuk-panel {
  padding: 0 var(--space-4) var(--space-4) calc(var(--space-3) + var(--icon-tile-sm) + var(--space-3));
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  animation: sf-fade-in var(--dur-base) var(--ease-decelerate);
}

.petunjuk-panel[hidden] { display: none; }

.petunjuk-dibuka {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}

/* Petunjuk di dalam baris aksi butir (DEC-080).
   Dahulu seluruh kartu petunjuk melebar 100% saat dibuka, sehingga ia TERLEMPAR ke baris
   berikutnya: pilnya berpindah tempat dan panelnya seolah datang dari elemen lain.
   Sekarang pembungkusnya `display: contents`, sehingga pil dan panel menjadi item baris
   yang terpisah: pil tetap duduk di barisnya bersama Periksa dan status, sedangkan panel
   selalu mengambil satu baris penuh DI BAWAHNYA dan diberi ekor kecil yang menunjuk ke pil
   (posisi ekor dihitung ui.js lewat --notch-x). Petunjuk di luar baris aksi (petunjuk tahap)
   tetap memakai bentuk kartu lama. */
.butir-aksi .petunjuk { display: contents; }

.butir-aksi .petunjuk-trigger {
  width: auto;
  flex: 0 1 auto;
  border: var(--border-thin) solid var(--color-petunjuk-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-petunjuk-soft);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
}

@media (hover: hover) and (pointer: fine) {
  .butir-aksi .petunjuk-trigger:hover { background-color: var(--color-petunjuk-ikon); }
}

.butir-aksi .petunjuk-trigger:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset);
  box-shadow: none;
}

/* Panel dan ekornya memakai satu warna PEKAT. Dengan warna semi-transparan, separuh
   ekor yang menimpa panel akan menumpuk alfa dan terbaca sebagai belah ketupat. */
.butir-aksi .petunjuk-panel {
  --petunjuk-bg: var(--color-petunjuk-soft);
  position: relative;
  flex: 0 0 100%;
  margin-top: var(--space-2);
  padding: var(--space-4);
  border: var(--border-thin) solid var(--color-petunjuk-border);
  border-radius: var(--radius-md);
  background-color: var(--petunjuk-bg);
  animation: none;
}

@supports (background: color-mix(in srgb, red 50%, blue)) {
  .butir-aksi .petunjuk-panel { --petunjuk-bg: color-mix(in srgb, var(--color-petunjuk) 14%, var(--color-surface)); }
}

/* Ekor segitiga: sudut panel yang diputar 45 derajat, ditaruh persis di bawah pil. */
.butir-aksi .petunjuk-panel::before {
  content: "";
  position: absolute;
  top: -7px;
  left: var(--notch-x, 1.5rem);
  width: 12px;
  height: 12px;
  background-color: var(--petunjuk-bg);
  border-left: var(--border-thin) solid var(--color-petunjuk-border);
  border-top: var(--border-thin) solid var(--color-petunjuk-border);
  border-top-left-radius: 3px;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .js-aktif .butir-aksi .petunjuk-panel { animation: sf-petunjuk-turun var(--dur-base) var(--ease-decelerate); }
}

@keyframes sf-petunjuk-turun {
  from { opacity: 0; transform: translateY(-6px); }
}

/* ---------- 11. INSTRUKSI: PERTANYAAN PENUNTUN & PERINTAH ---- */

.instruksi {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-primary-border);
  background-color: var(--color-primary-softer);
  color: var(--color-primary-text);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.instruksi .icon {
  flex: 0 0 auto;
  margin-top: 0.15em;
  font-size: var(--fs-lg);
}

.instruksi-perintah {
  background-color: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

/* ---------- 12. AKSI AKHIR (CTA kontekstual DEC-039) -------- */

/* DEC-193: di layar lebar tombol aksi berjajar ke samping, bukan bertumpuk ke bawah. Penjelasan aksi (IA-08) tetap
   menempati baris sendiri di bawah tombolnya. Di layar sempit bilah yang menempel tetap menyusun tombol ke bawah. */
.aksi-akhir {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-thin) solid var(--color-border);
}

.aksi-akhir .btn,
.aksi-akhir-lain .btn { max-width: 100%; }
.aksi-akhir > .btn-penjelasan { flex-basis: 100%; margin: 0; }

/* AUD-40 (KP-134): aksi pelengkap dibungkus bersama bilah aksi utama dalam .aksi-akhir-grup (ui_aksi_akhir()). Di layar
   lebar pembungkus itu berupa deret yang sama dengan .aksi-akhir dan kedua anaknya lenyap (display: contents), sehingga
   semua tombol tetap satu deret seperti DEC-193. */
.aksi-akhir-grup {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-thin) solid var(--color-border);
}

/* Tombol ghost tidak berlatar, jadi bantalan sampingnya hanya tampak sebagai celah kosong. Di deret yang berjajar
   bantalan itu dipersempit supaya jarak antartombol tampak rata dan tiga tombol muat sebaris di kolom jawaban. */
@media (min-width: 64rem) {
  .aksi-akhir .btn-ghost.btn-lg,
  .aksi-akhir-lain .btn-ghost.btn-lg { padding-inline: var(--space-4); }
  .aksi-akhir-grup > .aksi-akhir,
  .aksi-akhir-grup > .aksi-akhir-lain { display: contents; }
}

@media (max-width: 63.99rem) {
  .aksi-akhir {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    margin-inline: calc(-1 * var(--container-gutter));
    margin-top: var(--space-6);
    padding: var(--space-3) var(--container-gutter);
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
    border-top: var(--border-thin) solid var(--color-border);
    background-color: var(--glass-chrome-strong);
    box-shadow: 0 -8px 24px -12px rgba(1, 29, 73, 0.18);
  }
  .aksi-akhir .btn { width: 100%; }
  /* AUD-37: elemen yang difokus papan ketik tidak boleh tertutup bilah ini (WCAG 2.2 SC 2.4.11). Tinggi bilah diukur
     app.js ke --aksi-akhir-tinggi; nilai cadangan cukup untuk tiga tombol bertumpuk. */
  html:has(.aksi-akhir) { scroll-padding-bottom: calc(var(--aksi-akhir-tinggi, 16.5rem) + var(--space-3)); }
  /* AUD-40 (KP-134): bilah yang menempel hanya memuat aksi utama, supaya tidak menutup sepertiga layar. Pembungkusnya lenyap,
     jadi bilah tetap menempel di dalam wadah halaman seperti sebelumnya, dan aksi pelengkap menyambung tepat di bawahnya
     dengan rupa bilah yang sama tanpa ikut menempel: dua tombol berdampingan, atau satu tombol selebar bilah. Di ujung
     halaman keduanya tampak satu bilah. */
  .aksi-akhir-grup { display: contents; }
  .aksi-akhir-lain {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-inline: calc(-1 * var(--container-gutter));
    padding: 0 var(--container-gutter) max(var(--space-3), env(safe-area-inset-bottom));
    background-color: var(--glass-chrome-strong);
  }
  .aksi-akhir-lain > :only-child { grid-column: 1 / -1; }
  .aksi-akhir-lain .btn { width: 100%; }
  .aksi-akhir-lain .btn-lg {
    min-height: 44px;
    padding-block: var(--space-2);
    padding-inline: var(--space-3);
    font-size: var(--fs-sm);
  }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  @media (max-width: 63.99rem) {
    .aksi-akhir,
    .aksi-akhir-lain {
      -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
      backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
      background-color: var(--glass-chrome);
    }
    .aksi-akhir { border-top-color: var(--glass-border); }
  }
}

/* ---------- 13. KARTU AKTIVITAS (LS-03) --------------------- */

/* DEC-086: kartu = grid empat baris sebagai anak langsung — sampul, kepala, kemajuan, kaki.
   Di dalam .beranda-daftar, baris-baris itu SUBGRID dari wadah sehingga sejajar antar-kartu
   (DEC-068): judul dua baris pada satu kartu tidak menggeser kemajuan dan tombolnya (DEC-079).
   overflow: visible agar cahaya "giliran" tampak di luar tepi kartu; sudut sampul dan kaki
   dibulatkan sendiri. */
.kartu-aktivitas {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  row-gap: var(--space-4);
  overflow: visible;
}

.kartu-blok { min-width: 0; padding-inline: var(--gap-card); }

/* Wadah .beranda-daftar didefinisikan di pages.css (auto-fill, min 17rem). */
@supports (grid-template-rows: subgrid) {
  .beranda-daftar > .kartu-aktivitas { grid-row: span 4; grid-template-rows: subgrid; }
}

/* ---- Sampul ---- */

.kartu-sampul {
  position: relative;
  padding-inline: 0;
}

.kartu-sampul-gambar {
  position: relative;
  display: block;
  aspect-ratio: var(--kartu-sampul-rasio);
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - var(--border-thin)) calc(var(--radius-lg) - var(--border-thin)) 0 0;
  background: var(--gradient-soft);
}

.kartu-sampul-gambar picture,
.kartu-sampul-gambar img {
  display: block;
  width: 100%;
  height: 100%;
}

.kartu-sampul-gambar img {
  object-fit: cover;
  object-position: 50% 40%;
}

.kartu-sampul-gambar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sampul-selubung);
  pointer-events: none;
}

.kartu-sampul-pengganti {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: var(--icon-tile-lg);
  color: var(--color-primary-text);
}

/* Pil status berkaca di pojok kanan atas sampul (warna teks dan garis tetap dari jenis status) */
.kartu-sampul .status-kaca {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  max-width: calc(100% - var(--space-6));
  background-color: var(--status-kaca-latar);
  box-shadow: var(--shadow-md);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .kartu-sampul .status-kaca {
    -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
  }
}

/* Nomor besar menumpang tepi bawah sampul */
.kartu-aktivitas-nomor {
  position: absolute;
  left: var(--gap-card);
  bottom: calc(var(--kartu-nomor) / -2);
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--kartu-nomor);
  height: var(--kartu-nomor);
  border-radius: var(--radius-md);
  background: var(--gradient-biru);
  box-shadow: 0 0 0 var(--space-1) var(--color-surface), var(--shadow-md);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  line-height: 1;
}

.kartu-aktivitas[data-state="selesai"] .kartu-aktivitas-nomor { background: var(--gradient-selesai); }

.kartu-nomor-cek {
  position: absolute;
  top: calc(var(--space-2) * -1);
  right: calc(var(--space-2) * -1);
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--radius-circle);
  background: var(--gradient-amber);
  box-shadow: 0 0 0 var(--border-thick) var(--color-surface);
  color: var(--biru-950);
}

.kartu-nomor-cek .icon { width: 0.8rem; height: 0.8rem; stroke-width: 3; }

/* Terkunci: gambar diredupkan dan sedikit kabur (masih mengintip), gembok kaca di tengah */
.kartu-aktivitas[data-state="terkunci"] .kartu-sampul-gambar img {
  filter: grayscale(0.7) blur(1.5px);
  transform: scale(1.06);
}

.kartu-aktivitas[data-state="terkunci"] .kartu-sampul-gambar::after { background: var(--sampul-terkunci); }

.kartu-sampul-kunci {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  /* Bawah menyisakan separuh nomor yang menumpang sampul, sehingga alasan dua baris tidak menyentuhnya. */
  padding: var(--space-3) var(--space-4) calc(var(--kartu-nomor) / 2 + var(--space-2));
  text-align: center;
  pointer-events: none;
}

.kartu-sampul-alasan {
  max-width: 16rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--neutral-0);
  text-shadow: 0 1px 2px rgba(1, 29, 73, 0.6), 0 0 18px rgba(1, 29, 73, 0.55);
  text-wrap: balance;
}

.kartu-sampul-gembok {
  display: grid;
  place-items: center;
  width: var(--icon-tile-lg);
  height: var(--icon-tile-lg);
  border: var(--border-thin) solid var(--gembok-garis);
  border-radius: var(--radius-circle);
  background-color: var(--gembok-latar);
  box-shadow: var(--shadow-lg);
  color: var(--neutral-0);
  font-size: var(--fs-2xl);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .kartu-sampul-gembok {
    -webkit-backdrop-filter: blur(var(--blur-xs));
    backdrop-filter: blur(var(--blur-xs));
  }
}

.kartu-aktivitas[data-state="terkunci"] .kartu-aktivitas-nomor {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

/* ---- Kepala: eyebrow sejajar nomor, judul penuh, tingkat bimbingan bermeter ---- */

.kartu-aktivitas-kepala {
  display: grid;
  align-content: start;
  gap: var(--space-1);
}

.kartu-aktivitas-kepala .eyebrow {
  min-height: calc(var(--kartu-nomor) / 2 - var(--space-1));
  margin-left: calc(var(--kartu-nomor) + var(--space-3));
}

.kartu-aktivitas-kepala .card-title {
  margin-top: var(--space-2);
  text-wrap: balance;
}

.kartu-aktivitas-profil {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.kartu-meter {
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--space-1);
  margin-top: calc((var(--lh-normal) * 1em - 0.3125rem) / 2);
}

/* DEC-087: judul tingkat bimbingan dengan meter di sampingnya; bila sempit, meter turun, judul tidak terpotong. */
.kartu-judul-bermeter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.kartu-judul-bermeter .kartu-meter { margin-top: 0; }
.kartu-judul-bermeter .kartu-meter span { width: 1rem; height: 0.375rem; }

/* Ponsel 320: judul terpanjang ("Bimbingan Terbatas") dan meternya tetap satu baris. */
@media (max-width: 21.99rem) {
  .kartu-judul-bermeter { font-size: var(--fs-lg); column-gap: var(--space-2); }
  .kartu-judul-bermeter .kartu-meter span { width: 0.75rem; }
}

.kartu-meter span {
  width: 0.875rem;
  height: 0.3125rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-muted);
}

.kartu-meter .is-isi { background: var(--gradient-biru); }

/* ---- Kemajuan: dua langkah bersebelahan ---- */

.kartu-kemajuan {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  container-type: inline-size;
}

.kartu-kemajuan-kepala {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kartu-kemajuan-kepala b {
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-normal);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Kartu sempit (ponsel, tiga kolom 1024): langkah bertumpuk, nama satu baris.
   Kartu lebar (>= 19rem isi): dua langkah bersebelahan. Ambang dipilih agar
   "Sudah dikumpulkan" tidak pernah terlipat (diukur: butuh ±141px per kolom). */
.kartu-langkah-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

@container (min-width: 19rem) {
  .kartu-langkah-daftar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

.kartu-langkah {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
}

.kartu-langkah-bilah {
  display: block;
  height: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-sunken);
}

.kartu-langkah-bilah > span {
  display: block;
  width: calc(var(--isi, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-biru);
  transform-origin: 0 50%;
}

.kartu-langkah[data-status="dikumpulkan"] .kartu-langkah-bilah > span { background: var(--gradient-selesai); }

.kartu-langkah-nama {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-1);
  line-height: var(--lh-snug);
}

.kartu-langkah-nama span::before { content: "· "; }

@container (min-width: 19rem) {
  .kartu-langkah-nama { display: grid; }
  .kartu-langkah-nama span::before { content: none; }
}

.kartu-langkah-nama b {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.kartu-langkah-nama span {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* Status tanpa pil: ikon + teks berwarna sesuai jenis (kosakata tetap DEC-059) */
.status.status-polos {
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-xs);
  gap: var(--space-1);
  text-wrap: balance;
}

.kartu-aktivitas[data-state="terkunci"] .kartu-kemajuan { opacity: 0.8; }

/* ---- Kaki: tombol selebar kartu (DEC-079) ---- */

.kartu-aktivitas .card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  gap: var(--space-3);
  padding-top: var(--space-1);
  padding-bottom: var(--gap-card);
  border-top: 0;
  border-radius: 0 0 calc(var(--radius-lg) - var(--border-thin)) calc(var(--radius-lg) - var(--border-thin));
  background-color: transparent;
}

.kartu-aktivitas .card-footer .btn-penjelasan { margin: 0; text-align: center; }

/* ---- Giliran: aktivitas yang menunggu dikerjakan diberi cincin amber ---- */

.kartu-aktivitas[data-giliran="true"] {
  border-color: var(--giliran-garis);
  box-shadow: 0 0 0 var(--border-thin) var(--giliran-garis), var(--shadow-glass-md);
}

.kartu-aktivitas[data-giliran="true"]::after {
  content: "";
  position: absolute;
  inset: calc(var(--border-thin) * -1);
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 0 var(--space-1) var(--giliran-cahaya), 0 20px 48px -18px var(--giliran-cahaya);
  pointer-events: none;
}

/* ---- Bawaan lama untuk ringkasan (LS-10) dan peraga: status dan baris soal berpil ---- */

.kartu-aktivitas-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.kartu-aktivitas-bagian {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Baris status soal: SATU pola untuk semua baris (DEC-059, tindak lanjut KP-37).
   Bawaan: label di atas, pil di bawah rata kiri. Berdampingan (pil di kanan) hanya
   bila SELURUH daftar cukup lebar (container query >= 30rem), sehingga tidak ada
   baris yang pilnya "turun" sendiri karena labelnya lebih panjang. Peramban tanpa
   container query selalu bertumpuk. */
.kartu-aktivitas-bagian { container-type: inline-size; }

.kartu-aktivitas-bagian li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.kartu-aktivitas-bagian li .status { justify-self: start; }

@container (min-width: 30rem) {
  .kartu-aktivitas-bagian li { grid-template-columns: minmax(0, 1fr) auto; }
  .kartu-aktivitas-bagian li .status { justify-self: end; }
}

/* ---------- 14. MODE HANYA-BACA (G-09) ---------------------- */

.hanya-baca-bilah {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-border);
  background-color: var(--color-surface-alt);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.hanya-baca-bilah .icon { color: var(--color-text-muted); }

.jawaban-blok {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: var(--border-base) dashed var(--color-border-strong);
  background-color: var(--color-surface-alt);
  overflow-wrap: anywhere;
}

.jawaban-blok-label {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.jawaban-blok-isi {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  white-space: pre-wrap;
}

.jawaban-blok-kosong { color: var(--color-text-muted); font-style: italic; }

.jawaban-teks {
  display: inline-block;
  min-width: var(--kotak-lebar);
  margin: 0.25em 0.15em;
  padding: 0.1em 0.55em;
  border-radius: var(--radius-xs);
  border-bottom: var(--border-thick) solid var(--color-border-strong);
  background-color: var(--color-surface-alt);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  text-align: center;
}

/* ---------- 16. TOAST (notifikasi singkat, S-G7) ------------ */

.toast-wadah {
  position: fixed;
  inset-inline: 0;
  bottom: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--container-gutter);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: min(100%, 32rem);
  padding: var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--glass-chrome-strong);
  box-shadow: var(--shadow-glass-lg);
  color: var(--color-text);
  font-size: var(--fs-sm);
  pointer-events: auto;
  animation: sf-toast-masuk var(--dur-slow) var(--ease-decelerate);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .toast {
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-lg)) saturate(var(--glass-saturate));
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--shadow-glass-lg);
  }
}

.toast .feedback-icon {
  width: var(--icon-tile-sm);
  height: var(--icon-tile-sm);
  font-size: var(--fs-base);
}

.toast-isi { flex: 1; min-width: 0; }
.toast-judul { font-family: var(--font-display); font-weight: var(--fw-bold); }

.toast-success .feedback-icon { background-color: var(--color-success-ikon); color: var(--color-success-text); }
.toast-warning .feedback-icon { background-color: var(--color-warning-ikon); color: var(--color-warning-text); }
.toast-danger  .feedback-icon { background-color: var(--color-danger-ikon);  color: var(--color-danger-text); }
.toast-info    .feedback-icon { background-color: var(--color-info-ikon);    color: var(--color-info-text); }

.toast.is-keluar {
  animation: sf-toast-keluar var(--dur-base) var(--ease-accelerate) both;
}

@keyframes sf-toast-masuk {
  from { opacity: 0; transform: translateY(var(--space-4)) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes sf-toast-keluar {
  to { opacity: 0; transform: translateY(var(--space-3)) scale(0.97); }
}

/* ---------- 18. HEADER SISWA (G-01) ------------------------- */

.navbar-siswa {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-alt);
  border: var(--border-thin) solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

/* AUD-40 (KP-134): deret kanan header siswa boleh menyusut, dan yang menyusut hanya pil nama. Nama dan kelas yang panjang
   dipotong dengan elipsis, sedangkan merek dan tombol lain tetap utuh, sehingga bilah atas tetap satu baris. */
.navbar:not(.navbar-publik) .navbar-inner > .navbar-actions { flex: 0 1 auto; min-width: 0; }
/* Tombol berisi overflow: hidden (kilau DEC-165), jadi tanpa ini ikut menyusut dan labelnya terpotong. */
.navbar:not(.navbar-publik) .navbar-inner > .navbar-actions > :not(.navbar-siswa) { flex-shrink: 0; }

.navbar-siswa-avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--icon-tile-sm);
  height: var(--icon-tile-sm);
  border-radius: var(--radius-circle);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-text);
  font-size: var(--fs-base);
}

.navbar-siswa-nama {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.navbar-siswa-nama small {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

.navbar-siswa-nama > span,
.navbar-siswa-nama small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- 19. VERSI & CATATAN KECIL ----------------------- */

.versi {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--color-text-subtle);
}

/* ---------- 20. WILAYAH KERJA JAWABAN ----------------------- */

.jawaban-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.jawaban-kepala h2 {
  font-size: var(--fs-xl);
}

.jawaban-catatan {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* ---------- 20. APLIKASI F1: getar kredensial salah, jawaban hanya-baca ---- */

.masuk-form.is-getar { animation: sf-getar 0.5s var(--ease-out); }

@keyframes sf-getar {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

.jawaban-teks[data-status="tepat"] { border-color: var(--color-success); }
.jawaban-teks[data-status="belum-tepat"] { border-color: var(--color-danger); text-decoration: underline wavy var(--color-danger); text-underline-offset: 0.2em; }

/* ---------- 21. REVISI PASCA-BIMBINGAN: kotak periksa kembali, pesan pengarah, butir cara lain ---- */

/* Kotak Petunjuk Memeriksa Kembali di awal Tahap 4 keenam soal (Pegangan Guru: kotak ungu). Memakai warna Tahap 4. */
.kotak-periksa-kembali {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid color-mix(in srgb, var(--tahap-4) 32%, transparent);
  background-color: var(--tahap-4-soft);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.kotak-periksa-kembali p { margin: 0; }

.kotak-periksa-kembali-judul {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--tahap-4-text);
}

.kotak-periksa-kembali ul {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: var(--space-1);
}

/* Pesan pengarah sesudah Periksa belum tepat (K-10): muncul sendiri di bawah butirnya. */
.butir-pengarah {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-belum-tepat-border);
  background-color: var(--color-belum-tepat-soft);
  color: var(--color-belum-tepat-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  animation: sf-fade-in var(--dur-base) var(--ease-decelerate);
}

.butir-pengarah[hidden] { display: none; }
/* KP-175 (TS-14): ikon bohlam dan kalimatnya selalu mengisi baris pertama bersama (ikon selebar 1em, sama dengan ukuran huruf
   kalimat), jadi tombol Tunjukkan selalu turun ke baris berikutnya, rata kanan. Dulu kalimat panjang turun ke baris kedua
   karena bilah ini membungkus, dan ikonnya tertinggal sendirian di baris pertama. */
.butir-pengarah p { flex: 1 1 calc(100% - 1em - var(--space-3) - 1px); min-width: 0; margin: 0; }
.butir-pengarah .icon { flex: 0 0 auto; margin-top: 0.2em; }

/* Butir cara penyelesaian lain: tidak wajib (K-12), keterangannya tidak berbunyi seperti tanda wajib. */
.butir-cara-lain .butir-wajib { font-style: italic; }

/* Tombol Petunjuk bertuntun (DEC-191): hanya tombol yang memulai tuntunan bersorot, tidak membuka kartu ke bawah,
   jadi tanda tambah milik kartu yang dapat dibuka tidak dipakai. */
.petunjuk-bertuntun .petunjuk-trigger::after { content: none; }

/* Tombol Tunjukkan di soal (DEC-190) di pesan pengarah: memulai tuntunan bersorot butir itu. */
.butir-pengarah-tunjukkan {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.butir-pengarah { flex-wrap: wrap; }

.butir-pengarah-tunjukkan {
  margin-left: auto;
  align-self: center;
  border: var(--border-thin) solid var(--color-belum-tepat-border);
  background-color: var(--color-surface);
  color: var(--color-belum-tepat-text);
}

.butir-pengarah-tunjukkan .icon { width: 1.1em; height: 1.1em; margin: 0; }

@media (hover: hover) and (pointer: fine) {
  .butir-pengarah-tunjukkan:hover { background-color: var(--color-belum-tepat-soft); }
}

.butir-pengarah-tunjukkan:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset);
}

/* Tanpa JavaScript tuntunan tidak dapat berjalan, jadi tombol di pesan pengarah disembunyikan; teks pesannya tetap terbaca. */
:root:not(.js-aktif) .butir-pengarah-tunjukkan { display: none; }

/* ---------- 22. REVISI VALIDASI AHLI: Periksa dua tanggapan, titik cabang, tabel A/B/C, Cara Temanmu ---- */

/* REVISI 01 bagian 2: status Periksa siswa selama mengerjakan. Sudah tepat berwarna hijau bercentang. Periksa lagi
   berwarna jingga lembut dengan ikon ulang: tanpa silang, tanpa guncangan, dan tanpa merah, karena jawabannya tidak
   dinyatakan salah. */
.status[data-status="sudah-tepat"] {
  background-color: var(--color-tepat-soft);
  border-color: var(--color-tepat-border);
  color: var(--color-tepat-text);
}
.status[data-status="periksa-lagi"] {
  background-color: var(--color-belum-tepat-soft);
  border-color: var(--color-belum-tepat-border);
  color: var(--color-belum-tepat-text);
}

.kotak[data-status="sudah-tepat"] .kotak-input {
  border-color: var(--color-tepat);
  background-color: var(--color-tepat-soft);
  color: var(--color-tepat-text);
}
.kotak[data-status="sudah-tepat"] .kotak-ikon { color: var(--color-tepat); }
/* Periksa lagi: latar jingga lembut, garis jingga yang cukup tegas (paling sedikit 3:1 terhadap latar, WCAG 1.4.11) supaya
   batas kotak yang perlu diperiksa lagi tidak justru paling samar; tetap jingga, bukan merah. */
.kotak[data-status="periksa-lagi"] .kotak-input {
  border-color: var(--color-belum-tepat);
  background-color: var(--color-belum-tepat-soft);
  color: var(--color-text);
}
.kotak[data-status="periksa-lagi"] .kotak-ikon { color: var(--color-belum-tepat-text); }
.kotak[data-status="sudah-tepat"].pecahan-tampil .pecahan-lapis { color: var(--color-tepat-text); }
/* Pecahan bertumpuk menggantikan tulisan aslinya pada kotak berstatus; warna status di atas tidak boleh menampakkannya lagi. */
.kotak.pecahan-tampil[data-status] .kotak-input { color: transparent; }

.pilihan[data-status="sudah-tepat"] .pilihan-opsi:has(.control-input:checked) {
  border-color: var(--color-tepat);
  background-color: var(--color-tepat-soft);
  color: var(--color-tepat-text);
}
.pilihan[data-status="sudah-tepat"] .pilihan-opsi:has(.control-input:checked) .control-box {
  background-color: var(--color-tepat);
  border-color: var(--color-tepat);
}
.pilihan[data-status="sudah-tepat"] .pilihan-opsi:has(.control-input:checked) .pilihan-mark {
  opacity: 1;
  color: var(--color-tepat);
}
.pilihan[data-status="periksa-lagi"] .pilihan-opsi:has(.control-input:checked) {
  border-color: var(--color-belum-tepat);
  background-color: var(--color-belum-tepat-soft);
}
.pilihan[data-status="periksa-lagi"] .pilihan-opsi:has(.control-input:checked) .pilihan-mark {
  opacity: 1;
  color: var(--color-belum-tepat-text);
}

/* Nomor butir di tahap yang sudah dilewati: latar lembut dan angka berwarna, sama untuk kedua tanggapan, supaya angkanya
   tetap terbaca di tema gelap (angka putih di atas hijau terang hanya sekitar 2,6:1). */
.butir[data-status="sudah-tepat"] .butir-nomor {
  background-color: var(--color-tepat-soft);
  border-color: var(--color-tepat);
  color: var(--color-tepat-text);
}
.butir[data-status="periksa-lagi"] .butir-nomor {
  background-color: var(--color-belum-tepat-soft);
  border-color: var(--color-belum-tepat);
  color: var(--color-belum-tepat-text);
}
.jawaban-teks[data-status="sudah-tepat"] { border-color: var(--color-tepat); }
.jawaban-teks[data-status="periksa-lagi"] { border-color: var(--color-belum-tepat); }

/* Status netral sesudah soal dikumpulkan (K3, KS-41): "Sudah diperiksa" memakai biru informasi, tanpa tepat atau belum. */
.status[data-status="diperiksa"] {
  background-color: var(--color-info-soft);
  border-color: var(--color-info-border);
  color: var(--color-info-text);
}

.kotak[data-status="diperiksa"] .kotak-input { border-color: var(--color-info-border); }
.kotak[data-status="diperiksa"] .kotak-ikon { display: none; }
.butir[data-status="diperiksa"] .butir-nomor {
  background-color: var(--color-info-soft);
  border-color: var(--color-info-border);
  color: var(--color-info-text);
}
.jawaban-teks[data-status="diperiksa"] { border-color: var(--color-info-border); }

/* Kotak pesan sesudah Periksa: satu baris per isian, label tebal ("✓ Sudah tepat!" atau "Periksa lagi, ya.") lalu satu
   kalimat. Kotaknya hijau bila semua baris Sudah tepat, selain itu jingga lembut. */
.pesan-periksa {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-belum-tepat-border);
  background-color: var(--color-belum-tepat-soft);
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  animation: sf-fade-in var(--dur-base) var(--ease-decelerate);
}
.pesan-periksa[data-status="sudah-tepat"] {
  border-color: var(--color-tepat-border);
  background-color: var(--color-tepat-soft);
}
.pesan-periksa-isi { display: grid; gap: var(--space-2); min-width: 0; }
.pesan-periksa-isi p { margin: 0; }
.pesan-periksa-label { font-weight: var(--fw-bold); }
.pesan-periksa-baris[data-status="sudah-tepat"] .pesan-periksa-label { color: var(--color-tepat-text); }
.pesan-periksa-baris[data-status="periksa-lagi"] .pesan-periksa-label { color: var(--color-belum-tepat-text); }

/* Ajakan sesudah memilih Berbeda (spesifikasi revisi validasi 3.5): kotak netral berwarna informasi. */
.sama-berbeda {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-info-border);
  background-color: var(--color-info-soft);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  animation: sf-fade-in var(--dur-base) var(--ease-decelerate);
}

.pesan-periksa[hidden],
.sama-berbeda[hidden] { display: none; }
/* Ikon dan isi kotak Sama/Berbeda (hal_sama_berbeda), yang memakai kelas kotak pesan lama. */
.sama-berbeda .pesan-periksa-ikon { flex: 0 0 auto; color: var(--color-info-text); margin-top: 0.15em; }
.sama-berbeda .pesan-periksa-isi { gap: var(--space-1); }

/* Tombol lanjut yang terkunci karena masih ada butir yang belum diperiksa (KS-12): memakai rupa tombol nonaktif sistem
   desain (aria-disabled), tetapi tetap dapat ditekan supaya jendela "Masih ada butir yang belum kamu periksa" muncul. */
.btn.is-terkunci[aria-disabled="true"] { pointer-events: auto; cursor: pointer; }

/* Pengantar butir dan awalan kotak di kalimat rumpang (Rp). */
.butir-pengantar { color: var(--color-text-secondary); }
.kotak-awalan,
.jawaban-awalan {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-left: 0.2em;
}

/* Pilihan tarik-turun sebaris (nomor 8, 11, 13 Aktivitas 1). */
.kotak-turun { position: relative; }
.kotak-turun .turun-input {
  width: auto;
  min-width: 7ch;
  padding-right: 2em;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  cursor: pointer;
}
.kotak-turun-panah {
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
  display: grid;
  transition: transform var(--dur-base) var(--ease-out);
  /* Di atas pemicu: efek tekan (transform) membuat pemicu dilukis sesudah panah dan menutupinya. */
  z-index: 1;
}
.kotak-turun-panah .icon { width: 1em; height: 1em; }

/* Dengan JavaScript, <select> bawaan disembunyikan (ui.js initSelect, varian kotak): pemicunya berbentuk kotak isian dan
   membuka daftar kaca sistem desain, bukan daftar bawaan peramban. Panah kotak tetap dipakai dan berbalik saat daftar
   terbuka; warna status Periksa sama dengan kotak isian lain. */
.kotak-turun .select-trigger-kotak {
  width: auto;
  min-width: 7ch;
  min-height: var(--control-height-sm);
  gap: 0;
  padding: 0.25em 2em 0.25em 0.55em;
  border: var(--border-base) solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1em;
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
}
.kotak-turun .select-trigger-kotak .select-caret { display: none; }
/* <select> yang tersembunyi tidak tertahan lebar minimum kotaknya. */
.kotak-turun[data-ready] .turun-input { min-width: 0; }
.kotak-turun .select-trigger-kotak:disabled {
  background-color: var(--color-surface-alt);
  border-style: dashed;
  color: var(--color-text-secondary);
  cursor: default;
}
.kotak-turun:has(> .select-trigger[aria-expanded="true"]) .kotak-turun-panah { transform: translateY(-50%) rotate(180deg); }
.kotak-turun[data-status="memeriksa"] .select-trigger-kotak { border-color: var(--color-primary-border); }
.kotak-turun[data-status="diperiksa"] .select-trigger-kotak { border-color: var(--color-info-border); }
.kotak-turun[data-status="sudah-tepat"] .select-trigger-kotak {
  border-color: var(--color-tepat);
  background-color: var(--color-tepat-soft);
  color: var(--color-tepat-text);
}
.kotak-turun[data-status="periksa-lagi"] .select-trigger-kotak {
  border-color: var(--color-belum-tepat);
  background-color: var(--color-belum-tepat-soft);
}
/* Tanda status (centang, ikon ulang) di pojok pemicu, di atas pemicu yang bergeser saat ditekan. */
.kotak-turun .kotak-ikon { z-index: 2; }
.kotak-turun[data-status="tepat"] .select-trigger-kotak {
  border-color: var(--color-tepat);
  background-color: var(--color-tepat-soft);
  color: var(--color-tepat-text);
}
.kotak-turun[data-status="belum-tepat"] .select-trigger-kotak {
  border-color: var(--color-belum-tepat);
  background-color: var(--color-belum-tepat-soft);
  color: var(--color-belum-tepat-text);
}
/* Pilihan di daftarnya sebesar huruf soal, supaya mudah dibaca dan disentuh siswa. */
.select-list-kotak .select-option { font-family: var(--font-display); font-size: var(--fs-base); }
@media (prefers-reduced-motion: reduce) {
  .kotak-turun-panah { transition: none; }
}

/* Tabel A, B, C nomor 7 Aktivitas 1: setiap tabel satu unit Periksa dengan tombol, petunjuk, dan pesannya sendiri. */
.tabel-unit {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-border);
  background-color: var(--color-surface);
}
.tabel-unit + .tabel-unit { margin-top: var(--space-1); }
.tabel-unit-aksi { grid-column: auto; }

/* Kotak petunjuk Aktivitas 1 Tahap 3 yang selalu tampil (KS-15). Memakai warna Tahap 3. */
.kotak-tahap {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid color-mix(in srgb, var(--tahap-3) 32%, transparent);
  background-color: var(--tahap-3-soft);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.kotak-tahap p { margin: 0; }
.kotak-tahap .icon { flex: 0 0 auto; color: var(--tahap-3-text); margin-top: 0.15em; }

/* Petunjuk Tahap Ini di kepala tahap (spesifikasi revisi validasi 3.4): baris sendiri di bawah judul tahap. */
.jawaban-kepala { flex-wrap: wrap; }
.jawaban-kepala-petunjuk { flex: 1 1 100%; }

/* Petunjuk lapis kedua: tombol dan teksnya di dalam panel lapis pertama. */
.petunjuk-lapis2 { margin-top: var(--space-3); }
.petunjuk-lapis2-tombol {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  border: var(--border-thin) solid var(--color-border-control);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.petunjuk-lapis2-tombol[hidden] { display: none; }
.petunjuk-lapis2-tombol .icon { width: 1.1em; height: 1.1em; }
.petunjuk-lapis2-tombol:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset);
}
.petunjuk-lapis2-panel {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--border-thin) dashed var(--color-border);
}
.petunjuk-lapis2-panel p { margin: 0; }

/* Titik cabang: butir berjalur yang belum terbuka, dan wadah yang sedang dimuat ulang. */
.butir-terkunci .butir-nomor { background-color: var(--color-surface-alt); color: var(--color-text-muted); }
.butir-terkunci-teks {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) dashed var(--color-border-control);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.butir-terkunci-teks .icon { flex: 0 0 auto; margin-top: 0.15em; }
.cabang-wadah { display: grid; gap: inherit; }
.cabang-wadah.is-memuat { opacity: 0.5; pointer-events: none; transition: opacity var(--dur-base) var(--ease-standard); }

/* Cara Temanmu dan tantangan Aktivitas 3: avatar tokoh dan balon ucapannya (avatar sementara, KS-36). */
/* Balon turun ke bawah avatar bila sisanya lebih sempit dari 9rem (dua avatar di layar 360 piksel), supaya kata tidak
   terpotong; satu avatar tetap berdampingan dengan balonnya. */
.tokoh { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); }
.tokoh-avatar { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.tokoh-gambar { display: grid; justify-items: center; gap: var(--space-1); }
.tokoh-gambar svg { width: 56px; height: 56px; }
.tokoh-nama { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--color-text-secondary); }
.tokoh-latar { fill: var(--color-primary-softer); }
.tokoh-gambar[data-tokoh="nisa"] .tokoh-latar { fill: var(--tahap-4-soft); }
.tokoh-wajah { fill: #F2C9A0; }
.tokoh-rambut { fill: #3B2A20; }
.tokoh-kerudung { fill: var(--tahap-4); }
.tokoh-baju { fill: var(--color-primary); }
.tokoh-gambar[data-tokoh="nisa"] .tokoh-baju { fill: var(--tahap-4); }
.tokoh-mata { fill: #2B211B; }
.tokoh-senyum { stroke: #2B211B; }
.tokoh-balon {
  position: relative;
  flex: 1 1 9rem;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-border);
  background-color: var(--color-surface-alt);
}
.tokoh-balon p { margin: 0; }
.tokoh-ucapan { color: var(--color-text); }
.tokoh-balon .tokoh-ajakan { margin-top: var(--space-2); font-weight: var(--fw-semibold); color: var(--color-text-secondary); }

/* Butir yang boleh dikosongkan (tantangan Aktivitas 3): keterangannya tidak berbunyi seperti tanda wajib. */
.butir-opsional .butir-wajib { font-style: italic; }

/* Contoh penyelesaian dua cara (spesifikasi revisi validasi 3.10). */
.contoh-jawaban-label { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-text-muted); }
.contoh-jawaban-teks { margin: var(--space-1) 0 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-text); }
.contoh-cara p { margin: 0; }

/* ---------- 23. REVISI VALIDASI AHLI: Tahap 4 (Ringkasan Jawabanku, daftar periksa), pilihan alat, Papan Ide ---- */

/* Ringkasan Jawabanku: jawaban Tahap 1 sampai 3 hanya-baca, di atas daftar periksa (spesifikasi revisi validasi 3.5). */
.ringkasan-jawaban {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-border);
  background-color: var(--color-surface-alt);
}
.ringkasan-jawaban-judul,
.daftar-periksa-judul {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.ringkasan-jawaban-pengantar,
.daftar-periksa-pengantar { margin: 0; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.ringkasan-jalur {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.ringkasan-jawaban-isi { display: grid; gap: var(--space-4); }
.ringkasan-jawaban .butir { gap: var(--space-3); }

/* Daftar periksa: lima poin dijawab Sudah atau Belum yakin. Memakai warna Tahap 4, seperti kotak yang digantikannya. */
.daftar-periksa {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid color-mix(in srgb, var(--tahap-4) 32%, transparent);
  background-color: var(--tahap-4-soft);
}
.daftar-periksa-judul { color: var(--tahap-4-text); }
.daftar-periksa-daftar { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); counter-reset: poin; }
.daftar-periksa-butir {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
}
.daftar-periksa-poin { margin: 0; color: var(--color-text-secondary); line-height: var(--lh-relaxed); }
.daftar-periksa-poin b { color: var(--color-text); }
.daftar-periksa-pilihan { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.daftar-periksa-pilih { position: relative; cursor: pointer; }
.daftar-periksa-pilih .control-input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.daftar-periksa-pilih-isi {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  border: var(--border-base) solid var(--color-border-control);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: var(--transition-colors);
}
.daftar-periksa-pilih-isi .icon { width: 1.05em; height: 1.05em; }
.daftar-periksa-pilih .control-input:focus-visible + .daftar-periksa-pilih-isi {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset);
}
.daftar-periksa-pilih .control-input:checked + .daftar-periksa-pilih-isi {
  border-color: var(--tahap-4);
  background-color: var(--tahap-4);
  color: var(--color-on-primary);
}
.daftar-periksa-lanjut { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.daftar-periksa-lanjut[hidden] { display: none; }
.daftar-periksa-jawab { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--tahap-4-text); }
.sama-berbeda-aksi { margin-top: var(--space-2); }
.kabar-perbaiki { margin-top: var(--space-4); }

/* Pilihan alat Aktivitas 3: tiga kotak centang, lalu alat yang dipilih. Tanpa JavaScript semua alat tampil. */
/* Pembungkus pertanyaan alat (di atas butir) dan isinya (di bawah butir): tanpa kotak sendiri, jarak tetap dari kartu. */
.alat-wadah { display: contents; }
.alat { display: grid; gap: var(--space-4); }
.alat-pilihan { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-2); }
.alat-judul { padding: 0; font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--color-text); }
.alat-keterangan { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.alat-daftar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 176px), 1fr)); gap: var(--space-2); }
.alat-opsi .control-label { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.alat-opsi .control-label > span { min-width: 0; }
.js-aktif .alat-isi[data-alat-sembunyi] { display: none; }

/* Papan Ide Aktivitas 2: dibuka dan ditutup lewat tombolnya. Tanpa JavaScript papan selalu tampil. */
.papan-ide-bungkus { display: grid; gap: var(--space-3); justify-items: start; }
.papan-ide-bungkus > .papan-ide-panel { justify-self: stretch; }
.papan-ide-tombol[aria-expanded="true"] { border-color: var(--color-primary); color: var(--color-primary-text); background-color: var(--color-primary-softer); }
.js-aktif .papan-ide-panel[data-papan-tertutup] { display: none; }
:root:not(.js-aktif) .papan-ide-tombol { display: none; }

/* Layar hasil di layar sempit: Lihat contoh penyelesaian berlabel panjang, jadi selebar bilah di atas dua tombol lainnya. */
@media (max-width: 63.99rem) {
  .aksi-akhir-lain > [data-tombol-contoh] { grid-column: 1 / -1; }
}

/* Judul butir Cara Temanmu (dokumen 01: "11. Cara Temanmu."), di atas kepala tokoh. */
.butir-pengantar.butir-judul { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--color-text); }