/* ออกข้อสอบบาลีไวยากรณ์ (อัตนัย)
   หน้าจอ = เครื่องมือจัดชุด · ตอนพิมพ์ = กระดาษสอบ A4 อย่างเดียว */
@font-face {
	font-family: 'THSarabunPali';
	src: url('/assets/fonts/THSarabunPali.ttf') format('truetype');
	font-display: swap;
}

:root {
	--eb-primary: #1d5c4f;
	--eb-primary-soft: #e6f2ee;
	--eb-text: #17241f;
	--eb-text-soft: #5f7a72;
	--eb-line: #cfe3dc;
	--eb-danger: #b02a2a;
	--eb-bg: #f5faf8;
}
[v-cloak] { display: none; }

.eb-body { margin: 0; background: var(--eb-bg); color: var(--eb-text);
	font-family: 'THSarabunPali', 'Sarabun', system-ui, sans-serif; font-size: 20px; }

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

.eb-shell { max-width: 980px; margin: 0 auto; padding: 1rem; }
.eb-card { background: #fff; border: 1px solid var(--eb-line); border-radius: 14px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.eb-card-title { font-size: 1.2rem; margin: 0 0 .9rem; display: flex; align-items: center; gap: .5rem; }

.eb-field { margin-bottom: .9rem; }
.eb-field > label { display: block; font-size: .95rem; color: var(--eb-text-soft); margin-bottom: .35rem; }
.eb-field > label small { opacity: .75; }
.eb-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.eb-row > * { flex: 1 1 180px; }
.eb-narrow { min-width: 180px; }

.eb-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.eb-chip { border: 1px solid var(--eb-line); background: #fff; color: var(--eb-text);
	border-radius: 999px; padding: .2rem .7rem; cursor: pointer; font: inherit; font-size: .92rem; }
.eb-chip.on { background: var(--eb-primary); border-color: var(--eb-primary); color: #fff; }
.eb-chip-actions { margin-top: .4rem; display: flex; gap: .4rem; }
.eb-mini { border: none; background: none; color: var(--eb-primary); cursor: pointer; font: inherit;
	font-size: .88rem; text-decoration: underline; padding: 0; }
.eb-mini-r { margin-left: auto; }

.eb-select { width: 100%; padding: .4rem .6rem; border: 1px solid var(--eb-line); border-radius: 8px;
	font: inherit; background: #fff; color: inherit; }
.eb-check { display: block; margin: .6rem 0; font-size: .95rem; }
.eb-pool { background: var(--eb-primary-soft); border-radius: 8px; padding: .5rem .8rem; margin: .6rem 0; font-size: .95rem; }
.eb-warn { color: var(--eb-danger); }

.eb-btn { border: none; border-radius: 10px; padding: .55rem 1.1rem; font: inherit; cursor: pointer; }
.eb-btn-primary { background: var(--eb-primary); color: #fff; }
.eb-btn-ghost { background: #fff; color: var(--eb-primary); border: 1px solid var(--eb-primary); }
.eb-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.eb-hint { font-size: .88rem; color: var(--eb-text-soft); }

/* ── รายการข้อ ── */
.eb-list { list-style: none; margin: 0; padding: 0; }
.eb-item { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--eb-line); cursor: grab; }
.eb-item.on { background: var(--eb-primary-soft); }
.eb-item-no { background: var(--eb-primary-soft); color: var(--eb-primary); border-radius: 8px;
	min-width: 2rem; text-align: center; padding: .1rem .3rem; }
.eb-item-body { flex: 1; min-width: 0; }
.eb-item-meta { font-size: .85rem; color: var(--eb-text-soft); }
.eb-item-q { line-height: 1.35; }
.eb-item-tools { display: flex; gap: .2rem; }
.eb-icon { border: 1px solid var(--eb-line); background: #fff; border-radius: 8px; width: 2rem; height: 2rem;
	cursor: pointer; color: var(--eb-text-soft); }
.eb-icon-danger { color: var(--eb-danger); }

/* ── เลือกข้อเอง ── */
.eb-modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: grid; place-items: center; z-index: 40; padding: 1rem; }
.eb-modal-box { background: #fff; border-radius: 14px; padding: 1rem 1.2rem; max-width: 720px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; }
.eb-modal-box h3 { margin: 0 0 .6rem; display: flex; align-items: center; }
.eb-picker-list { list-style: none; margin: .6rem 0 0; padding: 0; overflow: auto; }
.eb-picker-list li { padding: .5rem 0; border-top: 1px solid var(--eb-line); cursor: pointer; }
.eb-picker-list li:hover { background: var(--eb-primary-soft); }
.eb-picker-meta { display: block; font-size: .82rem; color: var(--eb-text-soft); }
.eb-empty { color: var(--eb-text-soft); text-align: center; padding: 1rem; }

/* ── แท็บ ── */
.eb-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; }
.eb-tabs button { flex: 1; border: 1px solid var(--eb-line); background: #fff; color: var(--eb-text);
	border-radius: 12px; padding: .6rem; font: inherit; cursor: pointer; position: relative; }
.eb-tabs button.on { background: var(--eb-primary); border-color: var(--eb-primary); color: #fff; }
.eb-badge { background: #c0392b; color: #fff; border-radius: 999px; font-size: .78rem;
	padding: 0 .45rem; margin-left: .3rem; }

/* ── ช่องเติมคำบนจอ ── */
.eb-gap { display: inline-block; min-width: 4.5rem; border-bottom: 1px solid #9ab; margin: 0 .2rem;
	text-align: center; color: var(--eb-primary); font-size: .86rem; }
.eb-score { margin-left: auto; background: var(--eb-primary-soft); color: var(--eb-primary);
	border-radius: 999px; padding: .1rem .7rem; font-size: .95rem; }
.eb-note { background: #fff8e6; border: 1px solid #f0dfb0; border-radius: 10px;
	padding: .6rem .8rem; font-size: .95rem; margin-bottom: .8rem; }
.eb-tag { border-radius: 999px; padding: 0 .5rem; font-size: .82rem; margin-left: .3rem; }
.eb-tag-new { background: #fdf0d5; color: #8a6d1f; }
.eb-tag-ok { background: #e6f2ee; color: var(--eb-primary); }
.eb-tag-dropped { background: #f2e6e6; color: #8a3a3a; }
.eb-origin { font-size: .92rem; color: var(--eb-text-soft); margin: .4rem 0; }
.eb-origin summary { cursor: pointer; }
.eb-textarea { width: 100%; padding: .5rem .6rem; border: 1px solid var(--eb-line); border-radius: 8px;
	font: inherit; line-height: 1.5; resize: vertical; }
.eb-answers { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .5rem; }
.eb-ans { display: flex; align-items: center; gap: .25rem; }
.eb-ans input { width: 11rem; }
.eb-ans-no { background: var(--eb-primary-soft); color: var(--eb-primary); border-radius: 6px;
	min-width: 1.5rem; text-align: center; font-size: .85rem; }

/* กล่อง SweetAlert2 ให้เข้ากับหน้า */
.eb-swal { font-family: 'THSarabunPali', 'Sarabun', system-ui, sans-serif; }
.eb-swal .swal2-title { font-size: 1.35rem; color: var(--eb-text); }
.eb-swal .swal2-html-container { font-size: 1.05rem; color: var(--eb-text-soft); }
.eb-swal .swal2-input,
.eb-swal .swal2-confirm, .eb-swal .swal2-cancel { font: inherit; font-size: 1.03rem; border-radius: 10px; }