/* ========================================
   ธรรมบทอ่านง่าย — Design tokens
   ๑๐ ต.ค. ๒๕๖๙: ย้ายเข้าธีมห้องฉายของ thunder (คราม #0a0f1e · ทอง #f5bf45 · คราม indigo)
   ชุดสีเดียวกับ app/css/study-cinema.css (--sc-*) และกรอบธรรมบท ๒ ภาษา (ebook-cinema.css)
   — คัดลอกค่ามาไว้ที่นี่ ไม่ลิงก์ไฟล์กลาง เพื่อให้หน้านี้แก้ได้โดยไม่กระทบหน้าอื่น

   หน้ารวมเล่ม/รายชื่อเรื่อง = พื้นเข้มเสมอ (เหมือนหน้ารวมอื่น)
   หน้าอ่าน = "กระดาษ" บนโต๊ะเข้ม · สีกระดาษตามโหมดแสงที่ผู้อ่านเลือก (data-theme บน <html>)
   ======================================== */

/* Sarabun ตัวเอียง (คำบรรยายภาพ · คำโปรยหน้าปก) */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@1,400&display=swap');

:root {
  /* ── โต๊ะ / กรอบ (ห้องฉาย) ── */
  --ds-bg: #0a0f1e;
  --ds-bg2: #0f1730;
  --ds-panel: #131c38;
  --ds-card: #18223f;
  --ds-line: rgba(255, 255, 255, .1);
  --ds-line2: rgba(255, 255, 255, .16);
  --ds-card-line: rgba(165, 180, 252, .22);
  --ds-ink: #f3f6ff;
  --ds-muted: #aab4d0;
  --ds-dim: #7f8aa8;
  --ds-gold: #f5bf45;
  --ds-gold-ink: #3b2600;
  --ds-indigo: #a5b4fc;
  --ds-nav-h: 0px;            /* ความสูงเมนูบนของ thunder — app.js วัดจริงแล้วตั้งให้ */
  --ds-bar-h: 60px;

  /* ── กระดาษอ่าน: โหมดสว่าง ── */
  --paper: #fffdf7;
  --paper-edge: rgba(255, 255, 255, .5);
  --reader-text: #2a1a08;
  --reader-text-secondary: #6b5518;
  --reader-heading: #2a1a08;
  --reader-accent: #8a6d1b;
  --reader-rule: #e6d7b4;
  --reader-tint: #f7efdc;
  --reader-sec-title-color: #6b5518;
  --reader-sec-title-bg: #fbf4e3;
  --reader-sec-title-border: #ecdcb6;
  --reader-verse-bg: linear-gradient(135deg, #fbf3df, #f3e6c4);
  --reader-verse-border: #e3cf9f;
  --reader-verse-color: #4a3a10;
  --reader-img-cap: #8a6d1b;
  --reader-intro-h2: #6b5518;
  --reader-intro-h2-border: rgba(201, 162, 39, .3);
  --reader-cover-bg: linear-gradient(170deg, #fdf8ec, #f8efd9);
  --reader-scrollbar: rgba(255, 255, 255, .22);
}

/* ── กระดาษอ่าน: โหมดมืด (กระดาษครามเข้ม ตัวอักษรสว่าง หัวข้อทอง) ── */
[data-theme="dark"] {
  --paper: #141c34;
  --paper-edge: rgba(255, 255, 255, .06);
  --reader-text: #dfe4f2;
  --reader-text-secondary: #aab4d0;
  --reader-heading: #ffffff;
  --reader-accent: #f5bf45;
  --reader-rule: rgba(245, 191, 69, .25);
  --reader-tint: rgba(245, 191, 69, .08);
  --reader-sec-title-color: #fde68a;
  --reader-sec-title-bg: rgba(245, 191, 69, .08);
  --reader-sec-title-border: rgba(245, 191, 69, .22);
  --reader-verse-bg: linear-gradient(135deg, rgba(245, 191, 69, .1), rgba(245, 191, 69, .04));
  --reader-verse-border: rgba(245, 191, 69, .3);
  --reader-verse-color: #fdf0c8;
  --reader-img-cap: #aab4d0;
  --reader-intro-h2: #fde68a;
  --reader-intro-h2-border: rgba(245, 191, 69, .25);
  --reader-cover-bg: linear-gradient(170deg, #1a2342, #141c34);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Sarabun', sans-serif;
  background: var(--ds-bg);
  color: var(--ds-ink);
  min-height: 100vh;
}
img { max-width: 100%; }
.cover-title, .ch-num, .ch-sub, .sec-title, .intro-h2 { font-family: 'Prompt', sans-serif; }

/* โฟกัสจากคีย์บอร์ด: วงทองชุดเดียวกับหน้าห้องฉาย */
#app :is(button, a, input, select, [role="button"], [role="link"]):focus-visible,
.settings-panel :is(button, select):focus-visible { outline: 3px solid var(--ds-gold); outline-offset: 2px; }

/* เมนูบนของ thunder (สะพานแทรกให้ · สไตล์ topnav-standalone.css)
   ตัวรีเซ็ต .pt-topnav-scope button{border:0} ทำ border-style เป็น none → ปุ่ม "เข้าสู่ระบบ" ที่มีคลาส .border ไม่มีกรอบ
   (หน้า /videos ใช้ preflight ของ Tailwind ซึ่งคง border-style:solid ไว้) — คืนค่า solid ให้ หน้าตาจึงตรงกับหน้าอื่น
   ปุ่มที่ไม่มีคลาส .border ยังกว้างเส้น 0 ตามเดิม */

/* ลดการเคลื่อนไหวตามที่ผู้ใช้ตั้งไว้ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── โหมดสว่างของกรอบ (ทั้งเว็บ · <html data-ui="light"> จาก includes/theme-boot.php ที่สะพานแทรกให้) ──
   หลวงพี่สั่ง ๑๐ ต.ค. ๒๕๖๙ · สีกระดาษอ่านยังตามที่ผู้อ่านเลือก (data-theme) เหมือนเดิม
   ทอง: ตัวหนังสือใช้ทองเข้ม --ds-gold · พื้นป้าย/ปุ่มใช้ทองสด --ds-gold-fill */
html[data-ui="light"] {
  --ds-bg: #f5f7fc;
  --ds-bg2: #ffffff;
  --ds-panel: #e9edf7;
  --ds-card: #ffffff;
  --ds-line: rgba(20, 26, 51, .1);
  --ds-line2: rgba(20, 26, 51, .16);
  --ds-card-line: rgba(79, 70, 229, .2);
  --ds-ink: #141a33;
  --ds-muted: #525b78;
  --ds-dim: #5d6683;
  --ds-gold: #9c430a;
  --ds-gold-fill: #f5bf45;
  --ds-indigo: #4338ca;
  --reader-scrollbar: rgba(20, 26, 51, .22);
}
/* เมนูบนของเว็บต้องอยู่เหนือแถบหัวของหน้า (ดรอปดาวน์ "เพิ่มเติม" เคยถูกแถบหัวบัง) */
.pt-topnav-scope { position: relative; z-index: 120; }