/* ─────────────────────────────────────────────────────────
   กรอบหน้าตำรา /pali-grammar — "กระดาษสว่าง + หัวห้องฉาย" (หลวงพี่เลือก ๑๐ ต.ค. ๒๕๖๙)
   แตะเฉพาะกรอบ: ป้ายใหญ่ · แถบเครื่องมือ · พื้นรอบเล่ม · สารบัญ · ปุ่มลอย
   **ไม่แตะเนื้อหาในเล่ม** (.smart-reader-content และทุกอย่างข้างใน — กติกาทั้งเล่มอยู่ smart_grammar.css)
   โหลดหลัง smart_grammar.css · โทนสีชุดเดียวกับธีมห้องฉาย (study-cinema.css)
   ───────────────────────────────────────────────────────── */
body.sgf-page {
	--sgf-bg: var(--ui-lpanel, #0a0f1e); --sgf-bg2: var(--ui-lpanel, #0f1730); --sgf-panel: var(--ui-lpanel, #131c38);
	--sgf-line: rgba(var(--ui-tint), .1); --sgf-ink: var(--ui-ink2); --sgf-muted: var(--ui-muted);
	--sgf-gold: var(--ui-gold); --sgf-indigo: var(--ui-indigo);
	--sgf-paper: #fffdf8;
	background: var(--sgf-bg);
}
body.sgf-page .smart-grammar-app,
body.sgf-page .smart-main { background: var(--sgf-bg); }

/* ── ป้ายใหญ่เต็มจอ ── */
body.sgf-page .smart-hero {
	margin: 0; min-height: clamp(300px, 38vh, 360px); border: 0; border-radius: 0; box-shadow: none;   /* เตี้ยลง ประหยัดที่ (หลวงพี่สั่ง ๑๐ ต.ค. ๒๕๖๙) */
	justify-content: flex-end;
	padding: 1.6rem max(24px, calc((100vw - 1560px) / 2 + 24px)) 1.4rem;
	background: var(--sgf-bg);
}
/* ภาพ: สามเณรน้อยนั่งบนหนังสือยักษ์ (bin/gen-pali-grammar-hero.php ใบ a) */
body.sgf-page .smart-hero-bg { object-position: 50% 30%; }
body.sgf-page .smart-hero-overlay {
	background:
		linear-gradient(90deg, rgba(var(--ui-lpanel-rgb, 10, 15, 30), .95) 0%, rgba(var(--ui-lpanel-rgb, 10, 15, 30), .78) 34%, rgba(var(--ui-lpanel-rgb, 10, 15, 30), .2) 66%, rgba(var(--ui-lpanel-rgb, 10, 15, 30), 0) 100%),
		linear-gradient(0deg, var(--sgf-bg) 0%, rgba(var(--ui-lpanel-rgb, 10, 15, 30), .6) 18%, rgba(var(--ui-lpanel-rgb, 10, 15, 30), 0) 46%);
}
body.sgf-page .smart-hero-eyebrow {
	padding: 0; border: 0; background: none; box-shadow: none;
	color: var(--sgf-muted); font-weight: 800; font-size: calc(.88rem * var(--reading-scale, 1));
}
body.sgf-page .smart-hero-eyebrow i { color: var(--sgf-gold); }
body.sgf-page .smart-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.3; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
body.sgf-page .smart-hero-gold { background: none; -webkit-text-fill-color: currentColor; color: var(--sgf-gold); }
body.sgf-page .smart-hero p { max-width: 560px; color: var(--ui-ink2); font-weight: 500; line-height: 1.75; }

/* ปุ่มดาวน์โหลด: ฉบับ ๔ สี = ปุ่มหลักสีขาว · ฉบับต้นฉบับ = ปุ่มกระจก */
body.sgf-page .smart-hero-download {
	min-height: 52px; border-radius: 12px; border: 0;
	background: var(--ui-sel-bg); color: var(--ui-sel-ink); box-shadow: none;
	transition: transform .15s ease, background-color .15s ease;
}
body.sgf-page .smart-hero-download:hover,
body.sgf-page .smart-hero-download:focus-visible { background: var(--sgf-gold); color: #0a0f1e; transform: none; }
body.sgf-page .smart-hero-download em { color: #4b5576; }
body.sgf-page .smart-hero-download small { background: rgba(var(--ui-lpanel-rgb, 10, 15, 30), .08); color: #0a0f1e; border-color: rgba(10, 15, 30, .12); }
body.sgf-page .smart-hero-download-original { background: rgba(var(--ui-tint), .16); color: var(--ui-strong); backdrop-filter: blur(6px); }
body.sgf-page .smart-hero-download-original:hover,
body.sgf-page .smart-hero-download-original:focus-visible { background: rgba(var(--ui-tint), .26); color: var(--ui-strong); }
body.sgf-page .smart-hero-download-original em { color: var(--ui-indigo); }
body.sgf-page .smart-hero-download-original small { background: rgba(var(--ui-tint), .12); color: var(--ui-strong); border-color: rgba(var(--ui-tint), .2); }
body.sgf-page .smart-hero-download i { color: inherit; }

/* ── แถบเครื่องมือติดหัว: กระจกเข้ม ── */
body.sgf-page .smart-reader-shell { padding-top: 0; }
body.sgf-page .smart-reader-tools {
	max-width: 1560px; margin: 0 auto;
	border: 1px solid var(--sgf-line); border-radius: 16px;
	background: rgba(var(--ui-lpanel-rgb, 15, 23, 48), .92); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
	backdrop-filter: blur(10px);
}
body.sgf-page .smart-search { border-color: rgba(var(--ui-tint), .16); background: rgba(var(--ui-tint), .08); transition: border-color .15s ease, box-shadow .15s ease; }
body.sgf-page .smart-search:focus-within { border-color: var(--sgf-gold); box-shadow: 0 0 0 3px rgba(245, 191, 69, .22); }
body.sgf-page .smart-search input { background: transparent; color: var(--ui-strong); }
body.sgf-page .smart-search input::placeholder { color: var(--sgf-muted); }
body.sgf-page .smart-search .smart-icon-button { color: var(--sgf-muted); }
body.sgf-page .smart-mode-switch { border-color: var(--sgf-line); background: rgba(var(--ui-tint), .06); }
body.sgf-page .smart-mode-switch button { color: var(--sgf-muted); }
body.sgf-page .smart-mode-switch button.active { background: var(--sgf-gold); color: #3b2600; box-shadow: none; }
body.sgf-page .smart-page-nav { border-color: var(--sgf-line); background: transparent; }
body.sgf-page .smart-page-nav label > span { color: var(--sgf-muted); }
body.sgf-page .smart-page-nav input { border-color: rgba(var(--ui-tint), .14); background: rgba(var(--ui-tint), .07); color: var(--ui-strong); }
body.sgf-page .smart-page-nav button,
body.sgf-page .smart-page-nav .smart-nav-button,
body.sgf-page .smart-page-nav .smart-map-toggle,
body.sgf-page .smart-page-nav .smart-toc-trigger {
	border-color: rgba(var(--ui-tint), .14); background: rgba(var(--ui-tint), .07); color: var(--ui-ink2);
}
body.sgf-page .smart-page-nav button:hover:not(:disabled) { background: rgba(var(--ui-tint), .14); color: var(--ui-strong); }
body.sgf-page .smart-page-nav .smart-nav-next { background: var(--ui-sel-bg); border-color: var(--ui-sel-bg); color: var(--ui-sel-ink); }
body.sgf-page .smart-page-nav .smart-nav-next:hover:not(:disabled) { background: var(--sgf-gold); color: #0a0f1e; }
body.sgf-page .smart-page-nav button:disabled { opacity: .4; }
body.sgf-page .smart-reading-position { color: var(--sgf-muted); }
body.sgf-page .smart-reading-position strong { color: var(--sgf-gold); }

/* ── ตัวเล่ม: กระดาษอุ่นวางบนโต๊ะเข้ม ── */
body.sgf-page .smart-reading-stream,
body.sgf-page .smart-reader {
	border: 0; border-radius: 6px;
	background: var(--sgf-paper);
	box-shadow: 0 1px 0 rgba(var(--ui-tint), .5) inset, 0 30px 60px -28px rgba(0, 0, 0, .95), 0 0 0 1px rgba(var(--ui-tint), .06);
}
body.sgf-page .smart-continuous-top-sentinel span { color: #64748b; }

/* ── สารบัญข้างเล่ม: แผงเข้ม หมวดปัจจุบันทอง ── */
body.sgf-page .smart-reading-map {
	border: 1px solid var(--sgf-line); border-radius: 16px;
	background: var(--sgf-panel); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
}
body.sgf-page .smart-reading-map-head { border-bottom-color: var(--sgf-line); background: rgba(var(--ui-tint), .03); }
body.sgf-page .smart-reading-map-head strong { color: var(--ui-strong); }
body.sgf-page .smart-reading-map-head span { color: var(--sgf-muted); }
body.sgf-page .smart-reading-map-head > button:not(.smart-map-close),
body.sgf-page .smart-map-search-open { border-color: rgba(245, 191, 69, .4); background: rgba(245, 191, 69, .14); color: var(--sgf-gold); }
body.sgf-page .smart-map-close { color: var(--ui-strong); }
body.sgf-page .smart-reading-map-list { scrollbar-color: rgba(var(--ui-tint), .2) transparent; }
body.sgf-page .smart-map-section-button { color: var(--ui-ink2); background: transparent; }
body.sgf-page .smart-map-section-button small { color: var(--sgf-muted); }
/* สีพื้นอยู่ที่ "แถว" ทั้งแถวอย่างเดียว (รวมลูกศร) — ปุ่มข้างในโปร่ง ไม่ซ้อนกล่อง · ไม่มีแถบขอบซ้าย */
body.sgf-page .smart-map-subsection .smart-map-section-button,
body.sgf-page .smart-map-subsection .smart-map-section-button:hover,
body.sgf-page .smart-map-subsection .smart-map-section-button.active,
body.sgf-page .smart-map-section-button:hover,
body.sgf-page .smart-map-section-button.active { background: transparent; box-shadow: none; }
body.sgf-page .smart-map-subsection .smart-map-section-button { color: var(--ui-ink2); font-weight: 600; }
body.sgf-page .smart-map-section-row { border-radius: 10px; }
body.sgf-page .smart-map-section-row:hover { background: rgba(var(--ui-tint), .07); }
body.sgf-page .smart-map-section-row:hover .smart-map-section-button { color: var(--ui-strong); }
body.sgf-page .smart-map-section-row.active { background: rgba(245, 191, 69, .2); box-shadow: none; }
body.sgf-page .smart-map-section-row.active .smart-map-section-button { color: var(--ui-gold-ink); }
body.sgf-page .smart-map-section-row.active .smart-map-section-button small { color: var(--sgf-gold); }
body.sgf-page .smart-map-expand,
body.sgf-page .smart-map-expand-placeholder { color: var(--sgf-muted); }
body.sgf-page .smart-map-expand:hover,
body.sgf-page .smart-map-expand:focus-visible { background: rgba(var(--ui-tint), .1); color: var(--ui-strong); }
body.sgf-page .smart-map-section-row.open .smart-map-chevron { color: var(--sgf-gold); }
body.sgf-page .smart-map-pages { border-left-color: rgba(245, 191, 69, .35); }
body.sgf-page .smart-map-pages button { color: var(--ui-ink2); }
body.sgf-page .smart-map-pages button:hover,
body.sgf-page .smart-map-pages button.active { background: rgba(var(--ui-tint), .08); color: var(--ui-strong); }
body.sgf-page .smart-reading-map-backdrop { background: rgba(var(--ui-lpanel-rgb, 3, 6, 14), .6); }

/* ปุ่มสารบัญลอย (มือถือ) */
body.sgf-page .smart-mobile-toc-fab { border-color: rgba(var(--ui-tint), .3); background: var(--sgf-gold); color: #3b2600; box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .7); }
body.sgf-page .smart-mobile-toc-fab:hover,
body.sgf-page .smart-mobile-toc-fab:focus-visible { background: #fde68a; }

@media (max-width: 1100px) {
	body.sgf-page .smart-reading-map { border-radius: 0; border-width: 0 0 0 1px; }
}
@media (max-width: 640px) {
	body.sgf-page .smart-hero { min-height: 0; padding: 9.5rem 16px 1.2rem; }
	/* มือถือ: ภาพเป็นแถบบนสุด เห็นเณรนั่งบนหนังสือ แล้วไล่สีลงพื้นเข้มก่อนถึงข้อความ */
	body.sgf-page .smart-hero-bg { height: 210px; bottom: auto; object-position: 44% 34%; }
	body.sgf-page .smart-hero-overlay {
		background: linear-gradient(0deg, var(--sgf-bg) 0%, var(--sgf-bg) calc(100% - 250px), rgba(var(--ui-lpanel-rgb, 10, 15, 30), .5) calc(100% - 150px), rgba(var(--ui-lpanel-rgb, 10, 15, 30), 0) calc(100% - 60px));
	}
	body.sgf-page .smart-reader-shell { padding-left: 10px; padding-right: 10px; }
	body.sgf-page .smart-reader-tools { border-radius: 14px; }
}

/* ── โหมดสว่าง: หัวป้ายไล่สีขาว (overlay แปลงแล้ว) · หัวเรื่องเข้ม · ปุ่มหลักกรมท่า ── */
html[data-ui="light"] body.sgf-page .smart-hero h1 { color: var(--ui-strong); text-shadow: none; }
html[data-ui="light"] body.sgf-page .smart-hero-eyebrow { color: #333c5c; }
html[data-ui="light"] body.sgf-page .smart-hero-download em { color: #c7d2fe; }
html[data-ui="light"] body.sgf-page .smart-hero-download small { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .24); }
html[data-ui="light"] body.sgf-page .smart-hero-download:hover em,
html[data-ui="light"] body.sgf-page .smart-hero-download:focus-visible em { color: #3b2600; }
html[data-ui="light"] body.sgf-page .smart-hero-download:hover small,
html[data-ui="light"] body.sgf-page .smart-hero-download:focus-visible small { background: rgba(10, 15, 30, .1); color: #0a0f1e; border-color: rgba(10, 15, 30, .15); }
html[data-ui="light"] body.sgf-page .smart-hero-download-original { background: rgba(255, 255, 255, .8); color: var(--ui-strong); box-shadow: inset 0 0 0 1px rgba(20, 26, 51, .14); }
html[data-ui="light"] body.sgf-page .smart-hero-download-original small { background: rgba(20, 26, 51, .06); color: var(--ui-strong); border-color: rgba(20, 26, 51, .14); }
html[data-ui="light"] body.sgf-page .smart-hero-download-original em { color: #4338ca; }

/* ป้าย "PDF" ในปุ่มดาวน์โหลด: ไม่มีพื้น — มีแค่เส้นคั่นบาง ๆ ด้านหน้า (เดิมมีแถบพื้นสีแปลก ๆ ใต้คำ · หลวงพี่ทัก ๑๐ ต.ค. ๒๕๖๙) */
body.sgf-page .smart-hero-download small.smart-hero-download-kind,
html[data-ui="light"] body.sgf-page .smart-hero-download small.smart-hero-download-kind {
	background: none; border: 0; border-left: 1px solid color-mix(in srgb, currentColor 32%, transparent); border-radius: 0; padding: 2px 0 2px 14px;
}
/* โหมดสว่าง: ปุ่มโหมดอ่านที่เลือกอยู่ = พื้นน้ำตาลทอง ไอคอนขาว */
html[data-ui="light"] body.sgf-page .smart-mode-switch button.active { color: #fff; }

/* ข้อความป้ายใหญ่ชิดล่างแบบหน้าอื่น (เดิมกล่องเนื้อหายืดเต็มป้ายแล้วจัดชิดบน — เหลือที่ว่างข้างล่าง · หลวงพี่ทัก ๑๐ ต.ค. ๒๕๖๙) */
body.sgf-page .smart-hero-content { align-items: flex-end; }

/* ดาวน์โหลดการ์ดสรุป ๒ เล่ม ระหว่างป้ายใหญ่กับเครื่องมืออ่าน — กว้างเท่าแถบเครื่องมือ */
body.sgf-page .sgf-exam-cards { max-width: 1560px; margin: 0 auto; padding: .4rem max(24px, calc((100vw - 1560px) / 2 + 24px)) 1.2rem; }
@media (max-width: 760px) { body.sgf-page .sgf-exam-cards { padding: .4rem 10px 1rem; } }
/* หน้านี้เน้นเครื่องอ่าน — การ์ดหนังสือดาวน์โหลดย่อลงให้กะทัดรัด */
body.sgf-page .sgf-exam-cards .ec-head { margin-bottom: .6rem; }
body.sgf-page .sgf-exam-cards .ec-book { padding: .7rem; gap: .85rem; }
body.sgf-page .sgf-exam-cards .ec-cover { width: 84px; }
body.sgf-page .sgf-exam-cards .ec-actions { padding-top: .2rem; }