/* =====================================================================
   AkseleraSync — Modul Logistik Ujian
   ---------------------------------------------------------------------
   Tampilan untuk assets/js/portal-exam.js. Seluruh aturan digerbangi
   kelas .exam-scope supaya kontrak Portal Wali, Guru, Staf, dan Pimpinan
   tidak tersentuh saat modul ini disisipkan ke dalamnya.

   ATURAN BERKAS INI
   - Spacing, radius, ukuran teks, elevasi, dan target sentuh diambil dari
     assets/css/tokens.css lewat var(). Tidak ada angka mentah baru untuk
     hal-hal itu.
   - Ukuran teks terkecil adalah var(--fs-caption) = 12px. Berlaku juga di
     kartu ujian; kartu yang dicetak justru dinaikkan, bukan diperkecil.
   - Padding tidak ditulis tetap. Modul mengonsumsi token kepadatan
     (--d-card-pad, --d-row-pad, --d-section-gap, ...). Kalau modul dipasang
     di luar portal yang menetapkan [data-active-portal], blok kepadatan
     di bagian 02 mengisi nilai yang sama.
   - Status tidak pernah dibedakan hanya lewat warna. Setiap pil status
     membawa penanda bentuk/karakter dan teks.
   - Denah ruang digambar dengan CSS grid, bukan gambar raster.

   DAFTAR ISI
     01  Token lokal modul
     02  Kepadatan per sudut pandang
     03  Kerangka, kepala halaman, section
     04  Tab, chip, pemilih sudut pandang
     05  Pil status, ikon, bilah, notice, metrik
     06  Baris ujian dan daftar bentrok
     07  Denah ruang dan denah kursi
     08  Daftar peserta dan keputusan manusia
     09  Daftar hadir
     10  Berita acara
     11  Kartu ujian
     12  Layar wali murid
     13  Layar pimpinan
     14  Modal, picker, isian
     15  Toast
     16  Cetak
     17  Layar lebar
     18  Fokus dan gerak
   ===================================================================== */

/* =====================================================================
   01  TOKEN LOKAL MODUL
   Warna brand ditulis di sini seperti portal lain menulis token lokalnya.
   Skala ukuran TIDAK diduplikasi — ambil dari tokens.css.
   ===================================================================== */
.exam-scope {
  --exam-indigo: #243b72;
  --exam-indigo-dark: #15244a;
  --exam-indigo-soft: #e9edf6;
  --exam-emerald: #087a60;
  --exam-emerald-dark: #075b49;
  --exam-emerald-soft: #e7f3ef;
  --exam-gold: #d7a52e;
  --exam-gold-dark: #8a6712;
  --exam-gold-soft: #fbf3de;
  --exam-terracotta: #c6613b;
  --exam-terracotta-dark: #9c4529;
  --exam-terracotta-soft: #fbefe9;

  --exam-ink: #15244a;
  --exam-text: #3c4a6b;
  --exam-muted: #55627d;
  --exam-line: #e2ddd2;
  --exam-line-soft: rgba(21, 36, 74, .10);
  --exam-surface: #ffffff;
  --exam-canvas: #fcfbf7;
  --exam-sand: #f3f0e8;

  --exam-shadow: var(--elev-1);
  --exam-shadow-raised: var(--elev-3);
  --exam-radius: var(--d-card-radius, var(--r-lg));
  --exam-touch: var(--touch-min);

  color: var(--exam-ink);
  font-size: var(--d-body-size);
  line-height: var(--lh-normal);
}

/* Modul menghitung lebarnya sendiri; jangan bergantung pada reset tuan rumah. */
.exam-scope,
.exam-scope *,
.exam-scope *::before,
.exam-scope *::after { box-sizing: border-box; }

/* =====================================================================
   02  KEPADATAN PER SUDUT PANDANG
   Nilai sama persis dengan blok portal di tokens.css. Modul memakai
   ini supaya kepadatan tetap benar walau dipasang di luar portalnya.

   --d-section-gap mengikuti RITME SECTION OPSI B (pemilik produk
   26 Agu 2026): baku 40px untuk semua sudut pandang, hanya pimpinan
   32px karena kepadatan pindainya dipertahankan. Blok ini menimpa
   nilai warisan portal, jadi angkanya WAJIB sama dengan pemetaan
   --sec-gap di tokens.css — jangan kembali ke nilai lama yang lebih
   rapat. */
.exam-scope[data-exam-density="staf"] {
  --d-page-pad: var(--sp-4);
  --d-section-gap: var(--sp-8);
  --d-card-pad: var(--sp-3);
  --d-card-gap: var(--sp-3);
  --d-row-pad: var(--sp-3);
  --d-card-radius: var(--r-md);
  --d-body-size: var(--fs-small);
}
.exam-scope[data-exam-density="guru"] {
  --d-page-pad: var(--sp-4);
  --d-section-gap: var(--sp-8);
  --d-card-pad: var(--sp-4);
  --d-card-gap: var(--sp-3);
  --d-row-pad: var(--sp-3);
  --d-card-radius: var(--r-lg);
  --d-body-size: var(--fs-body);
}
.exam-scope[data-exam-density="wali"] {
  --d-page-pad: var(--sp-5);
  --d-section-gap: var(--sp-8);
  --d-card-pad: var(--sp-5);
  --d-card-gap: var(--sp-4);
  --d-row-pad: var(--sp-4);
  --d-card-radius: var(--r-xl);
  --d-body-size: var(--fs-body);
}
.exam-scope[data-exam-density="pimpinan"] {
  --d-page-pad: var(--sp-4);
  --d-section-gap: var(--sp-7);
  --d-card-pad: var(--sp-3);
  --d-card-gap: var(--sp-2);
  --d-row-pad: var(--sp-2);
  --d-card-radius: var(--r-md);
  --d-body-size: var(--fs-small);
}

/* =====================================================================
   03  KERANGKA, KEPALA HALAMAN, SECTION
   ===================================================================== */
.exam-root { display: block; }

.exam-shell {
  display: flex;
  flex-direction: column;
  gap: var(--d-section-gap);
  padding: var(--d-page-pad);
  max-width: 1180px;
  margin: 0 auto;
}

.exam-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.exam-head {
  padding: var(--d-card-pad);
  border-radius: var(--exam-radius);
  color: #fff;
  background:
    radial-gradient(circle at 88% 8%, rgba(215, 165, 46, .30), transparent 60%),
    linear-gradient(140deg, var(--exam-indigo-dark), var(--exam-indigo));
  box-shadow: var(--exam-shadow);
}
/* Penanda status modul: dipasang paling atas pada kepala sudut pandang
   Staf dan Pimpinan supaya pembaca tahu ini pratinjau rancangan. */
.exam-head__status { margin: 0 0 var(--sp-3); }

.exam-head__eyebrow {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: #f4dfa8;
}
.exam-head__title {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.exam-head__sub {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .84);
}
.exam-head__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.exam-head__mandate {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .12);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: rgba(255, 255, 255, .92);
}
.exam-head__mandate .exam-icon { flex: none; }

.exam-body {
  display: flex;
  flex-direction: column;
  gap: var(--d-section-gap);
}

/* ---------------------------------------------------------------------
   Divider bermerek antar section — SoT 7.2.5
   Hanya DI ANTARA section level halaman (anak langsung .exam-body);
   tidak pernah di dalam kartu, modal, atau antar item daftar. Digambar
   absolut di TENGAH gap oleh pseudo pada section KEDUA sehingga tidak
   menambah tinggi layout. ::before dan ::after pada .exam-section belum
   terpakai di mana pun — sudah diperiksa lewat grep. position: relative
   tanpa z-index tidak membuat stacking context baru, jadi overlay modul
   tidak terpengaruh.

   Garis dibuat transparan selebar piring di tengah supaya terputus
   rapi: piring mark ikut opacity .55, dan piring semi transparan tidak
   bisa menutup garis di belakangnya dengan bersih. */
.exam-body > .exam-section + .exam-section { position: relative; }
.exam-body > .exam-section + .exam-section::before {
  content: "";
  position: absolute;
  top: calc(-.5 * var(--d-section-gap));
  right: 8%;
  left: 8%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    var(--exam-line) 22%,
    var(--exam-line) calc(50% - 13px),
    transparent calc(50% - 12px),
    transparent calc(50% + 12px),
    var(--exam-line) calc(50% + 13px),
    var(--exam-line) 78%,
    transparent);
}
.exam-body > .exam-section + .exam-section::after {
  content: "";
  position: absolute;
  top: calc(-.5 * var(--d-section-gap) - 10px);
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: var(--r-pill);
  background: var(--exam-canvas) url("/presentasi/storage/brand/akselerasync-mark-1x1.webp") center / 13px 13px no-repeat;
  filter: grayscale(1);
  opacity: .55;
}

.exam-section {
  display: flex;
  flex-direction: column;
  gap: var(--d-card-gap);
  min-width: 0;
}
.exam-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
/* Blok judul -> konten mengikuti var(--sec-head-gap) 12px (RITME
   SECTION OPSI B). Gap flex section adalah --d-card-gap yang berubah
   per kepadatan (8-16px); margin di bawah menggenapkan selisihnya
   sehingga jarak judul ke isinya selalu 12px, berapa pun kepadatannya.
   Hanya head yang menjadi anak langsung section yang diatur — head
   yang dipakai di dalam kartu (mis. .exam-unplaced) tidak ikut. */
.exam-section > .exam-section__head {
  margin-bottom: calc(var(--sec-head-gap) - var(--d-card-gap));
}
.exam-section__headText { min-width: 0; }
/* Eyebrow section: menandai atas nama wewenang siapa sebuah bagian
   ditampilkan (dipakai antrean keputusan sisi pimpinan). Ditaruh di atas
   judul section dengan gaya label yang sama dengan eyebrow kepala. */
.exam-section__eyebrow {
  margin: 0 0 calc(-1 * var(--sp-2));
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--exam-indigo);
}
.exam-section__title {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: -.012em;
}
/* ---------------------------------------------------------------------
   Anatomi header section — bar aksen + kicker (RITME SECTION OPSI B)
   Bar aksen 14x3 pill menandai awal section, warnanya warna kicker
   (default var(--kick-indigo) dari tokens.css, dengan fallback untuk
   pratinjau berdiri sendiri). Tanpa kicker bar berdiri di atas judul;
   bila kicker hadir bar pindah ke kiri kicker dan bar judul dilepas.
   ::before pada .exam-section__title dan .exam-section__kicker belum
   terpakai di mana pun — sudah diperiksa lewat grep. Hanya judul di
   head anak langsung section yang diberi bar; head di dalam kartu
   (mis. .exam-unplaced) tidak ikut.
   ------------------------------------------------------------------- */
.exam-section > .exam-section__head .exam-section__title::before {
  content: "";
  display: block;
  width: 14px;
  height: 3px;
  margin-bottom: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--kick-indigo, #243B72);
}
.exam-section__kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-1);
  color: var(--kick-indigo, #243B72);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label);
  line-height: 1.35;
  text-transform: uppercase;
}
.exam-section__kicker::before {
  content: "";
  flex: none;
  width: 14px;
  height: 3px;
  border-radius: var(--r-pill);
  background: currentColor;
}
.exam-section > .exam-section__head .exam-section__kicker + .exam-section__title::before {
  content: none;
}
/* Warna kicker per domain — --gold mentah dilarang untuk teks kicker,
   pakai turunan gelap dari tokens.css yang lolos kontras teks 12px. */
.exam-section__kicker--gold { color: var(--kick-gold, #8A6A14); }
.exam-section__kicker--emerald { color: var(--kick-emerald, #087A60); }
.exam-section__kicker--terra { color: var(--kick-terra, #9C4529); }
.exam-section__sub {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-small);
  color: var(--exam-muted);
  line-height: var(--lh-snug);
}
.exam-subhead {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-subhead);
  font-weight: var(--fw-bold);
  color: var(--exam-ink);
}
.exam-hintline {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--exam-muted);
  line-height: var(--lh-snug);
}

/* =====================================================================
   04  TAB, CHIP, PEMILIH SUDUT PANDANG
   ===================================================================== */
.exam-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--d-page-pad) 0;
  max-width: 1180px;
  margin: 0 auto;
}
.exam-switch__btn {
  min-height: var(--exam-touch);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--exam-line);
  border-radius: var(--r-pill);
  background: var(--exam-surface);
  color: var(--exam-indigo);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.exam-switch__btn.is-active {
  color: #fff;
  background: var(--exam-indigo);
  border-color: var(--exam-indigo);
}

.exam-tabs {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-1);
  scrollbar-width: none;
}
.exam-tabs::-webkit-scrollbar { display: none; }
.exam-tab {
  flex: none;
  min-height: var(--exam-touch);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--exam-line);
  border-radius: var(--r-pill);
  background: var(--exam-surface);
  color: var(--exam-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}
.exam-tab.is-active {
  color: #fff;
  background: var(--exam-indigo);
  border-color: var(--exam-indigo);
  font-weight: var(--fw-bold);
}

.exam-filter {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-1);
  scrollbar-width: none;
}
.exam-filter::-webkit-scrollbar { display: none; }
.exam-chip {
  flex: none;
  min-height: var(--exam-touch);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--exam-line);
  border-radius: var(--r-pill);
  background: var(--exam-surface);
  color: var(--exam-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
}
.exam-chip.is-active {
  color: #fff;
  background: var(--exam-emerald);
  border-color: var(--exam-emerald);
  font-weight: var(--fw-bold);
}

/* =====================================================================
   05  PIL STATUS, IKON, BILAH, NOTICE, METRIK
   Setiap pil membawa karakter penanda di depan teks sehingga status
   masih terbaca tanpa membedakan warna.
   ===================================================================== */
.exam-icon {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exam-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  max-width: 100%;
  overflow-wrap: break-word;
}
/* Penanda karakter di depan teks: status tetap terbaca tanpa membedakan
   warna. Karakternya berbeda per nada, bukan sekadar warna berbeda. */
/* Penanda kini berupa SVG, bukan huruf. Kotaknya dikunci supaya tinggi pil
   tidak ikut berubah dan gambarnya duduk tepat di tengah baris teks. */
.exam-pill__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 14px;
  height: 14px;
}
.exam-pill__mark svg { display: block; }
.exam-pill--good { color: var(--exam-emerald-dark); background: var(--exam-emerald-soft); border-color: rgba(8, 122, 96, .22); }
.exam-pill--info { color: var(--exam-indigo); background: var(--exam-indigo-soft); border-color: rgba(36, 59, 114, .18); }
.exam-pill--warn { color: var(--exam-gold-dark); background: var(--exam-gold-soft); border-color: rgba(215, 165, 46, .38); }
.exam-pill--alert { color: var(--exam-terracotta-dark); background: var(--exam-terracotta-soft); border-color: rgba(198, 97, 59, .32); }
.exam-pill--mute { color: var(--exam-muted); background: var(--exam-sand); border-color: var(--exam-line); }
.exam-pill--live { color: #fff; background: var(--exam-emerald); border-color: var(--exam-emerald-dark); }


.exam-bar {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--exam-sand);
  overflow: hidden;
}
.exam-bar__fill {
  display: block;
  height: 100%;
  width: var(--exam-fill, 0%);
  border-radius: var(--r-pill);
  background: var(--exam-indigo);
  transition: width var(--motion-base) var(--motion-ease);
}
.exam-bar--good .exam-bar__fill { background: var(--exam-emerald); }
.exam-bar--alert .exam-bar__fill {
  background: repeating-linear-gradient(135deg, var(--exam-terracotta) 0 6px, var(--exam-terracotta-dark) 6px 12px);
}

.exam-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--d-card-pad);
  border-radius: var(--exam-radius);
  border: 1px solid var(--exam-line);
  border-inline-start: 4px solid var(--exam-indigo);
  background: var(--exam-surface);
}
.exam-notice--shield { border-inline-start-color: var(--exam-emerald); background: var(--exam-emerald-soft); }
.exam-notice--alert { border-inline-start-color: var(--exam-terracotta); background: var(--exam-terracotta-soft); }
.exam-notice--info { border-inline-start-color: var(--exam-indigo); background: var(--exam-indigo-soft); }
.exam-notice .exam-icon { margin-top: var(--sp-1); color: var(--exam-indigo); }
.exam-notice--shield .exam-icon { color: var(--exam-emerald-dark); }
.exam-notice--alert .exam-icon { color: var(--exam-terracotta-dark); }
.exam-notice__title {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}
.exam-notice__body {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--exam-text);
}

.exam-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--d-card-gap);
}
.exam-metric {
  padding: var(--d-card-pad);
  border-radius: var(--exam-radius);
  background: var(--exam-surface);
  border: 1px solid var(--exam-line);
  border-top: 3px solid var(--exam-indigo);
  box-shadow: var(--exam-shadow);
  min-width: 0;
}
.exam-metric--good { border-top-color: var(--exam-emerald); }
.exam-metric--warn { border-top-color: var(--exam-gold); }
.exam-metric--alert { border-top-color: var(--exam-terracotta); }
.exam-metric__label {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--exam-muted);
}
.exam-metric__value {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-metric-md);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  color: var(--exam-ink);
}
.exam-metric__detail {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-caption);
  color: var(--exam-muted);
  line-height: var(--lh-snug);
}

.exam-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-7) var(--d-card-pad);
  border-radius: var(--exam-radius);
  border: 1px dashed var(--exam-line);
  background: var(--exam-canvas);
  text-align: center;
}
.exam-empty .exam-icon { width: 28px; height: 28px; color: var(--exam-muted); }
.exam-empty__title { margin: 0; font-size: var(--fs-subhead); font-weight: var(--fw-bold); }
.exam-empty__body { margin: 0; font-size: var(--fs-small); color: var(--exam-muted); max-width: 34ch; }

/* --- Tombol ---------------------------------------------------------- */
.exam-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--exam-touch);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  cursor: pointer;
  text-align: center;
  line-height: var(--lh-snug);
}
.exam-btn--primary {
  color: #fff;
  background: var(--exam-emerald);
  box-shadow: 0 8px 18px rgba(8, 122, 96, .20);
}
.exam-btn--ghost {
  color: var(--exam-indigo);
  background: var(--exam-indigo-soft);
  border-color: rgba(36, 59, 114, .16);
}
.exam-btn:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; }
.exam-btn:active:not(:disabled) { transform: scale(.985); }

/* =====================================================================
   06  BARIS UJIAN DAN DAFTAR BENTROK
   ===================================================================== */
.exam-day {
  display: flex;
  flex-direction: column;
  gap: var(--d-card-gap);
}
.exam-day__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--d-row-pad) 0;
  border-bottom: 1px solid var(--exam-line);
}
.exam-day__title { margin: 0; font-size: var(--fs-subhead); font-weight: var(--fw-bold); }
.exam-day__meta { margin: var(--sp-1) 0 0; font-size: var(--fs-caption); color: var(--exam-muted); }
.exam-day__rows { display: grid; gap: var(--d-card-gap); }

.exam-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--d-card-pad);
  border-radius: var(--exam-radius);
  background: var(--exam-surface);
  border: 1px solid var(--exam-line);
  border-inline-start: 4px solid var(--exam-emerald);
  box-shadow: var(--exam-shadow);
  min-width: 0;
}
.exam-row.has-issue { border-inline-start-color: var(--exam-terracotta); }
.exam-row__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.exam-row__title { min-width: 0; }
.exam-row__title h4 {
  margin: 0;
  font-size: var(--fs-subhead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}
.exam-row__meta {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-caption);
  color: var(--exam-muted);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.exam-row__status { flex: none; }

.exam-row__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: var(--d-row-pad);
  border-radius: var(--r-md);
  background: var(--exam-canvas);
}
.exam-row__facts dt {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--exam-muted);
}
.exam-row__facts dd {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--exam-ink);
  overflow-wrap: anywhere;
}
.exam-blank { color: var(--exam-terracotta-dark); font-weight: var(--fw-bold); }

/* Antar kartu bentrok, dan di dalamnya pil "Perlu perhatian" -> kalimat
   rinciannya. Keduanya menumpuk permukaan di atas permukaan sewarna,
   jadi ambangnya jarak antar kartu penuh. 8px -> 12px. */
.exam-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.exam-issue {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--exam-gold-soft);
  border-inline-start: 3px solid var(--exam-gold);
}
.exam-issue--alert { background: var(--exam-terracotta-soft); border-inline-start-color: var(--exam-terracotta); }
.exam-issue__detail {
  font-size: var(--fs-caption);
  color: var(--exam-text);
  line-height: var(--lh-snug);
  min-width: 0;
}

/* Dua tombol hantu berlatar sama persis (delta E 0) berjarak 8px terbaca
   sebagai satu papan. Ambang kartu ke kartu sewarna: 12px. */
.exam-row__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.exam-row__actions > .exam-btn { flex: 1 1 180px; }
.exam-row__actions--wide > .exam-btn { flex: 1 1 100%; }

.exam-row__locked {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--exam-sand);
  font-size: var(--fs-caption);
  color: var(--exam-muted);
  line-height: var(--lh-snug);
}
.exam-row__locked .exam-icon { width: 18px; height: 18px; }

.exam-loadlist { display: grid; gap: var(--sp-2); }
.exam-loadrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--d-row-pad);
  border-radius: var(--r-md);
  background: var(--exam-surface);
  border: 1px solid var(--exam-line);
}
.exam-loadrow__main { min-width: 0; }
.exam-loadrow__main strong { font-size: var(--fs-small); overflow-wrap: anywhere; }
.exam-loadrow__tail { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: flex-end; flex: none; }

.exam-issuelist { display: grid; gap: var(--d-card-gap); }
.exam-issuecard {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--d-card-pad);
  border-radius: var(--exam-radius);
  background: var(--exam-surface);
  border: 1px solid var(--exam-line);
  border-inline-start: 4px solid var(--exam-gold);
}
.exam-issuecard--alert { border-inline-start-color: var(--exam-terracotta); }
.exam-issuecard > .exam-pill { flex: none; white-space: nowrap; }
.exam-issuecard__main { min-width: 0; }
.exam-issuecard__main strong { font-size: var(--fs-small); }
.exam-issuecard__detail {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-caption);
  color: var(--exam-text);
  line-height: var(--lh-snug);
}

/* =====================================================================
   07  DENAH RUANG DAN DENAH KURSI
   ===================================================================== */
.exam-plan__lead {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--exam-text);
  font-weight: var(--fw-semibold);
}
.exam-plan {
  padding: var(--d-card-pad);
  border-radius: var(--exam-radius);
  background: var(--exam-canvas);
  border: 1px solid var(--exam-line);
}
.exam-plan + .exam-plan { margin-top: var(--d-card-gap); }
.exam-plan__floor {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--exam-muted);
}
.exam-plan__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-2);
}
.exam-plan__corridor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background:
    repeating-linear-gradient(90deg, var(--exam-sand) 0 14px, transparent 14px 28px),
    var(--exam-surface);
  border: 1px dashed var(--exam-line);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--exam-muted);
}
.exam-plan__stair { font-weight: var(--fw-semibold); text-transform: none; letter-spacing: 0; }

.exam-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-1);
  min-height: calc(var(--exam-touch) * 2);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--exam-line);
  border-block-start: 4px solid var(--exam-line);
  background: var(--exam-surface);
  color: var(--exam-ink);
  text-align: start;
  cursor: pointer;
  width: 100%;
  min-width: 0;
}
.exam-tile--free { border-block-start-color: var(--exam-line); background: var(--exam-canvas); }
.exam-tile--info { border-block-start-color: var(--exam-emerald); }
.exam-tile--alert {
  border-block-start-color: var(--exam-terracotta);
  background:
    repeating-linear-gradient(135deg, rgba(198, 97, 59, .10) 0 8px, transparent 8px 16px),
    var(--exam-surface);
}
.exam-tile__name { font-size: var(--fs-small); font-weight: var(--fw-heavy); }
.exam-tile__cap { font-size: var(--fs-caption); color: var(--exam-muted); }
.exam-tile__use {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--exam-indigo);
  overflow-wrap: anywhere;
}
.exam-tile__sub { font-size: var(--fs-caption); color: var(--exam-muted); overflow-wrap: anywhere; }
.exam-tile__bar { display: block; width: 100%; }
.exam-tile__state { margin-top: var(--sp-1); }

.exam-unplaced {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--d-card-pad);
  border-radius: var(--exam-radius);
  background: var(--exam-gold-soft);
  border: 1px solid rgba(215, 165, 46, .38);
}
.exam-unplaced__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--d-row-pad);
  border-radius: var(--r-md);
  background: var(--exam-surface);
}
.exam-unplaced__row > div { min-width: 0; }
.exam-unplaced__row strong { font-size: var(--fs-small); }

.exam-seatplan {
  padding: var(--d-card-pad);
  border-radius: var(--exam-radius);
  background: var(--exam-canvas);
  border: 1px solid var(--exam-line);
}
.exam-seatplan__front,
.exam-seatplan__door {
  margin: 0;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--exam-indigo-soft);
  color: var(--exam-indigo);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: center;
}
.exam-seatplan__door { background: var(--exam-sand); color: var(--exam-muted); }
.exam-seatplan__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}
.exam-seat {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: var(--r-xs);
  border: 1px dashed var(--exam-line);
  background: var(--exam-surface);
  color: var(--exam-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}
.exam-seat.is-filled {
  border-style: solid;
  border-color: var(--exam-emerald);
  background: var(--exam-emerald-soft);
  color: var(--exam-emerald-dark);
  font-weight: var(--fw-bold);
}

/* =====================================================================
   08  DAFTAR PESERTA DAN KEPUTUSAN MANUSIA
   ===================================================================== */
.exam-people { display: grid; gap: var(--sp-2); align-items: start; }

/* Kartu peserta memakai grid dua kolom: nomor kursi di kiri, isi di kanan.
   Tombol keputusan turun ke barisnya sendiri supaya teks catatan tidak
   pernah terjepit sampai patah di tengah kata. */
.exam-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--d-row-pad);
  border-radius: var(--r-md);
  background: var(--exam-surface);
  border: 1px solid var(--exam-line);
  min-width: 0;
}
.exam-person--compact { align-items: center; }
.exam-person.has-flag {
  border-inline-start: 4px solid var(--exam-gold);
  background: var(--exam-canvas);
}
.exam-person__seat {
  flex: none;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--exam-indigo-soft);
  color: var(--exam-indigo);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
}
.exam-person__main { grid-column: 2; min-width: 0; }
.exam-person__name { font-size: var(--fs-small); font-weight: var(--fw-bold); overflow-wrap: break-word; }
.exam-person__flag { margin: var(--sp-2) 0 0; }
.exam-person__detail {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-caption);
  color: var(--exam-text);
  line-height: var(--lh-relaxed);
}
.exam-person__action { grid-column: 2; }
.exam-person__action .exam-btn { width: 100%; }

.exam-decision {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--exam-emerald-soft);
  border-inline-start: 3px solid var(--exam-emerald);
}
.exam-decision__head { margin: 0; }
.exam-decision__reason {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-caption);
  font-style: italic;
  color: var(--exam-text);
  line-height: var(--lh-relaxed);
}
.exam-decision__by {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--exam-emerald-dark);
}

/* =====================================================================
   09  DAFTAR HADIR
   ===================================================================== */
.exam-attendhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--d-card-pad);
  border-radius: var(--exam-radius);
  background: var(--exam-indigo-soft);
}
.exam-attendhead > div { min-width: 0; }
.exam-attendhead strong { font-size: var(--fs-subhead); }
.exam-attendhead__counts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.exam-attend { display: grid; gap: var(--sp-2); }
.exam-attend__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--d-row-pad);
  border-radius: var(--r-md);
  background: var(--exam-surface);
  border: 1px solid var(--exam-line);
}
.exam-attend__row.is-marked { border-inline-start: 4px solid var(--exam-emerald); }
.exam-attend__no {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--exam-sand);
  color: var(--exam-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
}
.exam-attend__main { min-width: 0; }
.exam-attend__main strong { font-size: var(--fs-small); overflow-wrap: anywhere; }
.exam-attend__controls {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--sp-2);
}
.exam-attend__reason { grid-column: 1 / -1; }
.exam-toggle {
  flex: 1 1 0;
  min-height: var(--exam-touch);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--exam-line);
  background: var(--exam-surface);
  color: var(--exam-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.exam-toggle.is-on {
  color: #fff;
  background: var(--exam-emerald);
  border-color: var(--exam-emerald-dark);
  font-weight: var(--fw-bold);
}
.exam-toggle--off.is-on {
  background: var(--exam-terracotta);
  border-color: var(--exam-terracotta-dark);
}

/* =====================================================================
   10  BERITA ACARA
   ===================================================================== */
.exam-minutes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--d-card-pad);
  border-radius: var(--exam-radius);
  background: var(--exam-surface);
  border: 1px solid var(--exam-line);
  box-shadow: var(--exam-shadow);
}
.exam-minutes__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--exam-line);
}
.exam-minutes__title { margin: 0; font-size: var(--fs-subhead); font-weight: var(--fw-bold); }
.exam-minutes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: var(--d-row-pad);
  border-radius: var(--r-md);
  background: var(--exam-canvas);
}
.exam-minutes__grid dt {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--exam-muted);
}
.exam-minutes__grid dd {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-subhead);
  font-weight: var(--fw-heavy);
  color: var(--exam-ink);
}
.exam-minutes__block { display: flex; flex-direction: column; gap: var(--sp-2); }
.exam-minutes__label {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--exam-muted);
}
.exam-minutes__list {
  margin: 0;
  padding-inline-start: var(--sp-5);
  display: grid;
  gap: var(--sp-1);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}
.exam-minutes__tag {
  display: inline-block;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--exam-gold-soft);
  color: var(--exam-gold-dark);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}
.exam-minutes__none,
.exam-minutes__note {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--exam-muted);
  line-height: var(--lh-relaxed);
}
.exam-minutes__hint {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--exam-gold-soft);
  border-inline-start: 3px solid var(--exam-gold);
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--exam-text);
}
.exam-minutes__sign {
  padding: var(--d-row-pad);
  border-radius: var(--r-md);
  background: var(--exam-emerald-soft);
  border: 1px solid rgba(8, 122, 96, .20);
}
.exam-minutes__signature {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-heading);
  font-weight: var(--fw-bold);
  font-style: italic;
  color: var(--exam-emerald-dark);
}

/* =====================================================================
   11  KARTU UJIAN
   Kartu adalah artefak yang dicetak dan dibawa anak. Ukuran teks di sini
   TIDAK boleh turun; justru dinaikkan pada media cetak.
   ===================================================================== */
.exam-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  max-width: 620px;
  border-radius: var(--r-lg);
  background: var(--exam-surface);
  border: 2px solid var(--exam-indigo);
  box-shadow: var(--exam-shadow-raised);
  color: var(--exam-ink);
}
.exam-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--exam-gold);
}
.exam-card__crest {
  flex: none;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: linear-gradient(145deg, var(--exam-indigo-dark), var(--exam-indigo));
  color: #f4dfa8;
  font-size: var(--fs-subhead);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label);
}
.exam-card__ident { flex: 1 1 200px; min-width: 0; }
.exam-card__school {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--exam-muted);
}
.exam-card__title {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-subhead);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
}
.exam-card__term { margin: var(--sp-1) 0 0; font-size: var(--fs-caption); color: var(--exam-muted); }
.exam-card__no {
  flex: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--exam-indigo-soft);
  text-align: end;
}
.exam-card__no span {
  display: block;
  font-size: var(--fs-caption);
  color: var(--exam-muted);
  font-weight: var(--fw-semibold);
}
.exam-card__no strong {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-body);
  font-weight: var(--fw-heavy);
  color: var(--exam-indigo);
  letter-spacing: .02em;
}

.exam-card__id { display: flex; gap: var(--sp-4); align-items: flex-start; }
.exam-card__photo {
  flex: none;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}
.exam-card__photo span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 92px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--exam-line);
  background: var(--exam-canvas);
  color: var(--exam-indigo);
  font-size: var(--fs-heading);
  font-weight: var(--fw-heavy);
}
.exam-card__photo em {
  font-size: var(--fs-caption);
  font-style: normal;
  color: var(--exam-muted);
  text-align: center;
}
.exam-card__facts {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-3);
  margin: 0;
}
.exam-card__facts dt {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--exam-muted);
}
.exam-card__facts dd {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  overflow-wrap: anywhere;
}

.exam-card__tablewrap { overflow-x: auto; }
.exam-card__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-caption);
}
.exam-card__table caption {
  caption-side: top;
  text-align: start;
  padding-bottom: var(--sp-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--exam-muted);
}
.exam-card__table th,
.exam-card__table td {
  padding: var(--sp-2);
  text-align: start;
  border-bottom: 1px solid var(--exam-line);
  vertical-align: top;
  line-height: var(--lh-snug);
}
.exam-card__table th {
  background: var(--exam-sand);
  font-weight: var(--fw-bold);
  color: var(--exam-ink);
}
.exam-card__table td { font-weight: var(--fw-semibold); }
.exam-card__when { display: block; }
/* Rentang jam tidak boleh patah di tengah. */
.exam-card__time { display: block; margin-top: var(--sp-1); white-space: nowrap; color: var(--exam-muted); font-weight: var(--fw-semibold); }
.exam-card__table tbody tr:nth-child(even) td { background: var(--exam-canvas); }

.exam-card__foot { display: flex; flex-direction: column; gap: var(--sp-4); }
.exam-card__rules {
  margin: 0;
  padding-inline-start: var(--sp-5);
  display: grid;
  gap: var(--sp-1);
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--exam-text);
}
.exam-card__signs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-4);
}
.exam-card__sign { text-align: center; }
.exam-card__sign span {
  display: block;
  font-size: var(--fs-caption);
  color: var(--exam-muted);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-8);
}
.exam-card__sign em {
  display: block;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--exam-ink);
  font-style: normal;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}
/* Blok QR kartu peserta. Pola kotaknya digambar SVG oleh portal-exam.js
   (placeholder mockup, bukan QR sungguhan) dan kodenya hanya memuat token
   acak, jadi blok ini aman tampil di layar wali maupun di kertas cetak. */
.exam-card__qr {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3);
  border: 1px dashed var(--exam-line);
  border-radius: var(--r-md);
  background: var(--exam-canvas);
}
.exam-card__qrmark {
  flex: none;
  width: 76px;
  height: 76px;
  padding: var(--sp-1);
  color: var(--exam-ink);
  background: #fff;
  border: 1px solid var(--exam-line);
  border-radius: var(--r-sm);
}
.exam-card__qrtext { min-width: 0; }
.exam-card__qrtoken {
  margin: 0;
  font-size: var(--fs-subhead);
  font-weight: var(--fw-heavy);
  letter-spacing: .08em;
  color: var(--exam-ink);
  overflow-wrap: anywhere;
}
.exam-card__qrnote {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-caption);
  color: var(--exam-muted);
  line-height: var(--lh-snug);
}
.exam-card__code {
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--exam-line);
  font-size: var(--fs-caption);
  color: var(--exam-muted);
  letter-spacing: .04em;
}

/* =====================================================================
   12  LAYAR WALI MURID
   Nada menolong, bukan mengancam. Blok administrasi memakai warna hangat
   Emas Ilmu, bukan merah, dan selalu menutup dengan jalan keluar.
   ===================================================================== */
.exam-warm {
  padding: var(--d-card-pad);
  border-radius: var(--exam-radius);
  background: var(--exam-gold-soft);
  border: 1px solid rgba(215, 165, 46, .40);
}
.exam-warm__kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--exam-gold-dark);
}
.exam-warm__title {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.exam-warm__body,
.exam-warm__assure {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--exam-text);
}
.exam-warm__assure { font-weight: var(--fw-semibold); color: var(--exam-ink); }
.exam-warm__decision {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--exam-surface);
}
.exam-warm__contact {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--exam-surface);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}
.exam-warm__contact p { margin: 0; }
.exam-warm__contact .exam-warm__label { margin: 0 0 var(--sp-1); }
.exam-warm__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--exam-muted);
}

.exam-schedule { display: grid; gap: var(--sp-2); }
/* Tanggal di kiri, keterangan di kanan, status turun ke barisnya sendiri
   pada layar sempit supaya nama mata pelajaran tidak terpotong. */
.exam-schedule__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--d-row-pad);
  border-radius: var(--exam-radius);
  background: var(--exam-surface);
  border: 1px solid var(--exam-line);
}
.exam-schedule__date {
  flex: none;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  background: var(--exam-indigo-soft);
  color: var(--exam-indigo);
}
.exam-schedule__day { font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.exam-schedule__num { font-size: var(--fs-title); font-weight: var(--fw-heavy); line-height: var(--lh-tight); }
.exam-schedule__mon { font-size: var(--fs-caption); }
.exam-schedule__date { grid-row: span 2; }
.exam-schedule__main { grid-column: 2; min-width: 0; }
.exam-schedule__main strong { font-size: var(--fs-subhead); font-weight: var(--fw-bold); }
.exam-schedule__tail { grid-column: 2; }

.exam-bullets {
  margin: 0;
  padding-inline-start: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--exam-text);
}

/* =====================================================================
   13  LAYAR PIMPINAN
   ===================================================================== */
.exam-daystrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: var(--sp-2);
}
.exam-daystrip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-md);
  background: var(--exam-surface);
  border: 1px solid var(--exam-line);
  border-block-end: 4px solid var(--exam-line);
}
.exam-daystrip__item--good { border-block-end-color: var(--exam-emerald); }
.exam-daystrip__item--info { border-block-end-color: var(--exam-gold); }
.exam-daystrip__item--warn {
  border-block-end-color: var(--exam-terracotta);
  background:
    repeating-linear-gradient(135deg, rgba(198, 97, 59, .08) 0 8px, transparent 8px 16px),
    var(--exam-surface);
}
.exam-daystrip__day { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--exam-muted); }
.exam-daystrip__count { font-size: var(--fs-subhead); font-weight: var(--fw-heavy); color: var(--exam-ink); }
.exam-daystrip__label { font-size: var(--fs-caption); color: var(--exam-muted); }

.exam-tablewrap {
  overflow-x: auto;
  border-radius: var(--exam-radius);
  border: 1px solid var(--exam-line);
  background: var(--exam-surface);
}
/* Isyarat gulir tabel rekap: pada wadah sempit (mis. 480px) kolom kanan
   tabel keluar dari pandangan tanpa tanda apa pun. Pembungkus ini memberi
   fade di tepi kanan selama masih ada kolom tersembunyi; kelas has-more
   dikelola portal-exam.js pada render, gulir, dan perubahan ukuran.
   Fade hanya penegas, menggulirnya tetap lewat overflow-x .exam-tablewrap. */
.exam-tablecue { position: relative; min-width: 0; }
.exam-tablecue::after {
  content: "";
  position: absolute;
  inset-block: 1px;
  inset-inline-end: 1px;
  width: 44px;
  border-start-end-radius: var(--exam-radius);
  border-end-end-radius: var(--exam-radius);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--exam-surface));
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.exam-tablecue.has-more::after { opacity: 1; }
.exam-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-caption);
}
.exam-table th,
.exam-table td {
  padding: var(--d-row-pad);
  text-align: start;
  border-bottom: 1px solid var(--exam-line);
  vertical-align: middle;
  white-space: nowrap;
}
/* Kolom pertama memuat nama sesi yang panjang. Dibiarkan membungkus supaya
   tabel tidak perlu digeser jauh ke samping pada layar sempit. */
.exam-table th:first-child,
.exam-table td:first-child { white-space: normal; min-width: 12ch; }
.exam-table th {
  background: var(--exam-sand);
  font-weight: var(--fw-bold);
  color: var(--exam-ink);
}
.exam-table tbody tr:last-child td { border-bottom: 0; }

.exam-audit { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.exam-audit__item {
  padding: var(--d-card-pad);
  border-radius: var(--exam-radius);
  background: var(--exam-surface);
  border: 1px solid var(--exam-line);
  border-inline-start: 4px solid var(--exam-indigo);
}
.exam-audit__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.exam-audit__head strong { font-size: var(--fs-small); }
.exam-audit__reason {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-small);
  font-style: italic;
  line-height: var(--lh-relaxed);
  color: var(--exam-text);
}
.exam-audit__by {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--exam-indigo);
}

/* =====================================================================
   14  MODAL, PICKER, ISIAN
   ===================================================================== */
.exam-modallayer {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
}
.exam-modallayer.is-open { display: block; }
.exam-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 23, 50, .52);
}
.exam-modal {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--exam-canvas);
  box-shadow: var(--exam-shadow-raised);
  animation: exam-rise var(--motion-base) var(--motion-ease);
}
@keyframes exam-rise { from { transform: translateY(18px); opacity: .6; } to { transform: none; opacity: 1; } }
/* Panel dialog difokuskan lewat skrip saat dibuka supaya pembaca layar
   masuk ke dalamnya. Cincin fokus bawaan peramban tidak diperlukan di
   panel itu sendiri — isinya yang tetap punya cincin fokus. */
.exam-modal:focus { outline: none; }

.exam-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--exam-line);
}
.exam-modal__title { margin: 0; font-size: var(--fs-heading); font-weight: var(--fw-heavy); }
.exam-modal__sub { margin: var(--sp-1) 0 0; font-size: var(--fs-caption); color: var(--exam-muted); line-height: var(--lh-snug); }
.exam-close {
  flex: none;
  width: var(--exam-touch); height: var(--exam-touch);
  min-width: var(--exam-touch);
  border-radius: var(--r-pill);
  border: 1px solid var(--exam-line);
  background: var(--exam-surface);
  color: var(--exam-text);
  font-size: var(--fs-body);
  cursor: pointer;
}
.exam-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.exam-modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--exam-line);
  background: var(--exam-surface);
}
.exam-modal__foot > .exam-btn { flex: 1 1 160px; }
.exam-modal__lead { margin: 0; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--exam-text); }
.exam-modal__subject {
  padding: var(--d-card-pad);
  border-radius: var(--exam-radius);
  background: var(--exam-surface);
  border: 1px solid var(--exam-line);
}
.exam-modal__subject strong { font-size: var(--fs-subhead); }
.exam-modal__flag { margin: var(--sp-3) 0 0; }
.exam-modal__detail {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-caption);
  color: var(--exam-text);
  line-height: var(--lh-relaxed);
}

.exam-picker { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.exam-pick {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--exam-touch);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--exam-line);
  background: var(--exam-surface);
  color: var(--exam-ink);
  text-align: start;
  cursor: pointer;
}
.exam-pick--static { cursor: default; }
.exam-pick.is-current { border-color: var(--exam-indigo); border-inline-start-width: 4px; }
.exam-pick__main { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.exam-pick__main strong { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.exam-pick__meta { font-size: var(--fs-caption); color: var(--exam-muted); overflow-wrap: anywhere; }
.exam-pick__tail {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
  max-width: 45%;
}

.exam-fieldset { margin: 0; padding: 0; border: 0; }
.exam-legend {
  padding: 0 0 var(--sp-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--exam-muted);
}
.exam-options { display: grid; gap: var(--sp-2); }
.exam-option {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--exam-touch);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--exam-line);
  background: var(--exam-surface);
  color: var(--exam-ink);
  text-align: start;
  cursor: pointer;
}
.exam-option__mark { font-size: var(--fs-subhead); line-height: 1; color: var(--exam-muted); }
.exam-option__text { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.exam-option__text strong { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.exam-option__hint { font-size: var(--fs-caption); color: var(--exam-muted); line-height: var(--lh-snug); }
.exam-option.is-active { border-width: 2px; }
.exam-option--good.is-active { border-color: var(--exam-emerald); background: var(--exam-emerald-soft); }
.exam-option--good.is-active .exam-option__mark { color: var(--exam-emerald-dark); }
.exam-option--info.is-active { border-color: var(--exam-indigo); background: var(--exam-indigo-soft); }
.exam-option--info.is-active .exam-option__mark { color: var(--exam-indigo); }
.exam-option--alert {
  border-style: dashed;
  border-color: rgba(198, 97, 59, .55);
  background: var(--exam-terracotta-soft);
}
.exam-option--alert.is-active {
  border-style: solid;
  border-color: var(--exam-terracotta-dark);
}
.exam-option--alert .exam-option__mark { color: var(--exam-terracotta-dark); }

.exam-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.exam-label { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--exam-ink); }
.exam-input,
.exam-select,
.exam-textarea {
  width: 100%;
  min-height: var(--exam-touch);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--exam-line);
  background: var(--exam-surface);
  color: var(--exam-ink);
  font-size: var(--fs-body);
  font-family: inherit;
}
.exam-textarea { min-height: calc(var(--exam-touch) * 2.2); resize: vertical; line-height: var(--lh-relaxed); }
.exam-help { margin: 0; font-size: var(--fs-caption); color: var(--exam-muted); line-height: var(--lh-snug); }

/* =====================================================================
   15  TOAST
   ===================================================================== */
.exam-toast {
  position: fixed;
  inset-inline: var(--sp-4);
  inset-block-end: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  z-index: 950;
  max-width: 520px;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--exam-indigo-dark);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  box-shadow: var(--exam-shadow-raised);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease);
}
.exam-toast.is-show { opacity: 1; transform: none; }

/* =====================================================================
   16  CETAK
   Hanya aktif ketika JS modul menandai <html data-exam-printing>, jadi
   aturan global di bawah tidak pernah menyentuh halaman lain.
   ===================================================================== */
@media print {
  html[data-exam-printing] body * { visibility: hidden; }
  html[data-exam-printing] [data-exam-cardface],
  html[data-exam-printing] [data-exam-cardface] * { visibility: visible; }
  html[data-exam-printing] [data-exam-cardface] {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    max-width: none;
    box-shadow: none;
    border-width: 1px;
  }
  /* Kartu cetak dinaikkan keterbacaannya, tidak pernah diperkecil. */
  html[data-exam-printing] .exam-card__table { font-size: var(--fs-small); }
  html[data-exam-printing] .exam-card__rules,
  html[data-exam-printing] .exam-card__code,
  html[data-exam-printing] .exam-card__qrnote,
  html[data-exam-printing] .exam-card__sign em { font-size: var(--fs-small); }
  html[data-exam-printing] .exam-card__facts dd { font-size: var(--fs-subhead); }
}

/* =====================================================================
   17  WADAH LEBAR
   ---------------------------------------------------------------------
   Acuannya lebar WADAH, bukan lebar viewport. Portal Staf membingkai
   isinya pada 480px walaupun layarnya 1280px, sedangkan Portal Pimpinan
   memberi lebih dari 1000px. Aturan berbasis viewport karena itu
   menyala di tempat yang salah: dua kolom dipaksakan ke dalam kolom
   selebar 432px, dan judul mata pelajaran pecah menjadi satu huruf per
   baris. Container query membaca lebar yang benar-benar tersedia.
   ===================================================================== */
.exam-root { container-type: inline-size; container-name: exam; }

@container exam (min-width: 620px) {
  .exam-head__title { font-size: var(--fs-display); }
  .exam-attend__row {
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
  .exam-attend__controls { grid-column: auto; width: 260px; }
  .exam-attend__reason { grid-column: 2 / -1; }
  .exam-row__actions > .exam-btn { flex: 0 1 auto; min-width: 200px; }

  .exam-schedule__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .exam-schedule__date { grid-row: auto; }
  .exam-schedule__tail { grid-column: 3; grid-row: 1; }
}

@container exam (min-width: 860px) {
  .exam-day__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exam-issuelist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exam-people--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exam-audit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exam-plan__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .exam-metrics--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container exam (min-width: 1040px) {
  /* Kartu peserta bertanda tetap lebar supaya alasan dan keputusan terbaca
     sebagai kalimat, bukan sebagai kolom sempit. */
  .exam-people--flag { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exam-shell { padding-inline: var(--sp-7); }
  .exam-people--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .exam-card__table { font-size: var(--fs-small); }
}

/* Lapisan modal hidup di luar .exam-root (dipasang ke <body>), jadi
   ukurannya memang mengikuti viewport dan tetap memakai media query. */
@media (min-width: 900px) {
  .exam-modal {
    inset-block: 50% auto;
    inset-inline: 50% auto;
    transform: translate(-50%, -50%);
    width: min(720px, 92vw);
    max-height: 88vh;
    border-radius: var(--r-xl);
  }
  @keyframes exam-rise { from { transform: translate(-50%, calc(-50% + 14px)); opacity: .6; } to { transform: translate(-50%, -50%); opacity: 1; } }
}

/* =====================================================================
   18  FOKUS DAN GERAK
   ===================================================================== */
.exam-scope button:focus-visible,
.exam-scope select:focus-visible,
.exam-scope input:focus-visible,
.exam-scope textarea:focus-visible {
  outline: 3px solid rgba(215, 165, 46, .60);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .exam-modal { animation: none; }
  .exam-bar__fill,
  .exam-tab,
  .exam-tablecue::after,
  .exam-toast { transition: none; }
}

/* =====================================================================
   KARTU ROMBEL PADA PENERBITAN KARTU PESERTA
   ---------------------------------------------------------------------
   .exam-cardgroups dan .exam-cardgroup dipakai di panitiaKartu() tetapi
   sebelumnya tidak pernah punya aturan sama sekali. Akibatnya empat rombel
   tampil sebagai <div> telanjang: tidak ada bidang kartu, tidak ada jarak
   antarbaris, dan tombol "Terbitkan 25 kartu" menempel langsung ke judul
   rombel berikutnya sehingga daftarnya terbaca seperti satu paragraf.

   Bentuknya sengaja dibuat sama dengan .exam-row supaya sekeluarga dengan
   baris sesi ujian yang sudah ada.
   ===================================================================== */
.exam-cardgroups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--d-card-gap);
}

.exam-cardgroup {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--d-card-pad);
  min-width: 0;
  border-radius: var(--exam-radius);
  background: var(--exam-surface);
  border: 1px solid var(--exam-line);
  border-inline-start: 4px solid var(--exam-emerald);
  box-shadow: var(--exam-shadow);
}

/* Rombel yang kartunya belum terbit adalah pekerjaan yang belum selesai,
   jadi ditandai warna yang sama dengan baris sesi bermasalah. */
.exam-cardgroup:has(.exam-pill--warn) { border-inline-start-color: var(--exam-gold); }

.exam-cardgroup__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  min-width: 0;
}

.exam-cardgroup__top > div { min-width: 0; flex: 1 1 200px; }

.exam-cardgroup__top strong {
  display: block;
  color: var(--exam-ink);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

/* Tombol adalah aksi utama kartu ini, jadi diberi lebar penuh di ponsel
   supaya terbaca sebagai tombol, bukan sebagai tautan yang menggantung. */
.exam-cardgroup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.exam-cardgroup__actions > .exam-btn { flex: 1 1 200px; min-height: var(--touch-min); }

@container exam (min-width: 560px) {
  .exam-cardgroups { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .exam-cardgroup__actions > .exam-btn { flex: 0 1 auto; }
}