/* ส่วนประกอบในเนื้อหาบทความ (โค้ด · callout · step · checklist จาก markdown_renderer)
   ย้ายมาทั้งชุดจาก detail.html เดิม ไม่ได้ออกแบบใหม่ · เปลี่ยนแค่ตัวเลือก .yw-article-body / .docs-body เป็น .bv1 .prose */
/* ===== Code block =====
   ⚠️ กับดักที่เคยทำให้โค้ดหายทั้งเว็บ: main.css เขียนสไตล์โค้ดไว้ให้ `.article-body`
   แต่หน้านี้ใช้ `.bv1 .prose` — pre จึงไม่ได้ color เลย ตกไปใช้สีตัวอักษร
   เริ่มต้นของ Bootstrap (#212529) ทับบนพื้น navy เข้ม = อ่านไม่ออกสักตัว
   ต้องกำหนด color + font-family ตรงนี้เสมอ ห้ามพึ่ง main.css */
.bv1 .prose pre {
  background: var(--brand-dark);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin: 1.75rem 0;
  overflow-x: auto;
  position: relative;
  font-size: 0.85rem;
  line-height: 1.7;
  color: #e2e8f0;
  font-family: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code",
               "Roboto Mono", Consolas, ui-monospace, monospace;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
.bv1 .prose pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  white-space: pre;
}

/* ===== ธีมสีโค้ดของเราเอง (map เข้ากับ token Navy+Gold) =====
   จงใจไม่เอา theme css ของ highlight.js มาใช้ เพราะสีจะหลุด palette แบรนด์ */
.bv1 .prose .hljs-keyword,
.bv1 .prose .hljs-built_in,
.bv1 .prose .hljs-literal    { color: var(--brand-gold); font-weight: 600; }
.bv1 .prose .hljs-string,
.bv1 .prose .hljs-meta .hljs-string { color: var(--brand-green); }
.bv1 .prose .hljs-comment,
.bv1 .prose .hljs-quote      { color: var(--brand-muted); font-style: italic; }
.bv1 .prose .hljs-number,
.bv1 .prose .hljs-symbol     { color: var(--brand-amber); }
.bv1 .prose .hljs-title,
.bv1 .prose .hljs-title.class_,
.bv1 .prose .hljs-title.function_,
.bv1 .prose .hljs-section    { color: var(--brand-blue-light); }
.bv1 .prose .hljs-params,
.bv1 .prose .hljs-variable,
.bv1 .prose .hljs-attr       { color: #e2e8f0; }
.bv1 .prose .hljs-meta,
.bv1 .prose .hljs-punctuation { color: #94a3b8; }

/* ===================================================================
   DOCS MODE — สไตล์เอกสารอ่านเก็บไว้ (เปิดเมื่อ article.layout == 'docs')
   ทุกคลาส scope ใต้ .bv1 .prose เพื่อไม่ให้กระทบบทความปกติ
   =================================================================== */
.bv1 .prose h2 { scroll-margin-top: 84px; }

/* Analogy block — เปรียบเทียบให้เห็นภาพ */
.bv1 .prose .analogy {
  display: flex; gap: 1rem; align-items: flex-start;
  background: linear-gradient(135deg, rgba(201,169,110,.08), rgba(201,169,110,.02));
  border: 1px solid rgba(201,169,110,.25);
  border-left: 4px solid var(--brand-gold);
  border-radius: 0 10px 10px 0; padding: 1.1rem 1.25rem; margin: 1.5rem 0;
}
.bv1 .prose .analogy .emoji { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.bv1 .prose .analogy p { margin: 0; color: var(--bs-body-color); }
.bv1 .prose .analogy b { color: var(--brand-gold); }

/* Callouts — tip / warn / danger / note
   แถบสีซ้าย 4px คือตัวที่ทำให้กล่องแยกออกจากเนื้อบทความชัดที่สุด */
.bv1 .prose .callout {
  display: flex; gap: 0.85rem; align-items: flex-start;
  border: 1px solid; border-left-width: 4px;
  border-radius: 0 10px 10px 0;
  padding: 1.1rem 1.25rem; margin: 1.5rem 0;
  font-size: 0.95rem; line-height: 1.75;
}
.bv1 .prose .callout .ico { font-size: 1.25rem; flex-shrink: 0; line-height: 1.6; }
.bv1 .prose .callout p { margin: 0; color: var(--bs-body-color); }
.bv1 .prose .callout .ttl { font-weight: 700; display: block; margin-bottom: 2px; }
.bv1 .prose .callout.c-tip {
  background: rgba(201,169,110,.08); border-color: rgba(201,169,110,.3);
  border-left-color: var(--brand-gold);
}
.bv1 .prose .callout.c-tip    .ttl { color: var(--brand-gold); }
.bv1 .prose .callout.c-warn {
  background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.3);
  border-left-color: var(--brand-amber);
}
.bv1 .prose .callout.c-warn   .ttl { color: var(--brand-amber); }
.bv1 .prose .callout.c-danger {
  background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.3);
  border-left-color: #ef4444;
}
.bv1 .prose .callout.c-danger .ttl { color: #fca5a5; }
.bv1 .prose .callout.c-note {
  background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.3);
  border-left-color: var(--brand-blue);
}
.bv1 .prose .callout.c-note   .ttl { color: var(--brand-blue-light); }

/* Step blocks — สอนทีละขั้น */
.bv1 .prose .step { display: flex; gap: 1.1rem; margin: 1.75rem 0; }
.bv1 .prose .step__n {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(201,169,110,.12); border: 1px solid rgba(201,169,110,.4);
  color: var(--brand-gold); font-weight: 800; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.bv1 .prose .step__body { flex: 1; min-width: 0; }
.bv1 .prose .step__body h3 { margin-top: 0.2rem; }

/* Figure / diagram */
.bv1 .prose figure {
  margin: 1.6rem 0; background: rgba(255,255,255,.02);
  border: 1px solid var(--bs-border-color); border-radius: 16px; padding: 1.25rem;
}
.bv1 .prose figure svg, .bv1 .prose figure img { display: block; width: 100%; height: auto; border-radius: 8px; }
.bv1 .prose figcaption { text-align: center; color: var(--brand-muted); font-size: 0.82rem; margin-top: 0.75rem; }

/* Checklist */
.bv1 .prose .checklist {
  background: rgba(255,255,255,.02); border: 1px solid var(--bs-border-color);
  border-radius: 14px; padding: 1.25rem 1.5rem; margin: 1.4rem 0;
}
.bv1 .prose .checklist ul { list-style: none; padding-left: 0; margin: 0; }
.bv1 .prose .checklist li { position: relative; padding-left: 2rem; margin: 0.6rem 0; }
.bv1 .prose .checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 0.15rem;
  width: 20px; height: 20px; border-radius: 5px;
  background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.4);
  color: #10b981; font-size: 0.72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ===== รองรับ HTML ที่มาจาก Markdown renderer =====
   Markdown ห่อไอคอนด้วย <p> และห่อเนื้อหาไว้ใน .callout__body / .analogy__body
   บล็อกนี้ทำให้ผลลัพธ์หน้าตาเหมือนที่เขียน HTML มือเป๊ะๆ */
.bv1 .prose .callout > p:first-of-type,
.bv1 .prose .analogy > p:first-of-type { flex-shrink: 0; margin: 0; }
.bv1 .prose .callout__body,
.bv1 .prose .analogy__body { flex: 1; min-width: 0; }
.bv1 .prose .analogy__body p { margin: 0; color: var(--bs-body-color); }
.bv1 .prose .callout__body > p + p,
.bv1 .prose .analogy__body > p + p,
.bv1 .prose .callout__body > ul,
.bv1 .prose .callout__body > ol { margin-top: 0.5rem; }
.bv1 .prose .callout__body > ul,
.bv1 .prose .callout__body > ol { margin-bottom: 0; }
.bv1 .prose details > pre,
.bv1 .prose details > p:last-child { margin-bottom: 0; }
.bv1 .prose details > summary { list-style: none; }
.bv1 .prose details > summary::-webkit-details-marker { display: none; }
.bv1 .prose details > summary::before { content: "▸ "; }
.bv1 .prose details[open] > summary::before { content: "▾ "; }

/* กล่องเฉลย :::answer — ใช้ token ล้วน จะได้พลิกตามธีมเอง */
.bv1 .prose details.answer {
  background: rgba(148,163,184,.08);
  border: 1px solid var(--bs-border-color);
  border-left: 4px solid var(--brand-gold);
  border-radius: 0 10px 10px 0;
  padding: 0.9rem 1.1rem;
  margin: 1.1rem 0;
}
.bv1 .prose details.answer > summary {
  cursor: pointer; color: var(--brand-gold);
  font-weight: 700; font-size: 0.92rem;
}
[data-bs-theme="light"] .bv1 .prose details.answer > summary { color: #8a6a2e; }

/* Inline code & pre tweaks ใน docs */
.bv1 .prose p code, .bv1 .prose li code {
  background: rgba(148,163,184,.12); border: 1px solid var(--bs-border-color);
  border-radius: 6px; padding: 1px 7px; font-size: 0.85em; color: #e7d9bd;
}

/* ===== โหมดสว่าง =====
   ธีมเว็บเป็น auto (ตามเครื่องผู้อ่าน) — สีที่ hardcode ไว้สำหรับพื้นเข้ม
   จะจางจนอ่านไม่ออกบนพื้นขาว ต้องมีคู่ของโหมดสว่างเสมอ */
/* ทองของแบรนด์ (#c9a96e / #b8924f) บนพื้นขาวได้คอนทราสต์แค่ ~2.9:1
   ต่ำกว่าเกณฑ์อ่านง่าย 4.5:1 — โหมดสว่างจึงใช้ทองเข้มขึ้นอีกขั้น (~5.1:1) */
[data-bs-theme="light"] .bv1 .prose p code,
[data-bs-theme="light"] .bv1 .prose li code { color: #8a6a2e; }
[data-bs-theme="light"] .bv1 .prose .analogy b { color: #8a6a2e; }
[data-bs-theme="light"] .bv1 .prose .callout.c-tip .ttl { color: #8a6a2e; }
[data-bs-theme="light"] .bv1 .prose .callout.c-warn .ttl { color: #b45309; }
[data-bs-theme="light"] .bv1 .prose .callout.c-danger .ttl { color: #b91c1c; }
[data-bs-theme="light"] .bv1 .prose .callout.c-note .ttl { color: var(--brand-blue); }
[data-bs-theme="light"] .bv1 .prose h3 { color: #8a6a2e; }
[data-bs-theme="light"] .bv1 .prose h4 { color: var(--brand-blue); }
[data-bs-theme="light"] .bv1 .prose figcaption,
[data-bs-theme="light"] .bv1 .prose figcaption { color: #64748b; }