/* ข้อสอบแปลบาลีพื้นฐาน (หลักสูตร พม.โดนี่)
   หน้าจอ = เครื่องมือจัดชุดข้อสอบ · กระดาษสอบจริงออกทาง PDF (js/pdf.js) ไม่ใช่ @media print
   สีเป็นชุด indigo/plum ให้ต่างจากข้อสอบเติมคำ (page/exam_blank เป็นเขียว) มองแวบเดียวรู้ว่าคนละเครื่องมือ */
@font-face {
	font-family: 'THSarabunPali';
	src: url('/assets/fonts/THSarabunPali.ttf') format('truetype');
	font-display: swap;
}

:root {
	--ed-primary: #43348c;
	--ed-primary-soft: #eeebfa;
	--ed-accent: #146b52;          /* สีเฉลย — เดียวกับตัวหนังสือในใบเฉลย PDF */
	--ed-accent-soft: #e8f4ef;
	--ed-text: #1c1930;
	--ed-text-soft: #6a6685;
	--ed-line: #ddd9ef;
	--ed-warn: #9a5b06;
	--ed-warn-soft: #fdf3e0;
	--ed-bg: #f7f6fc;
}
[v-cloak] { display: none !important; }

/* ⚠ ขนาดฐานต้องตั้งที่ `:root` ไม่ใช่ `html` หรือ `body` — เทมเพลตมี
   `:root { font-size: var(--bs-root-font-size) }` และ `:root` เป็น pseudo-class
   (specificity 0,1,0) ชนะ `html` (0,0,1) เสมอ · ตั้งที่ body ก็ไม่มีผลกับ rem
   THSarabunPali เล็กกว่าตัวละตินที่ขนาดเท่ากัน จึงต้องขยับขึ้นให้อ่านสบาย */
:root { font-size: 21px; }

.ed-body {
	margin: 0; background: var(--ed-bg); color: var(--ed-text);
	font-family: 'THSarabunPali', 'Sarabun', system-ui, sans-serif;
	font-size: 1rem; line-height: 1.5;
}

/* ── แถบบน ── */
.ed-appbar { background: var(--ed-primary); color: #fff; position: sticky; top: 0; z-index: 20; }
.ed-appbar-inner { max-width: 1020px; margin: 0 auto; display: flex; align-items: center;
	gap: .75rem; padding: .6rem 1rem; }
.ed-back { color: #fff; opacity: .85; text-decoration: none; font-size: 1.05rem; }
.ed-back:hover { opacity: 1; }
.ed-brand { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
.ed-brand-mark { background: rgba(255,255,255,.17); border-radius: 10px; width: 38px; height: 38px;
	display: grid; place-items: center; }
.ed-brand-text { display: block; font-size: 1.14rem; line-height: 1.15; }
.ed-brand-sub { display: block; font-size: .76rem; opacity: .82; }

.ed-shell { max-width: 1020px; margin: 0 auto; padding: 1rem; }
.ed-loading { text-align: center; padding: 3.5rem 1rem; color: var(--ed-primary); font-size: 1.1rem; }

.ed-card { background: #fff; border: 1px solid var(--ed-line); border-radius: 14px;
	padding: 1rem 1.15rem; margin-bottom: 1rem; }
.ed-card-title { font-size: 1.18rem; margin: 0 0 .8rem; display: flex; align-items: center;
	gap: .5rem; flex-wrap: wrap; }
.ed-card-title small { font-weight: 400; font-size: .8rem; color: var(--ed-text-soft); }
.ed-card-title .ed-count { margin-left: auto; font-size: .85rem; font-weight: 400;
	color: var(--ed-primary); background: var(--ed-primary-soft);
	border-radius: 999px; padding: .1rem .65rem; }
.ed-note { margin: -.3rem 0 .9rem; font-size: .92rem; color: var(--ed-text-soft); }
.ed-empty { color: var(--ed-text-soft); text-align: center; padding: 1.4rem .5rem; margin: 0; }

.ed-score-policy { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 .85rem;
	padding: .65rem .75rem; border: 1px solid #cfc7ef; border-radius: 10px;
	background: var(--ed-primary-soft); color: var(--ed-text); font-size: .92rem; line-height: 1.55; }
.ed-score-policy > i { color: var(--ed-primary); margin-top: .2rem; }
.ed-score-policy > div { min-width: 0; overflow-wrap: anywhere; }
.ed-score-policy strong, .ed-score-policy span { display: block; }
.ed-score-policy code { font-family: inherit; font-size: 1em; color: var(--ed-primary);
	background: rgba(255,255,255,.7); border-radius: 5px; padding: 0 .2rem;
	white-space: normal; overflow-wrap: anywhere; }

/* ── การ์ดหัวข้อสอบ ๘ ใบ ── */
.ed-exams { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .55rem; }
.ed-exam { display: flex; align-items: center; gap: .7rem; text-align: left; cursor: pointer;
	background: #fff; border: 1px solid var(--ed-line); border-radius: 12px;
	padding: .55rem .75rem; font: inherit; color: inherit; transition: .14s; }
.ed-exam:hover { border-color: #b9afe4; background: #fbfaff; }
.ed-exam.on { border-color: var(--ed-primary); background: var(--ed-primary-soft);
	box-shadow: inset 0 0 0 1px var(--ed-primary); }
.ed-exam-no { flex: 0 0 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
	background: var(--ed-primary-soft); color: var(--ed-primary); font-size: 1.05rem; }
.ed-exam.on .ed-exam-no { background: var(--ed-primary); color: #fff; }
.ed-exam-body { min-width: 0; }
.ed-exam-title { display: block; font-size: 1.1rem; line-height: 1.25; }
.ed-exam-meta { display: block; font-size: .76rem; color: var(--ed-text-soft); margin-top: .1rem; }

/* ── ฟอร์มตั้งค่า ── */
.ed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem; }
.ed-field { display: block; }
.ed-field > span { display: block; font-size: .88rem; color: var(--ed-text-soft); margin-bottom: .25rem; }
.ed-field > span small { opacity: .8; }
.ed-input { width: 100%; box-sizing: border-box; font: inherit; font-size: .96rem;
	padding: .34rem .6rem; border: 1px solid var(--ed-line); border-radius: 9px;
	background: #fff; color: var(--ed-text); }
.ed-input:focus { outline: 2px solid var(--ed-primary-soft); border-color: var(--ed-primary); }

.ed-toolbar { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 .2rem;
	padding-top: .8rem; border-top: 1px dashed var(--ed-line); }
.ed-mini { border: 1px solid var(--ed-line); background: #fff; color: var(--ed-primary);
	border-radius: 999px; padding: .16rem .7rem; cursor: pointer; font: inherit; font-size: .85rem; }
.ed-mini:hover { background: var(--ed-primary-soft); }
.ed-mini-check { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
	color: var(--ed-text-soft); }
.ed-mini-check input { accent-color: var(--ed-primary); }

.ed-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.ed-btn { font: inherit; font-size: .98rem; border-radius: 10px; padding: .42rem 1rem;
	cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; gap: .45rem; }
.ed-btn:disabled { opacity: .45; cursor: not-allowed; }
.ed-btn-primary { background: var(--ed-primary); color: #fff; }
.ed-btn-primary:hover:not(:disabled) { filter: brightness(1.12); }
.ed-btn-answer { background: var(--ed-accent); color: #fff; }
.ed-btn-answer:hover:not(:disabled) { filter: brightness(1.12); }
.ed-btn-ghost { background: #fff; border-color: var(--ed-line); color: var(--ed-primary); }
.ed-btn-ghost:hover:not(:disabled) { background: var(--ed-primary-soft); }

/* ── รายการโจทย์ ── */
.ed-list { list-style: none; margin: 0; padding: 0; }
.ed-item { display: flex; align-items: flex-start; gap: .55rem;
	padding: .6rem .2rem; border-bottom: 1px solid var(--ed-line); }
.ed-item:last-child { border-bottom: none; }
.ed-item.off { opacity: .45; }
.ed-item.sortable-chosen { background: var(--ed-primary-soft); border-radius: 10px; }
.ed-drag { color: #b6b1d2; cursor: grab; padding-top: .18rem; touch-action: none; }
.ed-check { margin-top: .35rem; width: 1.05rem; height: 1.05rem; accent-color: var(--ed-primary);
	flex: 0 0 auto; }
.ed-item-no { flex: 0 0 1.7rem; text-align: right; color: var(--ed-primary); font-size: 1rem;
	padding-top: .1rem; }
.ed-item-body { flex: 1 1 auto; min-width: 0; }
.ed-pali { font-size: 1.24rem; line-height: 1.45; word-break: break-word; }
.ed-answer { font-size: .96rem; color: var(--ed-accent); background: var(--ed-accent-soft);
	border-radius: 8px; padding: .18rem .5rem; margin-top: .25rem; line-height: 1.4; }
.ed-answer-tag { font-size: .72rem; opacity: .75; margin-right: .3rem; }
.ed-item-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.ed-tag { font-size: .74rem; color: var(--ed-text-soft); background: #f2f0fa;
	border-radius: 999px; padding: .05rem .5rem; }
.ed-tag-pdf { color: var(--ed-primary); background: var(--ed-primary-soft); }
.ed-tag-warn { color: var(--ed-warn); background: var(--ed-warn-soft); }
.ed-tag-ed   { color: var(--ed-warn); background: var(--ed-warn-soft); }
.ed-tag-yok  { color: #0f7a52; background: #e4f5ed; }   /* ตัวโยค — ขึ้นเฉพาะใบเฉลย (สีเดียวกับเฉลยใน PDF) */

.ed-item-tools { flex: 0 0 auto; padding-top: .1rem; }
.ed-lines { display: inline-flex; align-items: center; gap: .1rem; border: 1px solid var(--ed-line);
	border-radius: 999px; overflow: hidden; background: #fff; }
.ed-lines b { min-width: 1.5rem; text-align: center; font-size: .92rem; font-weight: 400;
	color: var(--ed-text-soft); }
.ed-step { border: none; background: none; cursor: pointer; font: inherit; font-size: 1rem;
	line-height: 1; color: var(--ed-primary); padding: .2rem .45rem; }
.ed-step:hover:not(:disabled) { background: var(--ed-primary-soft); }
.ed-step:disabled { opacity: .3; cursor: not-allowed; }

@media (max-width: 560px) {
	:root { font-size: 19px; }
	.ed-shell { padding: .7rem; }
	.ed-card { padding: .85rem .8rem; }
	.ed-exams { grid-template-columns: 1fr; }
	.ed-item { gap: .4rem; }
	.ed-item-tools { padding-top: .35rem; }
}

@media print { .no-print { display: none !important; } }