/**
 * Elibrary Test - Advanced Question Types (V0.1.5.3)
 * ---------------------------------------------------------------------
 * File TERPISAH & TERISOLASI untuk tiga hal yang belum ada sebelum
 * V0.1.5.3: stimulus (teks bacaan), MCMA (checkbox), dan tipe category
 * (PG kompleks).
 *
 * ATURAN YANG DIPEGANG FILE INI:
 *  - SELURUH selector diawali .eltest-app (scope), sama seperti stylesheet
 *    utama. Tidak ada satu pun selector global (button/input/table/div).
 *  - TIDAK menimpa satu pun selector Game UI Phase 3. Seluruh nilai warna,
 *    radius, shadow, dan transisi diambil dari design token yang SUDAH ADA
 *    di assets/css/elibrary-test.css, sehingga tipe soal baru tampil
 *    sebagai Game UI Phase 3 yang sama -- bukan UI kedua.
 *  - assets/css/elibrary-test.css dan assets/css/elibrary-test-categories.css
 *    TETAP BYTE-IDENTICAL dengan V0.1.5.2.
 */

/* =====================================================================
   STIMULUS -- teks bacaan di atas soal
   ===================================================================== */

.eltest-app .eltest-stimulus {
	border: 1.5px solid var(--eltest-border);
	border-radius: var(--et-radius-lg);
	background: #f8fafc;
	box-shadow: var(--et-shadow-soft);
	margin-bottom: 16px;
	overflow: hidden;
}

.eltest-app .eltest-stimulus-head {
	padding: 12px 14px;
	border-bottom: 1.5px solid var(--eltest-border);
	background: #eff6ff;
}

.eltest-app .eltest-stimulus-title {
	font-weight: 700;
	font-size: 1rem;
	color: var(--eltest-primary-dark);
	line-height: 1.35;
}

.eltest-app .eltest-stimulus-type {
	margin-top: 2px;
	font-size: 0.8rem;
	color: var(--eltest-muted);
}

.eltest-app .eltest-stimulus-body {
	padding: 14px;
	font-size: 0.96rem;
	line-height: 1.65;
	color: var(--eltest-text);
	/* Di layar kecil, bacaan panjang digulir di dalam kotaknya sendiri
	   agar pertanyaan tetap terlihat -- perilaku yang sama dengan paket
	   sumber. Di layar lebar dibiarkan memanjang penuh. */
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.eltest-app .eltest-stimulus-body p {
	margin: 0 0 10px;
}

.eltest-app .eltest-stimulus-body p:last-child {
	margin-bottom: 0;
}

.eltest-app .eltest-stimulus-body .dlg {
	padding-left: 12px;
	border-left: 3px solid var(--eltest-border);
	font-style: italic;
}

.eltest-app .eltest-stimulus-body .poem p {
	text-align: left;
}

.eltest-app .eltest-stimulus-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0;
	font-size: 0.92rem;
}

.eltest-app .eltest-stimulus-body th,
.eltest-app .eltest-stimulus-body td {
	border: 1px solid var(--eltest-border);
	padding: 7px 9px;
	text-align: left;
}

.eltest-app .eltest-stimulus-body thead th {
	background: #eff6ff;
	font-weight: 700;
}

/* Tabel sempit di HP: bisa digeser horizontal di dalam kotaknya sendiri,
   tanpa pernah membuat halaman ikut menggeser. */
.eltest-app .eltest-stimulus-body .tblwrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* =====================================================================
   INSTRUKSI SOAL (mis. "Jawaban benar lebih dari satu.")
   ===================================================================== */

.eltest-app .eltest-question-instruction {
	margin: -4px 0 12px;
	padding: 8px 12px;
	border-radius: var(--et-radius-sm);
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #92400e;
	font-size: 0.88rem;
	line-height: 1.45;
}

/* =====================================================================
   MCMA -- checkbox (memakai .eltest-option yang sudah ada)
   ===================================================================== */

/* Stylesheet utama hanya menyembunyikan input[type="radio"]; checkbox
   perlu diperlakukan sama agar tanda A/B/C/D/E tetap jadi penanda visual. */
.eltest-app .eltest-option input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

/* Penanda MCMA berbentuk kotak (bukan lingkaran) -- isyarat visual bahwa
   jawaban boleh lebih dari satu. Warna, ukuran, dan state :checked tetap
   diwarisi dari .eltest-option-mark stylesheet utama. */
.eltest-app .eltest-option-multi .eltest-option-mark {
	border-radius: var(--et-radius-sm);
}

/* Proxy suara Game UI: tidak pernah terlihat & tidak bisa difokus. */
.eltest-app .eltest-sound-proxy {
	position: absolute;
	width: 1px;
	height: 1px;
	/* .eltest-option (stylesheet utama) menetapkan min-height: 48px dan
	   gap: 12px. Keduanya harus dinolkan di sini, sebab min-height
	   mengalahkan height: 1px sehingga elemen proxy tetap mengambil
	   tinggi 48px -- ditemukan oleh QA frontend V0.1.5.3. */
	min-height: 0;
	gap: 0;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	pointer-events: none;
	box-shadow: none;
}

/* =====================================================================
   CATEGORY -- baris pernyataan + pilihan kategori
   ===================================================================== */

.eltest-app .eltest-category {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.eltest-app .eltest-category-row {
	border: 1.5px solid var(--eltest-border);
	border-radius: var(--et-radius-md);
	background: var(--eltest-card);
	box-shadow: var(--et-shadow-soft);
	padding: 12px;
}

.eltest-app .eltest-category-statement {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-bottom: 10px;
	font-size: 0.95rem;
	line-height: 1.5;
}

.eltest-app .eltest-category-number {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--eltest-muted);
}

.eltest-app .eltest-category-text {
	flex: 1 1 auto;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.eltest-app .eltest-category-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Tombol kategori memakai .eltest-option sehingga hover/press/sound Game
   UI Phase 3 berlaku otomatis; di sini hanya ukurannya yang disesuaikan
   agar dua pilihan muat berdampingan. */
.eltest-app .eltest-category-choice {
	flex: 1 1 140px;
	justify-content: center;
	text-align: center;
	min-height: 44px;
	padding: 10px 12px;
	font-size: 0.92rem;
}

.eltest-app .eltest-category-choice .eltest-option-text {
	flex: 0 1 auto;
	font-weight: 600;
}

@media ( max-width: 380px ) {
	.eltest-app .eltest-category-choices {
		flex-direction: column;
	}

	.eltest-app .eltest-category-choice {
		flex: 1 1 auto;
	}
}

/* =====================================================================
   HASIL & PEMBAHASAN -- tambahan untuk skor sebagian & tipe baru
   ===================================================================== */

.eltest-app .eltest-stat-partial {
	color: var(--eltest-warning);
}

.eltest-app .eltest-explanation-item.is-partial {
	border-left-color: var(--eltest-warning);
}

.eltest-app .eltest-explanation-option.is-picked-option {
	font-weight: 600;
}

.eltest-app .eltest-explanation-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 8px 0;
}

.eltest-app .eltest-explanation-row {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 8px 10px;
	border-radius: var(--et-radius-sm);
	border: 1px solid var(--eltest-border);
	font-size: 0.9rem;
	line-height: 1.45;
}

.eltest-app .eltest-explanation-row-answer {
	font-size: 0.82rem;
	color: var(--eltest-muted);
}

.eltest-app .eltest-explanation-points {
	margin-top: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--eltest-warning);
}

.eltest-app .eltest-explanation-label {
	display: block;
	font-weight: 700;
	margin-bottom: 4px;
}

.eltest-app .eltest-explanation-body {
	line-height: 1.6;
}

.eltest-app .eltest-explanation-body p {
	margin: 0 0 8px;
}

.eltest-app .eltest-explanation-body p:last-child {
	margin-bottom: 0;
}

.eltest-app .eltest-explanation-body ul {
	margin: 0 0 8px;
	padding-left: 20px;
}

.eltest-app .eltest-explanation-body li {
	margin-bottom: 4px;
}

.eltest-app .eltest-explanation-body .whynot {
	color: var(--eltest-muted);
}