/* =============================================================
   คลังข้อสอบแปลธรรมบท /exam-archive/ — หน้าตาชุดเดียวกับ /exam-bank (หลวงพี่สั่ง ๑๓ ต.ค. ๒๕๖๙ "ตั้งแต่ hero เลย")
   ฐาน: /app/css/study-cinema.css (ป้ายใหญ่ sc-bill · แถบชิป sc-chipbar · โทเคน --sc-* สว่าง/มืด)
   ไฟล์นี้: ส่วนเฉพาะหน้า (evx-) + ผูกโทเคนเดิมของหน้า (--ev-*) เข้ากับธีม
   โหมดมืดของเนื้อหาเดิม (การ์ดรายปี ตัวกรอง กราฟ) อยู่ใน css/dark.css (สร้างจาก style.css ด้วย tools/build_dark.py)
   ============================================================= */
body.evx-page {
	--ev-bg: var(--sc-bg);
	font-family: 'Sarabun', sans-serif;
	background: var(--sc-bg) !important;
}

/* ---------- ป้ายใหญ่ ---------- */
.evx-bill-art { object-position: 66% 42%; }
.evx-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.evx-crumb a {
	display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: 0 .9rem; box-sizing: border-box;
	border-radius: 999px; border: 1px solid var(--sc-line); background: rgba(var(--ui-tint, 255, 255, 255), .08);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	color: var(--ui-strong, #fff) !important; font-size: calc(.9rem * var(--reading-scale, 1)); font-weight: 800; text-decoration: none !important;
}
.evx-crumb a:hover { background: rgba(var(--ui-tint, 255, 255, 255), .16); }
.evx-crumb a i { color: var(--sc-gold); }
.evx-bill .sc-title { margin: .2rem 0 0; }
.evx-bill .sc-actions .sc-btn { font-family: inherit; }

.evx-stats { list-style: none; margin: .15rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.evx-stats li {
	display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px;
	background: rgba(var(--ui-lpanel-rgb, 15, 23, 48), .62); border: 1px solid var(--sc-line);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	color: var(--ui-ink2, #d7deef); font-size: calc(.88rem * var(--reading-scale, 1)); font-weight: 700;
}
.evx-stats i { color: var(--sc-gold); }
.evx-stats b { color: var(--sc-gold); font-weight: 800; }

/* เส้นทาง ๔ ขั้น = ๔ แท็บ (ขั้นที่เปิดอยู่มีกรอบทอง) */
.evx-path { max-width: 860px; }
.evx-path .sc-progress-head i { color: var(--sc-gold); margin-right: .2rem; }
.evx-steps { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.evx-step {
	width: 100%; height: 100%; min-height: 58px; display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem;
	border-radius: 10px; border: 1px solid var(--sc-line); background: rgba(var(--ui-tint, 255, 255, 255), .05);
	color: var(--ui-strong, #fff); font: inherit; text-align: left; cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.evx-step:hover { background: rgba(var(--ui-tint, 255, 255, 255), .1); border-color: rgba(245, 191, 69, .45); }
.evx-step.is-on { border-color: var(--sc-gold-fill, var(--sc-gold)); box-shadow: inset 0 0 0 1px var(--sc-gold-fill, var(--sc-gold)); }
.evx-step-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.35; }
.evx-step-txt b { font-size: calc(.95rem * var(--reading-scale, 1)); font-weight: 800; }
.evx-step-txt small { margin-top: 1px; font-size: max(.8125rem, calc(.8rem * var(--reading-scale, 1))); font-weight: 600; color: var(--sc-muted); }
.evx-step-go { color: var(--sc-gold); font-size: calc(.78rem * var(--reading-scale, 1)); transition: transform .15s ease; }
.evx-step:hover .evx-step-go { transform: translateX(3px); }

/* ---------- แถบชิปติดหัว (เมนูบนของหน้า pali เลื่อนหายไปกับหน้า จึงปักที่ขอบบนจอ) ---------- */
.evx-chipbar { top: 0; }
.evx-chipbar.is-stuck { box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .7); }
.evx-chipbar-inner { display: flex; align-items: center; gap: .75rem; }
.evx-chipbar .sc-chips { flex: 1; min-width: 0; }
.evx-chip, .evx-textsize { font-family: inherit; }
.evx-chip .bi { color: var(--sc-gold); }
.evx-chip[aria-current="true"] .bi { color: inherit; }
.evx-textsize { flex: none; }
.evx-textsize-big { font-size: 1.2em; margin-left: -.2rem; }
.evx-textsize[aria-pressed="true"] { background: var(--sc-gold-fill, var(--sc-gold)); border-color: transparent; color: #1b1505; }
.evx-chip:focus-visible, .evx-step:focus-visible, .evx-textsize:focus-visible, .evx-crumb a:focus-visible { outline: 3px solid var(--sc-gold); outline-offset: 3px; }

/* เนื้อหาเดิม: กว้างเท่าป้ายใหญ่ (sc-wrap) · แถบค้นหาปักชิดใต้แถบชิป (--evx-bar วัดจริงใน index.php) */
.evx-page .ev-container { max-width: 80rem; padding: 1.6rem 1rem 4rem; }
@media (min-width: 640px) { .evx-page .ev-container { padding-left: 1.5rem; padding-right: 1.5rem; } }
.evx-page .ev-toolbar { top: var(--evx-bar, 70px); background: color-mix(in srgb, var(--sc-bg) 92%, transparent); }

/* โหมดมืด: โทเคนเดิมของหน้า (--ev-*) — กฎที่สีตายตัวอยู่ใน dark.css */
html[data-ui="dark"] body.evx-page {
	--ev-primary: #a5b4fc; --ev-primary-light: #c7d2fe; --ev-primary-dark: #c7d2fe; --ev-primary-wash: rgba(129, 140, 248, .16);
	--ev-accent: #a5b4fc; --ev-accent-light: rgba(129, 140, 248, .16);
	--ev-card-bg: #141d3a; --ev-surface-2: #1b2648;
	--ev-text: #f3f6ff; --ev-text-soft: #c9d2ea; --ev-text-muted: #aab4d0; --ev-border: rgba(255, 255, 255, .13);
	--ev-past-accent: #a5b4fc; --ev-predict-accent: #93c5fd; --ev-pdf: #fca5a5;
	color-scheme: dark;
}
html[data-ui="dark"] body.evx-page .ev-toolbar { background: rgba(10, 15, 30, .92); }

@media (max-width: 900px) {
	.evx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.evx-bill-art { object-position: 72% 30%; }
	.evx-steps { grid-template-columns: minmax(0, 1fr); }
	.evx-step { min-height: 52px; }
	.evx-textsize-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.evx-step, .evx-step-go { transition: none; }
}