/* แบบฝึกหัดประกอบการติว (/page/exam_tutor/) — พื้นฐานจาก page/exam_blank/css/style.css
   (ตัวแปร --eb-* · แถบย้อนกลับ · หัวหน้า .eb-head · ปุ่ม .eb-btn · สถานะโหลด)
   ออกแบบใหม่ ๘ ต.ค. ๒๕๖๙ ตามหน้าเลือกตัวเลือกของ /exam-bank (.gq-*):
   จอ ≥ ๙๐๐px ๒ คอลัมน์ ตัวเลือก | แผงสรุป+ดาวน์โหลดติดจอ · จอเล็กปุ่มดาวน์โหลดเป็นแถบล่างติดจอ */

.et-layout { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 900px) { .et-layout { grid-template-columns: minmax(0, 1fr) 300px; } }
.et-main { display: grid; gap: 1.1rem; min-width: 0; }

.et-label {
	display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem;
	margin: 0 0 .55rem;
	font-size: .9rem; font-weight: 800; color: var(--eb-ink);
}
.et-label small { flex-basis: 100%; font-size: .78rem; font-weight: 500; color: var(--eb-ink-muted); line-height: 1.5; }

.et-step {
	width: 1.35rem; height: 1.35rem;
	display: inline-grid; place-items: center; flex: none;
	border-radius: 50%;
	background: var(--eb-primary); color: #fff;
	font-size: .74rem; font-weight: 800; line-height: 1;
}

/* ๑. หัวข้อ — แถวกะทัดรัด (แบบ .gq-topic) */
.et-topics { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.et-topic {
	display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .6rem;
	min-height: 48px; padding: .45rem .7rem;
	border: 1.5px solid var(--eb-line); border-radius: 12px;
	background: #fff; color: var(--eb-ink);
	font: inherit; text-align: left; cursor: pointer;
	transition: border-color .12s, background-color .12s;
}
.et-topic:hover { border-color: #a5b4fc; }

.et-topic-no {
	grid-row: 1 / 3;
	min-width: 1.9rem; height: 1.9rem; padding: 0 .25rem;
	display: grid; place-items: center;
	border-radius: 8px;
	background: var(--eb-primary-wash); color: var(--eb-primary);
	font-size: .88rem; font-weight: 800;
}
/* ชื่อหัวข้อห้ามตัดกลางคำ ("นามและสัพ / พนาม") */
.et-topic-name { min-width: 0; font-size: .95rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-topic-max { color: var(--eb-ink-muted); font-size: .74rem; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; }

.et-topic.is-active { border-color: var(--eb-primary); background: var(--eb-primary-wash); box-shadow: inset 0 0 0 1px var(--eb-primary); }
.et-topic.is-active .et-topic-no { background: var(--eb-primary); color: #fff; }
.et-topic.is-active .et-topic-max { color: var(--eb-primary-dim); }

/* ๒. จำนวนข้อ */
.et-count-card { background: #fff; border: 1px solid var(--eb-line); border-radius: 14px; padding: .85rem 1rem; }

.et-count {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: .85rem;
}

.et-count-main { display: grid; gap: .1rem; min-width: 0; }

.et-count-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .45rem; font-size: .95rem; color: var(--eb-ink-soft); }

.et-count-value {
	font-size: 1.9rem; line-height: 1; font-weight: 800;
	color: var(--eb-primary);
	font-variant-numeric: tabular-nums;
}

.et-count-marks {
	margin-left: auto; padding: .05rem .6rem;
	border-radius: 999px;
	background: var(--eb-surface-2); color: var(--eb-ink-soft);
	font-size: .78rem; font-weight: 700;
}

.et-range {
	--fill: 0%;
	width: 100%; height: 1.6rem; margin: 0;
	background: transparent; cursor: pointer;
	-webkit-appearance: none; appearance: none;
}
.et-range::-webkit-slider-runnable-track {
	height: .4rem; border-radius: 999px;
	background: linear-gradient(to right, var(--eb-primary) var(--fill), var(--eb-line) var(--fill));
}
.et-range::-moz-range-track { height: .4rem; border-radius: 999px; background: var(--eb-line); }
.et-range::-moz-range-progress { height: .4rem; border-radius: 999px; background: var(--eb-primary); }
.et-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 1.25rem; height: 1.25rem; margin-top: -.43rem;
	border: 3px solid #fff; border-radius: 50%;
	background: var(--eb-primary);
	box-shadow: 0 1px 4px rgba(49, 46, 129, .35);
}
.et-range::-moz-range-thumb {
	width: 1rem; height: 1rem;
	border: 3px solid #fff; border-radius: 50%;
	background: var(--eb-primary);
	box-shadow: 0 1px 4px rgba(49, 46, 129, .35);
}
.et-range:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; border-radius: 6px; }

.et-range-ends { display: flex; justify-content: space-between; color: var(--eb-ink-muted); font-size: .72rem; line-height: 1.2; }

.et-step-btn {
	width: 2.4rem; height: 2.4rem;
	display: grid; place-items: center;
	border: 1px solid #c7d2fe; border-radius: 50%;
	background: #fff; color: var(--eb-primary);
	font-size: .85rem; cursor: pointer;
	transition: background-color .15s;
}
.et-step-btn:hover:not(:disabled) { background: var(--eb-primary-wash); }
.et-step-btn:disabled { opacity: .35; cursor: not-allowed; }
.et-step-btn:focus-visible, .et-topic:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }

/* ทุกแนวที่เคยออก — ปุ่มลัดเลือกทั้งหมด */
.et-all {
	display: flex; align-items: center; gap: .6rem;
	margin-top: .75rem; padding-top: .7rem;
	border-top: 1px solid var(--eb-line);
	color: var(--eb-ink-soft); font-size: .8rem; line-height: 1.55;
}
.et-all > span { flex: 1; min-width: 0; }
.et-all strong { color: var(--eb-ink); }
.et-all-btn { flex: 0 0 auto; min-height: 2rem; padding: .25rem .75rem; font-size: .8rem; }
.et-all-btn:disabled { opacity: .45; cursor: default; }

/* ดูข้อล่วงหน้า (พับไว้ แบบ .gq-more) */
.et-preview { background: #fff; border: 1px solid var(--eb-line); border-radius: 12px; }
.et-preview > summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; gap: .5rem;
	padding: .7rem .9rem;
	font-size: .88rem; font-weight: 700; color: var(--eb-ink-soft);
}
.et-preview > summary::-webkit-details-marker { display: none; }
.et-preview > summary i { color: var(--eb-primary); }
.et-preview > summary small { font-weight: 500; color: var(--eb-ink-muted); }
.et-preview > summary::after {
	content: '\f078'; font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome'; font-weight: 900;
	font-size: .7rem; margin-left: auto; transition: transform .15s;
}
.et-preview[open] > summary::after { transform: rotate(180deg); }
.et-preview > summary:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; border-radius: 12px; }

.et-preview-list { list-style: none; margin: 0; padding: 0 .9rem .6rem; display: grid; border-top: 1px solid var(--eb-line); }
.et-preview-list > li {
	display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .2rem;
	padding: .45rem 0;
	border-bottom: 1px dashed var(--eb-line);
	line-height: 1.5;
}
.et-preview-list > li:last-child { border-bottom: none; }
.et-preview-no { color: var(--eb-primary); font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }
.et-preview-item { overflow-wrap: anywhere; }
/* คำถามมีคำบาลี — ใช้ THSarabunPali (ญ ฐ ไม่มีเชิง) ฟอนต์นี้ตัวเล็กกว่า Sarabun จึงขยายขึ้น */
.et-preview-q { font-family: 'THSarabunPali', 'Sarabun', sans-serif; font-size: 1.15rem; color: var(--eb-ink); }
.et-preview-letter { margin-right: .3rem; color: var(--eb-ink-muted); font-size: .88rem; }
.et-preview-cite { margin-left: .35rem; color: var(--eb-ink-muted); font-size: .74rem; white-space: nowrap; }

.et-main .eb-footnote { margin: 0; }

/* ๓. แผงสรุป + ดาวน์โหลด */
@media (min-width: 900px) { .et-side { position: sticky; top: 1rem; } }
.et-panel { background: #fff; border: 1px solid var(--eb-line); border-radius: 16px; padding: 1rem; }
.et-panel-k { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-size: .82rem; font-weight: 800; color: var(--eb-ink-soft); }
.et-panel-topic { font-size: .95rem; font-weight: 700; color: var(--eb-ink); line-height: 1.35; }
.et-panel-v { font-size: 2.2rem; font-weight: 800; color: var(--eb-ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.et-panel-v small { font-size: 1rem; color: var(--eb-ink-soft); }
.et-panel-note { margin: .1rem 0 .85rem; font-size: .82rem; color: var(--eb-ink-soft); }

.et-actions { display: grid; gap: .5rem; }
.et-big { width: 100%; min-height: 2.9rem; font-size: .98rem; font-weight: 800; border-radius: 12px; }
.et-primary { background: var(--eb-primary); color: #fff; box-shadow: 0 6px 16px rgba(79, 70, 229, .28); }
.et-primary:hover:not(:disabled) { background: var(--eb-primary-dim); }
.et-secondary { background: #fff; color: var(--eb-primary); border-color: #c7d2fe; }
.et-secondary:hover:not(:disabled) { background: var(--eb-primary-wash); border-color: var(--eb-primary); }

/* จอเล็ก: แผงสรุปอยู่ใต้ตัวเลือก (บรรทัดเดียว) · ปุ่มดาวน์โหลด ๒ ปุ่มเป็นแถบล่างติดจอ */
@media (max-width: 899px) {
	.et-setup { padding-bottom: 6.5rem; }
	.et-layout { gap: 1rem; }
	/* จำนวนข้อ/คะแนนเห็นอยู่แล้วในกล่องจำนวนข้อ — เหลือแค่ปุ่มในแถบล่าง */
	.et-panel { padding: 0; border: 0; background: none; }
	.et-panel > :not(.et-actions) { display: none; }
	.et-actions {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
		grid-template-columns: 1.4fr 1fr;
		padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .95);
		backdrop-filter: blur(8px);
		border-top: 1px solid var(--eb-line);
	}
}

@media (max-width: 560px) {
	.et-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
	/* การ์ดครึ่งจอแคบ — ชื่อบรรทัดบน "ได้ถึง…" บรรทัดล่าง ไม่ให้ "นามและสัพพนาม" ขาดกลางคำ */
	.et-topic { column-gap: .5rem; padding: .45rem .55rem; }
	.et-topic-no { min-width: 1.7rem; height: 1.7rem; font-size: .8rem; }
	.et-topic-name { font-size: .9rem; }
	.et-count-card { padding: .75rem .8rem; }
	.et-count { gap: .55rem; }
	.et-count-marks { margin-left: 0; }
	.et-all { flex-wrap: wrap; }
	.et-all-btn { width: 100%; }
	.et-preview-cite { white-space: normal; }
	.et-actions { padding-inline: .75rem; gap: .45rem; }
	.et-big { font-size: .92rem; padding-inline: .5rem; }
}