/* =============================================================
   ธรรมบท ๒ ภาษา — กรอบธีมห้องฉาย (หลวงพี่สั่ง ๑๐ ต.ค. ๒๕๖๙ "ยังไม่เข้ากับ theme ใหม่")
   ชุดเดียวกับ /pali-grammar: โต๊ะเข้ม คราม-ทอง · กระดาษอ่านคงสีที่ผู้อ่านเลือก (data-paper)
   โหลดหลัง ebook-thunder.css · แตะเฉพาะกรอบ — สีตัวอักษรเนื้อหา (บาลี/คำแปล/อรรถกถา) ไม่แตะ
   ============================================================= */
:root {
  --ec-bg: var(--ui-lpanel, #0a0f1e); --ec-bg2: var(--ui-lpanel, #0f1730); --ec-panel: var(--ui-lpanel, #131c38);
  --ec-line: rgba(var(--ui-tint), .1); --ec-ink: var(--ui-ink2); --ec-muted: var(--ui-muted);
  --ec-gold: var(--ui-gold);
}

/* โต๊ะรอบหน้ากระดาษเป็นสีเข้มทุกโหมดกระดาษ (สีกระดาษอ่านเปลี่ยนตามที่เลือกเหมือนเดิม) */
:root body { background: var(--ec-bg); background-image: none; color: var(--ink); }

/* เมนูบนของ thunder (สะพานแทรกให้) — บัญชีใช้ปุ่มของหน้านี้ (session ของธรรมบท) จึงซ่อนปุ่มบัญชีของเมนูบน กันมี ๒ ปุ่ม */
.pt-topnav-scope [data-pt-account] { display: none !important; }

/* ── แถบชื่อหนังสือ + บัญชี ── */
:root .en-user-bar { background: rgba(var(--ui-lpanel-rgb, 15, 23, 48), .92); border-bottom: 1px solid var(--ec-line); }
/* หน้านี้มีแถบบนชั้นเดียว (หลวงพี่สั่ง ๑๐ ต.ค. ๒๕๖๙ — ไม่เอาเมนูบนของเว็บซ้อนอีกชั้น) · โลโก้บาลีธันเดอร์ = กลับหน้าแรก */
.en-brand img { display: block; height: 36px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
:root .en-brand-name { color: var(--ui-strong); }
:root .en-brand-sub { color: var(--ec-muted); }
.en-brand:hover .en-brand-name { color: var(--ec-gold); }
:root .en-story-title-bar { color: var(--ui-gold-ink); border-left: 0; padding-left: 4px; }
:root .en-story-title-bar i { color: var(--ec-gold); }
:root .en-sync-status { color: var(--ec-muted); }
:root .en-login-link { background: var(--ui-sel-bg); border-color: var(--ui-sel-bg); color: var(--ui-sel-ink); box-shadow: none; }
:root .en-login-link:hover { background: var(--ec-gold); border-color: var(--ec-gold); color: #0a0f1e; }
:root .en-user-menu-btn { background: rgba(var(--ui-tint), .08) !important; border-color: rgba(var(--ui-tint), .16) !important; color: var(--ui-strong) !important; }
/* ปุ่มสลับโหมดสว่าง/มืด — วงกลมก่อนปุ่มเข้าสู่ระบบ · โหมดสว่างโชว์พระจันทร์ (กดแล้วมืด) โหมดมืดโชว์พระอาทิตย์ */
.en-theme-btn { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 999px; border: 1px solid rgba(var(--ui-tint), .16); background: rgba(var(--ui-tint), .06); color: var(--ui-ink2); font-size: 17px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.en-theme-btn:hover { background: rgba(var(--ui-tint), .12); color: var(--ui-strong); }
.en-theme-btn:focus-visible { outline: 3px solid var(--ec-gold); outline-offset: 2px; }
.en-theme-sun { display: none; color: var(--ec-gold); }
html[data-ui="dark"] .en-theme-sun { display: block; }
html[data-ui="dark"] .en-theme-moon { display: none; }
.en-user-actions { gap: 10px; }

/* ── แถบเครื่องมืออ่าน: กระจกเข้ม ── */
:root .en-nav { background: rgba(var(--ui-lpanel-rgb, 15, 23, 48), .94); border-bottom: 1px solid var(--ec-line); box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .9); }
:root .en-nav :is(.en-nav-btn, .en-reader-action, .en-book-select, .en-page-select),
:root .en-nav .select2-container .select2-selection--single {
  background-color: rgba(var(--ui-tint), .07) !important; border-color: rgba(var(--ui-tint), .16) !important; color: var(--ui-ink2) !important;
}
:root .en-nav .en-book-select { color: var(--ec-gold) !important; font-weight: 800; }
:root .en-nav .en-book-select option, :root .en-nav .en-page-select option { color: #111827; }
:root .en-nav .select2-selection__rendered { color: var(--ui-ink2) !important; }
:root .en-nav .select2-selection__arrow b { border-top-color: var(--ec-muted) !important; }
:root .en-nav .en-reader-action .bi, :root .en-nav .en-nav-btn .bi { color: var(--ec-gold); }
:root .en-nav :is(.en-nav-btn, .en-reader-action):hover:not(:disabled) { background-color: rgba(var(--ui-tint), .14) !important; color: var(--ui-strong) !important; }
:root .en-nav .en-reader-action[aria-pressed="true"] { background-color: var(--ec-gold) !important; border-color: var(--ec-gold) !important; color: #3b2600 !important; }
:root .en-nav .en-reader-action[aria-pressed="true"] .bi { color: #3b2600; }
:root .en-page-label { color: var(--ec-muted); }
:root .en-nav-btn-page.prev { background: rgba(var(--ui-tint), .07) !important; border: 1px solid rgba(var(--ui-tint), .16) !important; color: var(--ui-ink2) !important; }
:root .en-nav-btn-page.next { background: var(--ui-sel-bg) !important; color: var(--ui-sel-ink) !important; box-shadow: none; }
:root .en-nav-btn-page.next:hover:not(:disabled) { background: var(--ec-gold) !important; }
:root .en-nav-btn-page:disabled { background: rgba(var(--ui-tint), .04) !important; color: rgba(var(--ui-tint), .25) !important; border: 1px solid rgba(var(--ui-tint), .08) !important; }
#app :is(button, a, input, select, [role="button"]):focus-visible { outline-color: var(--ec-gold); }
:root .en-panel-toggle { background: var(--ec-gold); color: #3b2600; box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .7); }

/* ── หน้าแรก: ป้ายใหญ่ภาพเณรอ่านธรรมบท ── */
:root .en-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 2.4rem 2.4rem 2.1rem; border: 1px solid var(--ec-line); border-radius: 22px;
  background: var(--ec-bg2); box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .95);
}
:root .en-hero::before { display: none; }
.en-hero-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 38%; }
:root .en-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 15, 30, .95) 0%, rgba(10, 15, 30, .78) 36%, rgba(10, 15, 30, .15) 70%, rgba(10, 15, 30, 0) 100%),
    linear-gradient(0deg, rgba(10, 15, 30, .85) 0%, rgba(10, 15, 30, 0) 50%);
}
:root .en-hero-eyebrow { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--ec-muted); }
:root .en-hero-eyebrow .bi { color: var(--ec-gold); }
:root .en-hero-title { color: var(--ui-strong); text-shadow: 0 2px 24px rgba(0, 0, 0, .45); line-height: 1.25; }
:root .en-hero-gold { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ec-gold); }
:root .en-hero-subtitle { max-width: 34em; color: var(--ui-ink2); }
:root .en-hero-chips li { background: rgba(var(--ui-tint), .1); border: 1px solid rgba(var(--ui-tint), .16); color: var(--ui-ink2); box-shadow: none; backdrop-filter: blur(6px); }
:root .en-hero-chips .bi { color: var(--ec-gold); }
:root .en-hero-source { color: var(--ec-muted); }

:root .en-book-head h2 { color: var(--ui-strong); }
:root .en-book-head p { color: var(--ec-muted); }
/* ปกภาค: การ์ดเข้ม กรอบรอบทั้งใบ (ไม่ใช้แถบขอบซ้าย) */
:root .en-book-card { background: var(--ui-panel); border: 1.5px solid rgba(165, 180, 252, .22); box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .85); }
:root .en-book-card:hover, :root .en-book-card:focus-visible { border-color: var(--ec-gold); box-shadow: 0 0 0 3px rgba(245, 191, 69, .2), 0 22px 44px -18px rgba(0, 0, 0, .95); }
:root .en-book-label-title { color: var(--ui-strong); }
:root .en-book-label-sub { color: var(--ec-gold); }

/* ── หน้าอ่าน: กระดาษวางบนโต๊ะเข้ม ── */
:root #columnView, :root #lineView { border: 0; box-shadow: 0 1px 0 rgba(var(--ui-tint), .4) inset, 0 30px 60px -28px rgba(0, 0, 0, .95), 0 0 0 1px rgba(var(--ui-tint), .06); }
:root .en-loading { color: var(--ec-muted); }
:root .en-page-info { color: var(--ec-muted); }
:root .en-bottom-prev, :root .en-bottom-next { background: rgba(var(--ui-tint), .07) !important; border-color: rgba(var(--ui-tint), .16) !important; color: var(--ui-ink2) !important; }
:root .en-bottom-prev:hover:not(:disabled), :root .en-bottom-next:hover:not(:disabled) { background: rgba(var(--ui-tint), .14) !important; color: var(--ui-strong) !important; }
:root .en-bottom-book { background: var(--ui-sel-bg); color: var(--ui-sel-ink); box-shadow: none; }
:root .en-bottom-book:hover { background: var(--ec-gold); color: #0a0f1e; }
:root .tagf-banner { background: rgba(245, 191, 69, .12); border-color: rgba(245, 191, 69, .35); color: var(--ui-gold-ink); }

/* ── ส่วนท้าย ── */
:root .en-footer { color: var(--ec-muted); }
:root .en-footer a { background: rgba(var(--ui-tint), .07) !important; border-color: rgba(var(--ui-tint), .16) !important; color: var(--ui-ink2) !important; }
:root .en-footer a:hover { background: rgba(var(--ui-tint), .14) !important; color: var(--ui-strong) !important; }
:root .en-footer-sources a { background: none !important; border: 0 !important; color: var(--ec-gold) !important; }
:root .en-footer-ver { color: #64748b; }

@media (max-width: 640px) {
  :root .en-hero { min-height: 0; padding: 12rem 1.1rem 1.4rem; border-radius: 18px; }
  .en-hero-art { height: 230px; bottom: auto; object-position: 58% 32%; }
  :root .en-hero::after { background: linear-gradient(0deg, var(--ec-bg2) 0%, var(--ec-bg2) calc(100% - 230px), rgba(var(--ui-lpanel-rgb, 15, 23, 48), .45) calc(100% - 130px), rgba(var(--ui-lpanel-rgb, 15, 23, 48), 0) calc(100% - 50px)); }
}

/* เมนู "เพิ่มเติม" ของเมนูบนต้องลอยเหนือแถบเครื่องมืออ่าน (.en-nav z-index 100) */
.pt-topnav-scope { position: relative; z-index: 120; }

/* ── โหมดสว่าง: ป้ายใหญ่ไล่สีขาวแทนคราม (แบบเดียวกับ .sc-bill ของ study-cinema) ── */
html[data-ui="light"] .en-hero { box-shadow: 0 18px 40px -26px rgba(20, 26, 51, .35); }
html[data-ui="light"] .en-hero::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .9) 40%, rgba(255, 255, 255, .25) 72%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(0deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 50%);
}
html[data-ui="light"] .en-hero-title { text-shadow: none; }
html[data-ui="light"] .en-hero-eyebrow, html[data-ui="light"] .en-hero-source { color: #333c5c; }
html[data-ui="light"] .en-hero-chips li { background: rgba(255, 255, 255, .85); }
@media (max-width: 640px) {
  html[data-ui="light"] .en-hero::after { background: linear-gradient(0deg, #fff 0%, #fff calc(100% - 230px), rgba(255, 255, 255, .5) calc(100% - 130px), rgba(255, 255, 255, 0) calc(100% - 50px)); }
}

/* โหมดมืด: ลิงก์ท้ายหน้าบนโต๊ะเข้มให้อ่านออก */
html[data-ui="dark"] .en-sources-link { color: #a5b4fc; }
html[data-ui="dark"] .en-footer-ver { color: #94a3b8; }