/* BYSA Skolastik — "Meja Baca + Garis Tempo".
   Satu kolom seperti halaman buku, serif untuk teks soal, kertas hangat, tanpa
   kartu dan tanpa bayangan. Merah tidak pernah muncul di dalam penjalan ujian. */

:root {
  --kertas: #F6F2EA;
  --permukaan: #FCFAF5;
  --garis: #E3DCCF;
  --garis-kuat: #C9C0AF;
  --teks: #2A2723;
  --redup: #6E675C;
  --tinta: #2E5A87;
  --tinta-lembut: #E7EEF6;
  --di-tinta: #FFFFFF;
  --benar: #276A48;
  --benar-lembut: #E4F1E9;
  --salah: #A9442F;
  --salah-lembut: #F8E6E1;
  --ragu: #7F5A10;
  --ragu-lembut: #F7EEDC;
  --fokus: #2E5A87;
  --scrim: rgba(42, 39, 35, .40);

  --r-chip: 4px; --r-opsi: 8px; --r-sheet: 12px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --font-baca: "Source Serif 4", "Iowan Old Style", Charter, "Source Serif Pro", Georgia, "Noto Serif", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --t-meta: 13px; --t-label: 14px; --t-tabel: 15px; --t-badan: 17px; --t-tanya: 19px;
  --t-h2: 20px; --t-timer: 20px; --t-h1: 28px; --t-angka: 32px; --t-utama: 48px;
  --lh-badan: 1.65; --lh-tanya: 1.55; --lh-judul: 1.25;

  --kolom: 38rem;
  --kolom-lebar: 64rem;
  --bar-atas: 48px; --bar-bawah: 56px; --nav-bawah: 56px; --sentuh: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kertas: #1B1917; --permukaan: #23201C; --garis: #38332C; --garis-kuat: #4A443B;
    --teks: #E6DFD3; --redup: #A39B8D;
    --tinta: #8FB4DE; --tinta-lembut: #22303F; --di-tinta: #14212F;
    --benar: #7FC79C; --benar-lembut: #1E2E25;
    --salah: #E0907A; --salah-lembut: #33231F;
    --ragu: #D8B45E; --ragu-lembut: #2F281A;
    --fokus: #8FB4DE;
    --scrim: rgba(0, 0, 0, .55);
  }
}

/* ── dasar ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
html[data-teks="besar"] { font-size: 19px; }
body {
  margin: 0;
  font: var(--t-badan)/var(--lh-badan) var(--font-ui);
  background: var(--kertas);
  color: var(--teks);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-baca); font-weight: 600; line-height: var(--lh-judul); margin: 0; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-family: var(--font-ui); font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--redup); }
p { margin: 0 0 var(--s3); }
a { color: var(--tinta); }
strong { font-weight: 600; }
.angka, .jam, td, .pita-teks, .mundur { font-variant-numeric: tabular-nums; }
.redup { color: var(--redup); }
.meta { font-size: var(--t-meta); color: var(--redup); line-height: 1.5; }
.serif { font-family: var(--font-baca); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sembunyi { display: none !important; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ── kerangka halaman ───────────────────────────────────────────────────── */
main.bungkus {
  max-width: var(--kolom);
  margin: 0 auto;
  padding: var(--s5) 20px 96px;
}
.seksi { margin-top: var(--s7); }
.seksi:first-child { margin-top: var(--s4); }
.seksi > .judul {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--garis); margin-bottom: var(--s2);
}
.seksi > .judul .meta { white-space: nowrap; }
.baris { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.baris.antara { justify-content: space-between; }
.tumbuh { flex: 1 1 auto; min-width: 0; }
.muat { color: var(--redup); padding: var(--s7) 0; text-align: center; }

header.atas { padding: var(--s4) 20px 0; }
.atas-isi { max-width: var(--kolom); margin: 0 auto; }
.atas-baris { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.wordmark { font-family: var(--font-baca); font-weight: 600; font-size: 20px; color: var(--teks); text-decoration: none; }
nav.tab { display: flex; gap: var(--s5); margin-top: var(--s3); border-bottom: 1px solid var(--garis); }
nav.tab button {
  border: 0; background: none; color: var(--redup); cursor: pointer; font: inherit; font-size: var(--t-label);
  padding: var(--s2) 0 var(--s3); margin-bottom: -1px; border-bottom: 2px solid transparent; min-height: var(--sentuh);
}
nav.tab button:hover { color: var(--teks); }
nav.tab button[aria-current="true"] { color: var(--teks); border-bottom-color: var(--tinta); font-weight: 600; }
#akun { min-height: var(--sentuh); }

/* ── komponen daftar ────────────────────────────────────────────────────── */
.baris-aksi {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 56px; padding: var(--s3) 0; border-bottom: 1px solid var(--garis);
}
.baris-aksi .tumbuh > .meta { margin-top: 2px; }
.baris-aksi .tombol, .baris-aksi .tautan { flex: 0 0 auto; }

.gulir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.ledger { border-collapse: collapse; width: 100%; font-size: var(--t-tabel); }
table.ledger th, table.ledger td { text-align: left; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--garis); vertical-align: top; }
table.ledger th { font-size: var(--t-meta); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--redup); border-bottom-color: var(--garis-kuat); }
table.ledger td.angka, table.ledger th.angka { text-align: right; padding-right: 0; padding-left: var(--s3); }
table.ledger td:last-child, table.ledger th:last-child { padding-right: 0; }
table.ledger .lambat { color: var(--salah); font-weight: 600; }

/* ── tombol, isian, chip, pesan ─────────────────────────────────────────── */
.tombol {
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1;
  min-height: var(--sentuh); padding: 0 var(--s4); border-radius: var(--r-opsi); cursor: pointer;
  border: 1px solid var(--tinta); background: var(--tinta); color: var(--di-tinta);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); white-space: nowrap;
}
.tombol:hover { filter: brightness(1.06); }
.tombol:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.tombol.halus { background: transparent; color: var(--teks); border-color: var(--garis-kuat); }
.tombol.halus:hover { background: var(--permukaan); filter: none; }
.tombol.halus[aria-pressed="true"] { background: var(--tinta-lembut); border-color: var(--tinta); color: var(--tinta); }
.tombol.lebar { width: 100%; }
.tombol.besar { min-height: 48px; font-size: 16px; }
.tautan {
  font: inherit; font-size: 15px; background: none; border: 0; padding: 0; color: var(--tinta); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; min-height: var(--sentuh); display: inline-flex; align-items: center;
}
.tautan.redup { color: var(--redup); }

label.isian { display: block; margin-bottom: var(--s4); font-size: var(--t-label); color: var(--redup); }
label.isian > span { display: block; margin-bottom: var(--s1); }
input, select, textarea {
  font: inherit; font-size: 17px; width: 100%; min-height: var(--sentuh); padding: var(--s2) var(--s3);
  border: 1px solid var(--garis-kuat); border-radius: var(--r-opsi);
  background: var(--permukaan); color: var(--teks);
}
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; flex: 0 0 auto; margin: 0; accent-color: var(--tinta); }
textarea { min-height: 5rem; resize: vertical; }
select { appearance: auto; }

.chip-baris { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s1); scrollbar-width: none; }
.chip-baris::-webkit-scrollbar { display: none; }
.chip {
  font: inherit; font-size: var(--t-label); min-height: var(--sentuh); padding: 0 14px; border-radius: var(--r-chip);
  border: 1px solid var(--garis-kuat); background: transparent; color: var(--teks); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--s1);
}
.chip[aria-pressed="true"] { background: var(--tinta-lembut); border-color: var(--tinta); color: var(--tinta); font-weight: 600; }
.chip .n { color: var(--redup); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .n { color: inherit; }

.pesan { font-size: 15px; padding: var(--s2) 0 var(--s2) var(--s3); border-left: 2px solid var(--tinta); margin: var(--s3) 0; }
.pesan.peringatan { border-left-color: var(--ragu); }
.pesan.galat { border-left-color: var(--salah); }
.pesan.baik { border-left-color: var(--benar); }

ul.periksa { list-style: none; margin: 0; padding: 0; }
ul.periksa li { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s2) 0; border-bottom: 1px solid var(--garis); font-size: 15px; }
ul.periksa li:last-child { border-bottom: 0; }
.tanda { flex: 0 0 1.2rem; font-weight: 600; }
.tanda.ya { color: var(--benar); }
.tanda.belum { color: var(--redup); }

/* ── pita 60 ────────────────────────────────────────────────────────────── */
.pita { display: grid; gap: var(--s2); margin-top: var(--s3); }
.pita-baris { display: grid; grid-template-columns: 9rem 1fr auto; align-items: center; gap: var(--s3); }
.pita-label { font-size: var(--t-label); }
.pita-titik { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.pita-titik i { display: block; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--garis-kuat); }
.pita-titik i.isi { background: var(--teks); border-color: var(--teks); }
.pita-titik i.pita-target { width: 1px; height: 12px; border: 0; border-radius: 0; background: var(--garis-kuat); margin: 0 1px; }
.pita-teks { font-size: var(--t-label); white-space: nowrap; text-align: right; }
.pita-total { margin-top: var(--s2); font-size: 15px; }
.pita-aman { font-size: var(--t-meta); color: var(--redup); margin-top: var(--s2); }
@media (max-width: 639px) {
  /* di ponsel label, titik, dan angka bertumpuk supaya 25 titik tidak patah baris */
  .pita-baris { grid-template-columns: 1fr; gap: 2px; }
  .pita-titik i { width: 7px; height: 7px; }
  .pita-titik i.pita-target { height: 11px; }
  .pita-teks { text-align: left; color: var(--redup); }
  .pita { gap: var(--s3); }
}

/* ── strip 7 hari ───────────────────────────────────────────────────────── */
.strip-hari { display: flex; gap: var(--s1); margin-top: var(--s3); }
.strip-hari button {
  flex: 1; min-width: 0; min-height: var(--sentuh); font: inherit; font-size: var(--t-meta); cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--redup); padding: var(--s1) 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.strip-hari button .glyph { font-size: 15px; color: var(--teks); }
.strip-hari button.kini { border-bottom-color: var(--tinta); color: var(--teks); }
.strip-hari button[aria-pressed="true"] { background: var(--tinta-lembut); border-radius: var(--r-chip); }

/* ── angka besar ────────────────────────────────────────────────────────── */
.utama-angka { font-family: var(--font-baca); font-size: var(--t-utama); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; }
.mundur { display: flex; align-items: baseline; gap: var(--s2); }
.mundur strong { font-family: var(--font-baca); font-size: var(--t-h1); }

/* ── nav bawah (ponsel) ─────────────────────────────────────────────────── */
nav.nav-bawah { display: none; }
@media (max-width: 639px) {
  nav.tab { display: none; }
  #akun { display: none; }
  nav.nav-bawah {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: calc(var(--nav-bawah) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--kertas); border-top: 1px solid var(--garis);
  }
  nav.nav-bawah button {
    flex: 1; border: 0; background: none; font: inherit; font-size: 11px; color: var(--redup); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--nav-bawah);
  }
  nav.nav-bawah button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  nav.nav-bawah button[aria-current="true"] { color: var(--tinta); font-weight: 600; }
  main.bungkus { padding-bottom: calc(var(--nav-bawah) + env(safe-area-inset-bottom) + var(--s5)); }
  .baris-aksi { flex-wrap: wrap; }
}

/* ── bar aksi lengket (drill) ───────────────────────────────────────────── */
.bar-lengket {
  position: sticky; bottom: 0; z-index: 20; background: var(--kertas); border-top: 1px solid var(--garis);
  padding: var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom)); margin-top: var(--s5);
}
@media (max-width: 639px) {
  .bar-lengket { bottom: calc(var(--nav-bawah) + env(safe-area-inset-bottom)); padding-bottom: var(--s3); }
}

/* ── daftar tipe (drill) ────────────────────────────────────────────────── */
.tipe-baris { display: flex; align-items: center; gap: var(--s3); min-height: 52px; border-bottom: 1px solid var(--garis); }
.tipe-baris > label { display: flex; align-items: center; gap: var(--s3); flex: 1; min-width: 0; min-height: 52px; cursor: pointer; }
.tipe-baris .nama { flex: 1; min-width: 0; }
.tipe-baris .stat { font-size: var(--t-label); color: var(--redup); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tipe-baris .stat .lambat { color: var(--salah); font-weight: 600; }
.tipe-baris .buka { flex: 0 0 var(--sentuh); height: var(--sentuh); border: 0; background: none; color: var(--redup); font: inherit; font-size: 15px; cursor: pointer; }
.tipe-baris .buka[aria-expanded="true"] { color: var(--tinta); }
.tipe-detail { padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--garis); }
.tipe-detail .strategi { font-family: var(--font-baca); font-size: var(--t-badan); margin: 0 0 var(--s3); }

/* ── masuk ──────────────────────────────────────────────────────────────── */
.masuk { max-width: 22rem; margin: 12vh auto 0; padding: 0 20px; text-align: center; }
.masuk form { text-align: left; margin-top: var(--s5); }
.masuk h1 { font-size: var(--t-h1); }

/* ── stimulus, pertanyaan, opsi, pembahasan ─────────────────────────────── */
.stimulus {
  font-family: var(--font-baca); font-size: var(--t-badan); line-height: var(--lh-badan);
  background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r-opsi);
  padding: var(--s4); margin-bottom: var(--s4); white-space: pre-wrap; text-wrap: pretty; hyphens: auto;
}
.stimulus h3 { margin-bottom: var(--s2); }
.tabel-stimulus { font-family: var(--font-ui); font-size: var(--t-tabel); white-space: normal; }
.tabel-stimulus th, .tabel-stimulus td { padding: var(--s1) var(--s2); border-bottom: 1px solid var(--garis); }
.tabel-stimulus th { font-size: var(--t-meta); color: var(--redup); text-transform: uppercase; letter-spacing: .03em; }
.tabel-stimulus .angka { text-align: right; }

.pertanyaan { font-family: var(--font-baca); font-size: var(--t-tanya); line-height: var(--lh-tanya); white-space: pre-wrap; margin-bottom: var(--s4); text-wrap: pretty; }

.opsi { display: grid; gap: var(--s2); }
.opsi label {
  display: flex; gap: var(--s3); align-items: flex-start; cursor: pointer; min-height: 52px;
  border: 1px solid var(--garis-kuat); border-radius: var(--r-opsi); padding: var(--s3) var(--s4); background: transparent;
  font-family: var(--font-baca); font-size: var(--t-badan); line-height: 1.5;
}
.opsi label:hover { background: var(--permukaan); }
.opsi label.pilih { background: var(--tinta-lembut); border-color: var(--tinta); }
.opsi label.kunci { background: var(--benar-lembut); border-color: var(--benar); }
.opsi label.jawabanmu { background: var(--salah-lembut); border-color: var(--salah); }
.opsi .huruf {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--garis-kuat);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: var(--t-label); font-weight: 600; color: var(--redup); margin-top: 1px;
}
.opsi label.pilih .huruf { background: var(--tinta); border-color: var(--tinta); color: var(--di-tinta); }
.opsi label.kunci .huruf { background: var(--benar); border-color: var(--benar); color: var(--kertas); }
.opsi label.jawabanmu .huruf { background: var(--salah); border-color: var(--salah); color: var(--kertas); }
.opsi .teks { flex: 1; min-width: 0; }
.opsi .label-status { font-family: var(--font-ui); font-size: var(--t-meta); color: var(--redup); white-space: nowrap; align-self: center; }

.pembahasan {
  font-family: var(--font-baca); font-size: var(--t-badan); line-height: var(--lh-badan);
  margin-top: var(--s4); padding-left: var(--s4); border-left: 2px solid var(--tinta); white-space: pre-wrap;
}
.bahas { padding: var(--s5) 0; border-top: 1px solid var(--garis); }
.bahas .meta-bahas { font-size: var(--t-meta); color: var(--redup); margin-bottom: var(--s2); display: flex; gap: var(--s2); flex-wrap: wrap; }
.bahas .meta-bahas .mahal { color: var(--ragu); font-weight: 600; }
.bahas .meta-bahas .status-salah { color: var(--salah); font-weight: 600; }
.bahas .meta-bahas .status-benar { color: var(--benar); font-weight: 600; }
.sebab { margin-top: var(--s3); }
.sebab .meta { margin-bottom: var(--s1); }

/* ── penjalan ujian ─────────────────────────────────────────────────────── */
#ujian { min-height: 100dvh; }
.tempo { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 40; background: transparent; }
.tempo-isi { position: absolute; left: 0; top: 0; height: 2px; background: var(--redup); opacity: .4; width: 0; }
.tempo-isi.tertinggal { background: var(--ragu); opacity: 1; }
.tempo-aku { position: absolute; top: 2px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--teks); transform: translateX(-5px); }

header.ujian-atas {
  position: sticky; top: 0; z-index: 30; background: var(--kertas); border-bottom: 1px solid var(--garis);
  height: var(--bar-atas); display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4);
}
.ujian-label { font: inherit; font-size: 15px; font-weight: 600; background: none; border: 0; color: var(--teks); padding: 0; min-height: var(--sentuh); cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: var(--s2); }
.ujian-label .isyarat { width: 6px; height: 6px; border-radius: 50%; background: var(--ragu); display: inline-block; }
.jam { font-size: var(--t-timer); font-weight: 500; color: var(--redup); }
.jam.hangat { color: var(--teks); }
.jam.ragu { color: var(--ragu); font-weight: 600; }
.ikon { width: var(--sentuh); height: var(--sentuh); border: 0; background: none; color: var(--teks); font: inherit; font-size: 20px; cursor: pointer; border-radius: var(--r-opsi); display: inline-flex; align-items: center; justify-content: center; }
.ikon:hover { background: var(--permukaan); }

#strip-ujian { font-size: var(--t-label); padding: var(--s1) var(--s4); min-height: 32px; display: flex; align-items: center; gap: var(--s3); border-bottom: 1px solid var(--garis); background: var(--permukaan); }
#strip-ujian.ragu { color: var(--ragu); }
#strip-ujian.redup { color: var(--redup); }

.peta-titik { display: flex; flex-wrap: wrap; gap: 0; padding: var(--s1) var(--s3); }
.peta-titik button.titik { width: 24px; height: 24px; border: 0; background: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.peta-titik button.titik i { display: block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--garis-kuat); background: transparent; }
.peta-titik button.titik.terisi i { background: var(--teks); border-color: var(--teks); }
.peta-titik button.titik.ragu i { background: linear-gradient(90deg, var(--ragu) 50%, transparent 50%); border-color: var(--ragu); }
.peta-titik button.titik.ragu.terisi i { background: linear-gradient(90deg, var(--ragu) 50%, var(--teks) 50%); border-color: var(--ragu); }
.peta-titik button.titik.kini i { box-shadow: 0 0 0 2px var(--kertas), 0 0 0 3px var(--tinta); }
.peta-titik button.titik.redam { opacity: .35; }
@media (max-width: 639px) { .peta-titik { pointer-events: none; } }

.peta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2); }
.peta-grid button {
  min-height: var(--sentuh); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer;
  border: 1px solid var(--garis-kuat); border-radius: var(--r-opsi); background: transparent; color: var(--redup);
}
.peta-grid button.terisi { background: var(--tinta-lembut); color: var(--tinta); border-color: transparent; font-weight: 600; }
.peta-grid button.ragu { box-shadow: inset 0 -3px 0 var(--ragu); }
.peta-grid button.kini { outline: 2px solid var(--tinta); outline-offset: 1px; }
.peta-grid button.redam { opacity: .35; }
.peta-grid.inline { margin: var(--s3) 0 var(--s4); grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
.peta-grid.inline button { min-height: 36px; }

.ujian-badan { max-width: var(--kolom); margin: 0 auto; padding: var(--s4) 20px; }
.ujian-badan.dua-kolom { max-width: var(--kolom-lebar); display: grid; grid-template-columns: 2fr 3fr; gap: var(--s5); align-items: start; }
.ujian-badan.dua-kolom aside.stimulus { position: sticky; top: calc(var(--bar-atas) + var(--s4)); margin-bottom: 0; max-height: calc(100dvh - var(--bar-atas) - var(--bar-bawah) - var(--s6)); overflow: auto; }
@media (max-width: 1023px) { .ujian-badan.dua-kolom { display: block; max-width: var(--kolom); } .ujian-badan.dua-kolom aside.stimulus { position: static; max-height: none; } }
#kartu-soal { scroll-margin-top: calc(var(--bar-atas) + 40px); padding-bottom: calc(var(--bar-bawah) + env(safe-area-inset-bottom) + var(--s4)); }
.nomor-soal { font-size: var(--t-meta); color: var(--redup); margin-bottom: var(--s2); display: flex; gap: var(--s2); align-items: center; }

.segmen { display: none; }
@media (max-width: 639px) {
  .segmen { display: flex; position: sticky; top: var(--bar-atas); z-index: 25; background: var(--kertas); border-bottom: 1px solid var(--garis); }
  .segmen button { flex: 1; min-height: var(--sentuh); font: inherit; font-size: 15px; border: 0; background: none; color: var(--redup); border-bottom: 2px solid transparent; cursor: pointer; }
  .segmen button[aria-selected="true"] { color: var(--teks); border-bottom-color: var(--tinta); font-weight: 600; }
  .ujian-badan[data-tampil="soal"] aside.stimulus { display: none; }
  .ujian-badan[data-tampil="wacana"] #kartu-soal > :not(.pertanyaan-pin) { display: none; }
  .pertanyaan-pin { display: none; }
  .ujian-badan[data-tampil="wacana"] .pertanyaan-pin {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    position: sticky; bottom: calc(var(--bar-bawah) + env(safe-area-inset-bottom)); background: var(--kertas);
    padding: var(--s2) 0; border-top: 1px solid var(--garis); font-family: var(--font-baca); color: var(--redup); font-size: 15px;
  }
}
@media (min-width: 640px) { .pertanyaan-pin { display: none; } }

footer.ujian-bawah {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--kertas); border-top: 1px solid var(--garis);
  height: calc(var(--bar-bawah) + env(safe-area-inset-bottom)); padding: 0 var(--s4) env(safe-area-inset-bottom);
  display: flex; align-items: center; gap: var(--s2);
}
footer.ujian-bawah .tengah { flex: 1; display: flex; gap: var(--s2); justify-content: center; max-width: var(--kolom-lebar); margin: 0 auto; width: 100%; }
footer.ujian-bawah .tengah .tumbuh { flex: 1; }
@media (max-width: 639px) {
  footer.ujian-bawah .tengah #sebelumnya, footer.ujian-bawah .tengah #ragu { flex: 0 0 var(--sentuh); padding: 0; }
  footer.ujian-bawah .tengah #lewati { flex: 1; }
  footer.ujian-bawah .tengah #utama { flex: 1.6; }
}

/* ── sheet & scrim ──────────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 50; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; background: var(--permukaan);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; max-height: 70vh; overflow: auto; overscroll-behavior: contain;
  padding: var(--s4) 20px calc(var(--s5) + env(safe-area-inset-bottom));
}
.sheet h2 { margin-bottom: var(--s3); }
.sheet .aksi-sheet { display: flex; gap: var(--s2); margin-top: var(--s4); }
.sheet .aksi-sheet .tombol { flex: 1; }
.sheet .menu button { display: flex; width: 100%; text-align: left; min-height: 52px; align-items: center; font: inherit; font-size: 17px; background: none; border: 0; border-bottom: 1px solid var(--garis); color: var(--teks); cursor: pointer; padding: 0; }
.sheet .menu button:last-child { border-bottom: 0; }
.sheet table.ledger { margin-top: var(--s2); }
@media (min-width: 640px) {
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(28rem, calc(100vw - 40px)); border-radius: var(--r-sheet); max-height: 80vh; }
}

/* ── hasil ──────────────────────────────────────────────────────────────── */
.hasil-kepala .utama-angka { margin: var(--s2) 0 var(--s1); }
.hasil-kepala .garis-info { font-size: 15px; margin-bottom: var(--s1); }
@media (max-width: 639px) { .hasil-kepala .utama-angka { font-size: 40px; } }

/* ── motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .opsi label { transition: background-color 120ms ease-out, border-color 120ms ease-out; }
  #kartu-soal.masuk-halus { animation: muncul 80ms ease-out; }
  .sheet { animation: naik 200ms ease-out; }
  .scrim { animation: pudar 200ms ease-out; }
  .bar-lengket { animation: naik 150ms ease-out; }
  #strip-ujian, .pesan { animation: pudar 150ms ease-out; }
}
@keyframes muncul { from { opacity: 0; } to { opacity: 1; } }
@keyframes pudar { from { opacity: 0; } to { opacity: 1; } }
@keyframes naik { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) and (prefers-reduced-motion: no-preference) {
  .sheet { animation: pudar 160ms ease-out; }
}