/**
 * Elibrary Test - Main Gateway & Test Information (V0.1.5.5)
 * ---------------------------------------------------------------------
 * CSS untuk layar pintu masuk (rantai selector Kategori Utama ->
 * Subkategori -> Pilih Tes) dan kartu informasi tes.
 *
 * SELURUH selector ter-scope .eltest-app dan memakai design token yang
 * sudah ada di assets/css/elibrary-test.css. Tidak ada selector global,
 * tidak ada satu pun aturan Game UI Phase 3 yang ditimpa, dan
 * elibrary-test.css tetap BYTE-IDENTICAL.
 */

.eltest-app .eltest-gateway-rows {
	display: flex;
	flex-direction: column;
}

/**
 * V0.1.5.8 -- target sentuh & kestabilan visual.
 * Hanya berlaku di dalam kartu gateway; form pengaturan tes dan seluruh
 * Game UI Phase 3 tidak tersentuh.
 */
.eltest-app .eltest-gateway-card .eltest-select {
	min-height: 48px;
	cursor: pointer;
	/* Hilangkan jeda 300ms & double-tap zoom di ponsel -- penyebab umum
	   dropdown terasa "susah diklik". */
	touch-action: manipulation;
	/* 16px penuh: di bawah ini Safari iOS otomatis memperbesar halaman
	   saat select difokus, yang terlihat seperti layout melompat. */
	font-size: 16px;
}

/* Baris selector diberi tinggi minimum yang tetap, supaya menambah atau
   mengurangi satu langkah tidak menggeser baris di atasnya. */
.eltest-app .eltest-gateway-rows .eltest-form-row {
	min-height: 78px;
}

.eltest-app .eltest-gateway-card .eltest-select:disabled {
	background: #f1f5f9;
	color: var(--eltest-muted);
	cursor: not-allowed;
}

/* Status kategori pada <option> tidak bisa diberi warna secara konsisten
   lintas browser, jadi penandanya memakai karakter ● / ○ dari data --
   selalu terbaca, termasuk oleh pembaca layar. */

.eltest-app .eltest-gateway-empty {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 6px;
	padding: 14px 16px;
	border-radius: var(--et-radius-md);
	border: 1.5px solid #fde68a;
	background: #fffbeb;
	color: #92400e;
	font-size: 0.9rem;
	line-height: 1.5;
}

.eltest-app .eltest-gateway-back {
	display: inline-block;
	margin: 0 0 14px;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--eltest-primary);
	text-decoration: none;
}

.eltest-app .eltest-gateway-back:hover,
.eltest-app .eltest-gateway-back:focus-visible {
	text-decoration: underline;
}

/* =====================================================================
   KARTU INFORMASI TES
   ===================================================================== */

.eltest-app .eltest-testinfo {
	display: flex;
	flex-direction: column;
	margin: 6px 0 16px;
	padding: 16px;
	border: 1.5px solid var(--eltest-border);
	border-radius: var(--et-radius-lg);
	background: #f8fafc;
	box-shadow: var(--et-shadow-soft);
	min-width: 0;
}

.eltest-app .eltest-testinfo-badge {
	align-self: flex-start;
	margin-bottom: 8px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #dbeafe;
	color: var(--eltest-primary-dark);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.eltest-app .eltest-testinfo-title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--eltest-text);
}

.eltest-app .eltest-testinfo-subtitle {
	margin: 2px 0 12px;
	font-size: 0.94rem;
	color: var(--eltest-muted);
	line-height: 1.4;
}

.eltest-app .eltest-testinfo-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.eltest-app .eltest-testinfo-row {
	display: flex;
	gap: 8px;
	font-size: 0.86rem;
	line-height: 1.45;
	min-width: 0;
}

.eltest-app .eltest-testinfo-key {
	flex: 0 0 124px;
	color: var(--eltest-muted);
}

.eltest-app .eltest-testinfo-val {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	color: var(--eltest-text);
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.eltest-app .eltest-testinfo-cta {
	margin-top: 14px;
	text-decoration: none;
	text-align: center;
}

@media ( max-width: 420px ) {
	.eltest-app .eltest-testinfo-row {
		flex-direction: column;
		gap: 0;
	}

	.eltest-app .eltest-testinfo-key {
		flex: 0 0 auto;
	}
}

/* =====================================================================
   V0.1.5.9 -- NAVIGASI KONTEKSTUAL
   Breadcrumb, tautan kembali, dialog keluar, dan CTA hasil.
   Semua ter-scope .eltest-app dan memakai token warna yang sudah ada;
   elibrary-test.css & elibrary-test-gameui.js tetap tidak tersentuh.
   ===================================================================== */

.eltest-app .eltest-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
	font-size: 0.78rem;
	line-height: 1.5;
	/* Membungkus, bukan menggulir: breadcrumb panjang tidak pernah
	   mendorong halaman ke samping di layar 320px. */
	min-width: 0;
}

.eltest-app .eltest-crumb-link {
	color: var(--eltest-primary);
	text-decoration: none;
	word-break: break-word;
}

.eltest-app .eltest-crumb-link:hover,
.eltest-app .eltest-crumb-link:focus-visible {
	text-decoration: underline;
}

.eltest-app .eltest-crumb-sep {
	color: var(--eltest-muted);
}

.eltest-app .eltest-crumb-current {
	color: var(--eltest-muted);
	font-weight: 600;
	word-break: break-word;
}

.eltest-app .eltest-context-back {
	display: inline-block;
	margin: 0 0 14px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--eltest-primary);
	text-decoration: none;
	/* Target sentuh nyaman tanpa mengubah tinggi kartu. */
	padding: 6px 0;
	min-height: 32px;
}

.eltest-app .eltest-context-back:hover,
.eltest-app .eltest-context-back:focus-visible {
	text-decoration: underline;
}

/* --------------------------- KELUAR DARI TES --------------------------- */

.eltest-app .eltest-exit-test {
	align-self: flex-start;
	/* V0.1.5.12 -- HARDENING 2: beri tombol stacking context sendiri agar
	   tidak tertimpa elemen dekoratif di dalam kartu tes. Ini TIDAK dapat
	   mengalahkan admin bar / header sticky milik tema (keduanya fixed di
	   luar plugin); untuk kasus itu lihat catatan scroll-margin di bawah. */
	position: relative;
	z-index: 3;
	margin-bottom: 10px;
	padding: 8px 0;
	min-height: 40px;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--eltest-muted);
	cursor: pointer;
	touch-action: manipulation;
}

.eltest-app .eltest-exit-test:hover,
.eltest-app .eltest-exit-test:focus-visible {
	color: var(--eltest-primary);
	text-decoration: underline;
}

.eltest-exit-dialog {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(15, 23, 42, 0.55);
}

.eltest-exit-panel {
	width: 100%;
	max-width: 420px;
	box-sizing: border-box;
	padding: 22px;
	border-radius: var(--et-radius-lg);
	background: var(--eltest-card);
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
}

.eltest-exit-title {
	margin: 0 0 8px;
	font-size: 1.12rem;
	font-weight: 800;
	color: var(--eltest-text);
}

.eltest-exit-text {
	margin: 0 0 18px;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--eltest-muted);
}

.eltest-exit-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.eltest-exit-confirm {
	text-align: center;
	text-decoration: none;
}

/* ------------------------- CTA HALAMAN HASIL ------------------------- */

.eltest-app .eltest-result-nav {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	margin-top: 14px;
}

.eltest-app .eltest-result-back,
.eltest-app .eltest-result-explore {
	text-align: center;
	text-decoration: none;
}

.eltest-app .eltest-result-home {
	align-self: center;
	padding: 8px 4px;
	min-height: 36px;
	font-size: 0.84rem;
	color: var(--eltest-muted);
	text-decoration: none;
}

.eltest-app .eltest-result-home:hover,
.eltest-app .eltest-result-home:focus-visible {
	color: var(--eltest-primary);
	text-decoration: underline;
}

@media ( min-width: 560px ) {
	.eltest-exit-actions {
		flex-direction: row-reverse;
		justify-content: flex-start;
	}

	.eltest-app .eltest-result-nav {
		align-items: center;
	}

	.eltest-app .eltest-result-back,
	.eltest-app .eltest-result-explore {
		min-width: 280px;
	}
}


/**
 * V0.1.5.12 -- HARDENING 3: ruang aman terhadap chrome situs.
 * Admin bar WordPress (32px) dan header sticky tema menutupi pita atas
 * viewport. Saat browser menggulir elemen plugin ke posisi teratas
 * (fokus, anchor, scrollIntoView), elemen bisa mendarat tepat di bawah
 * pita itu dan pointer tidak pernah sampai -- terbukti lewat
 * elementFromPoint pada harness produksi.
 *
 * scroll-margin-top membuat setiap gulir otomatis menyisakan ruang,
 * sehingga kontrol plugin tidak pernah diparkir di bawah chrome situs.
 */
.eltest-app,
.eltest-app .eltest-exit-test,
.eltest-app .eltest-question-card {
	scroll-margin-top: 140px;
}