/* ─────────────────────────────────────────────────────────
   หน้าแรก (app/pages/roadmap_home.php) — ธีมห้องฉายชุดเดียวกับหน้ารวมอื่น + โหมดสว่าง/มืด
   หลวงพี่สั่ง ๑๐ ต.ค. ๒๕๖๙ "ทำ dark mode ให้หน้านี้ด้วย ทำให้สวยสุด ๆ"
   - ป้ายใหญ่เต็มจอ: ภาพแผนที่ฝั่งขวาจางเข้าหาข้อความ (เณรกับแผนที่ไม่ถูกทับ) + แผงความคืบหน้า
   - การ์ดหลักสูตรใหญ่ (rm2-*) มืดเสมออยู่แล้ว ไม่ต้องสลับ
   - แถบขวา (นับถอยหลัง · ภารกิจ · อันดับ) ใช้คลาส Tailwind — โหมดมืดแปลสีคลาสเหล่านั้นเฉพาะในหน้านี้ (.hm-page)
   ───────────────────────────────────────────────────────── */

.hm-page {
	--hm-sky: #eaf3ff;
	--hm-card: #ffffff;
	--hm-ring: rgba(20, 26, 51, .08);
	--hm-shadow: 0 18px 40px -28px rgba(20, 26, 51, .35);
}
html[data-ui="dark"] .hm-page {
	--hm-sky: #0a0f1e;
	--hm-card: #131c38;
	--hm-ring: rgba(255, 255, 255, .09);
	--hm-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9);
}

/* ══ ป้ายใหญ่ ══ */
.hm-bill { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--hm-sky) 0%, var(--sc-bg) 100%); }
.hm-bill-art {
	position: absolute; z-index: -2; top: 0; right: 0; width: 74%; height: 100%;
	object-fit: cover; object-position: 50% 50%;   /* กว้างขึ้น เณรขยับมาทางซ้าย เห็นแผนที่เต็มขึ้น (หลวงพี่ทัก ๑๐ ต.ค. ๒๕๖๙) */
	/* ขอบซ้าย/ล่างจางแบบค่อยเป็นค่อยไป (หลายจุดพัก ไม่ใช่เส้นตรงสองจุด — เดิมเห็นเป็นแถบตัดห้วน · หลวงพี่ทัก ๑๐ ต.ค. ๒๕๖๙) */
	--hm-fade-x: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .06) 6%, rgba(0, 0, 0, .2) 12%, rgba(0, 0, 0, .42) 19%, rgba(0, 0, 0, .66) 26%, rgba(0, 0, 0, .86) 33%, rgba(0, 0, 0, .97) 40%, #000 46%);
	--hm-fade-y: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, .35) 9%, rgba(0, 0, 0, .75) 18%, #000 28%);
	-webkit-mask-image: var(--hm-fade-x), var(--hm-fade-y); -webkit-mask-composite: source-in;
	mask-image: var(--hm-fade-x), var(--hm-fade-y); mask-composite: intersect;
}
/* โหมดมืด: ภาพหรี่ลง + ม่านครามไล่จากฝั่งข้อความแบบนุ่ม ให้ฟ้าสว่างในภาพไม่ตัดกับพื้นมืด */
html[data-ui="dark"] .hm-bill-art { filter: brightness(.78) saturate(.92); }
html[data-ui="dark"] .hm-bill::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(90deg, var(--sc-bg) 0%, rgba(10, 15, 30, .9) 28%, rgba(10, 15, 30, .62) 38%, rgba(10, 15, 30, .3) 48%, rgba(10, 15, 30, .1) 58%, rgba(10, 15, 30, 0) 68%),
		linear-gradient(180deg, rgba(10, 15, 30, .35) 0%, rgba(10, 15, 30, 0) 28%);
}
.hm-bill-inner { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; min-height: clamp(520px, 70vh, 640px); padding-top: 3rem; padding-bottom: 2.6rem; }
.hm-bill-copy { max-width: 560px; display: flex; flex-direction: column; gap: .7rem; }
.hm-bill-copy > * { margin: 0; }
.hm-eyebrow { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; padding: .3rem .8rem; border-radius: 999px; background: rgba(245, 191, 69, .16); border: 1px solid rgba(217, 119, 6, .35); color: #92400e; font-weight: 800; font-size: calc(.86rem * var(--reading-scale, 1)); }
.hm-eyebrow i { color: #d97706; }
html[data-ui="dark"] .hm-eyebrow { color: #fde68a; border-color: rgba(245, 191, 69, .4); }
html[data-ui="dark"] .hm-eyebrow i { color: #f5bf45; }
.hm-title { font-size: calc(clamp(2.3rem, 4.8vw, 3.7rem) * var(--reading-scale, 1)); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--sc-ink); }
.hm-gold { color: #b45309; }
.hm-indigo { color: #4338ca; }
html[data-ui="dark"] .hm-gold { color: #f5bf45; }
html[data-ui="dark"] .hm-indigo { color: #a5b4fc; }
html[data-ui="dark"] .hm-title { text-shadow: 0 2px 24px rgba(0, 0, 0, .5); }
.hm-lead { max-width: 520px; color: var(--ui-ink2); font-size: calc(1.05rem * var(--reading-scale, 1)); line-height: 1.75; }
.hm-stats { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; list-style: none; }
.hm-stats li { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 999px; background: var(--hm-card); box-shadow: inset 0 0 0 1px var(--hm-ring), 0 6px 16px -12px rgba(20, 26, 51, .4); color: var(--ui-ink2); font-weight: 700; font-size: calc(.88rem * var(--reading-scale, 1)); }
.hm-stats li i { color: #4f46e5; }
html[data-ui="dark"] .hm-stats li i { color: #a5b4fc; }
.hm-stats b { color: var(--sc-ink); }
.hm-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem !important; }

/* แผงความคืบหน้า */
.hm-progress { width: min(100%, 460px); padding: 1rem 1.05rem; border-radius: 18px; background: color-mix(in srgb, var(--hm-card) 92%, transparent); box-shadow: inset 0 0 0 1px var(--hm-ring), var(--hm-shadow); backdrop-filter: blur(10px); }
.hm-progress-head { margin: 0 0 .5rem; color: var(--ui-muted); font-weight: 800; font-size: calc(.86rem * var(--reading-scale, 1)); }
.hm-progress-head i { color: #d97706; margin-right: .2rem; }
.hm-prog-row { display: flex; align-items: center; gap: .8rem; padding: .55rem .5rem; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color .15s ease; }
.hm-prog-row + .hm-prog-row { margin-top: .15rem; }
.hm-prog-row:hover { background: rgba(var(--ui-tint), .05); }
.hm-prog-row:focus-visible { outline: 3px solid #f5bf45; outline-offset: 2px; }
.hm-prog-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; }
.hm-prog-ic.is-grammar { background: #eef2ff; color: #4338ca; box-shadow: inset 0 0 0 1.5px rgba(79, 70, 229, .3); }
.hm-prog-ic.is-translation { background: #fff7e6; color: #b45309; box-shadow: inset 0 0 0 1.5px rgba(217, 119, 6, .35); }
html[data-ui="dark"] .hm-prog-ic.is-grammar { background: rgba(129, 140, 248, .16); color: #c7d2fe; }
html[data-ui="dark"] .hm-prog-ic.is-translation { background: rgba(245, 191, 69, .14); color: #fde68a; }
.hm-prog-body { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: .3rem; }
.hm-prog-top { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.hm-prog-top b { color: var(--sc-ink); font-weight: 800; font-size: calc(.95rem * var(--reading-scale, 1)); }
.hm-prog-top strong { color: #4338ca; font-weight: 800; font-size: calc(.95rem * var(--reading-scale, 1)); }
html[data-ui="dark"] .hm-prog-top strong { color: #c7d2fe; }
.hm-prog-track { display: block; height: 7px; border-radius: 999px; background: rgba(var(--ui-tint), .1); overflow: hidden; }
.hm-prog-track > span { display: block; height: 100%; border-radius: inherit; transition: width .5s ease; }
.hm-prog-track > .is-grammar { background: linear-gradient(90deg, #818cf8, #4f46e5); }
.hm-prog-track > .is-translation { background: linear-gradient(90deg, #fbbf24, #10b981); }
.hm-prog-body small { color: var(--ui-muted); font-size: calc(.8rem * var(--reading-scale, 1)); font-weight: 600; }

@media (max-width: 900px) {
	html[data-ui="dark"] .hm-bill::before { background: linear-gradient(180deg, rgba(10, 15, 30, .25) 0%, rgba(10, 15, 30, 0) 30%); }
	.hm-bill-art { position: relative; display: block; width: 100%; height: 260px; object-position: 62% 50%; -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 30%); mask-image: linear-gradient(0deg, transparent 0%, #000 30%); }
	.hm-bill-inner { min-height: 0; margin-top: -2.5rem; padding-top: 0; gap: 1.2rem; }
	.hm-actions .sc-btn { flex: 1 1 100%; }
	.hm-progress { width: 100%; }
}

/* ══ หัวกลุ่มการ์ดหลักสูตร ══ */
.hm-sec-head { margin: 0 0 -.6rem; }
.hm-sec-head h2 { margin: 0; color: var(--sc-ink); font-weight: 800; font-size: calc(clamp(1.35rem, 2vw, 1.65rem) * var(--reading-scale, 1)); line-height: 1.3; }
.hm-sec-head p { margin: .2rem 0 0; color: var(--ui-muted); font-size: calc(.95rem * var(--reading-scale, 1)); }

/* ══ ทางลัดเมนู "เพิ่มเติม" (ใต้การ์ด PuriNotes) — ปุ่มเล็ก ๓ คอลัมน์ · มือถือ ๒ ══ */
.hm-links .hm-sec-head { margin-bottom: .9rem; }
.hm-links-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.hm-link { display: flex; align-items: center; gap: .7rem; min-height: 56px; padding: .55rem .8rem; border-radius: 14px; background: var(--hm-card); box-shadow: inset 0 0 0 1px var(--hm-ring); color: var(--sc-ink); font-weight: 700; font-size: calc(.95rem * var(--reading-scale, 1)); line-height: 1.35; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.hm-link:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgba(79, 70, 229, .45), 0 12px 24px -18px rgba(20, 26, 51, .5); }
.hm-link:focus-visible { outline: 3px solid #f5bf45; outline-offset: 2px; }
.hm-link i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #eef2ff; color: #4338ca; font-size: .9rem; }
html[data-ui="dark"] .hm-link i { background: rgba(129, 140, 248, .16); color: #c7d2fe; }
html[data-ui="dark"] .hm-link:hover { box-shadow: inset 0 0 0 1.5px rgba(165, 180, 252, .5), 0 12px 24px -18px rgba(0, 0, 0, .9); }
@media (max-width: 640px) { .hm-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-link { gap: .55rem; padding: .5rem .6rem; font-size: calc(.9rem * var(--reading-scale, 1)); } .hm-link i { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .hm-link { transition: none; } }

/* ══ แถบฟีเจอร์ท้ายหน้า ══ */
.hm-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.hm-feature { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.05rem; border-radius: 16px; background: var(--hm-card); box-shadow: inset 0 0 0 1px var(--hm-ring); }
.hm-feature i { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; font-size: 1.05rem; }
.hm-feature b { display: block; color: var(--sc-ink); font-weight: 800; font-size: calc(.95rem * var(--reading-scale, 1)); line-height: 1.4; }
.hm-feature span { display: block; margin-top: .1rem; color: var(--ui-muted); font-size: calc(.88rem * var(--reading-scale, 1)); line-height: 1.5; }
.hm-feature .is-game { background: #ecfdf5; color: #047857; }
.hm-feature .is-exam { background: #fff1f2; color: #be123c; }
.hm-feature .is-check { background: #eef2ff; color: #4338ca; }
.hm-feature .is-free { background: #fff7e6; color: #b45309; }
html[data-ui="dark"] .hm-feature .is-game { background: rgba(16, 185, 129, .14); color: #6ee7b7; }
html[data-ui="dark"] .hm-feature .is-exam { background: rgba(244, 63, 94, .14); color: #fda4af; }
html[data-ui="dark"] .hm-feature .is-check { background: rgba(129, 140, 248, .16); color: #c7d2fe; }
html[data-ui="dark"] .hm-feature .is-free { background: rgba(245, 191, 69, .14); color: #fde68a; }
@media (max-width: 1023px) { .hm-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hm-features { grid-template-columns: minmax(0, 1fr); } }

/* ══ แถบขวา: ไอคอนแทนอีโมจิในช่องล็อกอิน ══ */
.hm-gate-ic { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto .6rem; border-radius: 16px; font-size: 1.3rem; }
.hm-gate-ic.is-mission { background: #fff1f2; color: #e11d48; }
.hm-gate-ic.is-rank { background: #fff7e6; color: #d97706; }
html[data-ui="dark"] .hm-gate-ic.is-mission { background: rgba(244, 63, 94, .14); color: #fda4af; }
html[data-ui="dark"] .hm-gate-ic.is-rank { background: rgba(245, 191, 69, .14); color: #fde68a; }

/* ══ โหมดมืด: แปลสีคลาส Tailwind ของแถบขวา + หน้าต่างปฏิทิน + หน้าต่างเข้าสู่ระบบ ══
   จำกัดเฉพาะ .hm-rail (แถบขวา · หน้าต่าง) — การ์ดหลักสูตรใหญ่มีปุ่มขาว bg-white ที่ต้องคงขาว */
html[data-ui="dark"] .hm-page .exam-cta > span { background: rgba(19, 28, 56, .96) !important; }
html[data-ui="dark"] .hm-page .exam-countdown { background: linear-gradient(145deg, #131c38 0%, #22202a 100%); --tw-ring-color: rgba(245, 191, 69, .28); }
html[data-ui="dark"] .hm-page .exam-countdown__row { background: rgba(255, 255, 255, .04); border-color: rgba(245, 191, 69, .2); }
html[data-ui="dark"] .hm-page .dhamma-countdown { background: linear-gradient(145deg, #131c38 0%, #102a2a 100%); --tw-ring-color: rgba(52, 211, 153, .26); }
html[data-ui="dark"] .hm-page .dhamma-countdown__row { background: rgba(255, 255, 255, .04); border-color: rgba(52, 211, 153, .2); }
html[data-ui="dark"] .hm-page .dhamma-countdown__row.is-violet { background: rgba(139, 92, 246, .08); border-color: rgba(167, 139, 250, .25); }
html[data-ui="dark"] .hm-rail :is(.bg-white, .bg-white\/95, .bg-white\/90) { background-color: #131c38 !important; }
html[data-ui="dark"] .hm-rail .bg-gray-100 { background-color: rgba(255, 255, 255, .07) !important; }
html[data-ui="dark"] .hm-rail :is(.ring-gray-100, .ring-gray-200) { --tw-ring-color: rgba(255, 255, 255, .09); }
html[data-ui="dark"] .hm-rail :is(.border-gray-100, .border-gray-200, .divide-gray-100 > *) { border-color: rgba(255, 255, 255, .1) !important; }
html[data-ui="dark"] .hm-rail .text-gray-900 { color: #f3f6ff !important; }
html[data-ui="dark"] .hm-rail :is(.text-gray-800, .text-gray-700) { color: #dbe2f5 !important; }
html[data-ui="dark"] .hm-rail :is(.text-gray-600, .text-gray-500) { color: #aab4d0 !important; }
html[data-ui="dark"] .hm-rail .text-gray-400 { color: #8b95b3 !important; }
html[data-ui="dark"] .hm-rail .bg-amber-100, html[data-ui="dark"] .hm-rail .bg-amber-100\/80 { background-color: rgba(245, 191, 69, .16) !important; }
html[data-ui="dark"] .hm-rail .bg-emerald-100, html[data-ui="dark"] .hm-rail .bg-emerald-100\/80 { background-color: rgba(16, 185, 129, .16) !important; }
html[data-ui="dark"] .hm-rail .bg-violet-100\/80 { background-color: rgba(139, 92, 246, .18) !important; }
html[data-ui="dark"] .hm-rail :is(.text-amber-800, .text-amber-700, .text-amber-600) { color: #fcd34d !important; }
html[data-ui="dark"] .hm-rail :is(.text-emerald-800, .text-emerald-700, .text-emerald-600) { color: #6ee7b7 !important; }
html[data-ui="dark"] .hm-rail :is(.text-violet-800, .text-violet-700, .text-violet-600) { color: #c4b5fd !important; }
html[data-ui="dark"] .hm-rail .text-red-600 { color: #fda4af !important; }
html[data-ui="dark"] .hm-rail :is(.text-indigo-500, .text-indigo-600, .text-indigo-700, .text-indigo-800) { color: #a5b4fc !important; }
html[data-ui="dark"] .hm-rail .bg-indigo-50 { background-color: rgba(129, 140, 248, .14) !important; }
html[data-ui="dark"] .hm-rail .ring-indigo-200 { --tw-ring-color: rgba(129, 140, 248, .35); }
html[data-ui="dark"] .hm-rail .bg-amber-50 { background-color: rgba(245, 191, 69, .1) !important; }
html[data-ui="dark"] .hm-rail .ring-amber-300 { --tw-ring-color: rgba(245, 191, 69, .4); }
html[data-ui="dark"] .hm-rail :is(.border-amber-300, .border-emerald-300) { background-color: transparent !important; }
html[data-ui="dark"] .hm-rail .border-amber-300 { border-color: rgba(245, 191, 69, .45) !important; }
html[data-ui="dark"] .hm-rail .border-emerald-300 { border-color: rgba(52, 211, 153, .45) !important; }
html[data-ui="dark"] .hm-rail :is(.border-amber-100, .border-amber-200) { border-color: rgba(245, 191, 69, .22) !important; }
html[data-ui="dark"] .hm-rail :is(.border-emerald-100, .border-emerald-200) { border-color: rgba(52, 211, 153, .22) !important; }
html[data-ui="dark"] .hm-rail :is(.border-violet-100, .border-violet-200) { border-color: rgba(167, 139, 250, .25) !important; }
html[data-ui="dark"] .hm-rail :is(.from-amber-50, .from-emerald-50) { --tw-gradient-from: #161f3d !important; }
html[data-ui="dark"] .hm-rail :is(.to-orange-50, .to-teal-50) { --tw-gradient-to: #131c38 !important; }
html[data-ui="dark"] .hm-rail :is(.bg-emerald-50, .bg-violet-50) { background-color: rgba(255, 255, 255, .04) !important; }
html[data-ui="dark"] .hm-rail .exam-calendar-table th { background: rgba(245, 191, 69, .1); color: #fde68a; }
html[data-ui="dark"] .hm-rail .exam-calendar-table tbody tr + tr { border-color: rgba(245, 191, 69, .15); }
html[data-ui="dark"] .hm-rail input { background: #0f1730; border-color: rgba(255, 255, 255, .18); color: #f3f6ff; }

/* ══ โหมดสว่าง: ตัวหนังสือเล็กในแถบขวาเข้มขึ้นให้อ่านออก (เดิมเทาอ่อน/ส้มสด ความคมชัดไม่ถึงเกณฑ์) ══ */
html[data-ui="light"] .hm-rail .text-gray-400 { color: #6b7280 !important; }
html[data-ui="light"] .hm-rail .text-orange-500 { color: #c2410c !important; }
html[data-ui="light"] .hm-rail .text-amber-600 { color: #b45309 !important; }
html[data-ui="light"] .hm-rail .text-emerald-600 { color: #047857 !important; }
html[data-ui="dark"] .hm-rail .text-indigo-800 { color: #c7d2fe !important; }
html[data-ui="dark"] .hm-page .exam-calendar-table tbody th { background: transparent; color: #f3f6ff; }