/*
 * ============================================================
 *  blog-maths.css  —  Sam-Theme5 | Maths Category Styles
 * ============================================================
 *  Import AFTER blog-core.css on Maths course/blog posts.
 *  Overrides accent tokens for a warm scholarly purple/indigo
 *  palette that contrasts nicely with the green site chrome.
 *
 *  v1.1  Added section 12: the "bt-" article components
 *        (Bayes / probability posts: boxes, step lists, question
 *        cards, probability trees). Everything is driven by the
 *        theme tokens from blog-core.css, so it follows the site's
 *        light / dark switch ([data-theme="dark"]) automatically.
 *        Also fixed light-on-light text (white on light purple)
 *        in dark mode for table headers and definition labels.
 * ============================================================
 */

/* ── 1. Maths Color Tokens ───────────────────────────────── */

:root {
  --accent-primary:    #5c3d99;
  --accent-secondary:  #3e2470;
  --accent-bg:         #f3eefc;
  --accent-border:     #c9b3f0;

  --code-bg:           #f5f0fc;
  --code-color:        #5c3d99;
  --code-border:       #d6c8f5;

  --highlight-border:  #5c3d99;
  --highlight-bg:      #f7f2ff;

  --blockquote-bg:     #faf7ff;
  --blockquote-border: #c9b3f0;

  --text-link:         #5c3d99;
  --text-link-hover:   #3e2470;

  /* Text / fills that sit ON the accent colour (readable in both modes) */
  --on-accent:         #ffffff;
  --bm-head-bg:        #5c3d99;
  --bm-head-fg:        #ffffff;

  /* Extra neutrals */
  --bm-muted:          #475569;
  --bm-rail:           #94a3b8;

  /* Semantic colours used by boxes, pills and the probability tree */
  --bm-ok:             #15803d;
  --bm-ok-ink:         #14532d;
  --bm-ok-bg:          #f0fdf4;
  --bm-ok-line:        #16a34a;
  --bm-ok-glow:        rgba(22, 163, 74, 0.22);

  --bm-warn:           #b45309;
  --bm-warn-bg:        #fffbeb;
  --bm-warn-line:      #d97706;

  --bm-bad:            #b91c1c;
  --bm-bad-bg:         #fef2f2;
  --bm-bad-line:       #dc2626;

  --bm-teal:           #0f766e;
  --bm-teal-bg:        #f0fdfa;
  --bm-teal-line:      #14b8a6;

  --bm-blue:           #1d4ed8;
}

[data-theme="dark"] {
  --accent-primary:    #b18cf7;
  --accent-secondary:  #caaeff;
  --accent-bg:         #160f28;
  --accent-border:     #362060;

  --code-bg:           #130f20;
  --code-color:        #c9a8ff;
  --code-border:       #2e1f52;

  --highlight-bg:      #110c22;
  --highlight-border:  #7040cc;

  --blockquote-bg:     #16112a;
  --blockquote-border: #3d2875;

  --text-link:         #c0a0ff;
  --text-link-hover:   #d8c0ff;

  --on-accent:         #1a0f33;
  --bm-head-bg:        #3b2a6e;
  --bm-head-fg:        #f3ecff;

  --bm-muted:          #94a3b8;
  --bm-rail:           #64748b;

  --bm-ok:             #4ade80;
  --bm-ok-ink:         #bbf7d0;
  --bm-ok-bg:          #0d2218;
  --bm-ok-line:        #22c55e;
  --bm-ok-glow:        rgba(34, 197, 94, 0.28);

  --bm-warn:           #fbbf24;
  --bm-warn-bg:        #2a1d05;
  --bm-warn-line:      #f59e0b;

  --bm-bad:            #f87171;
  --bm-bad-bg:         #2b1111;
  --bm-bad-line:       #ef4444;

  --bm-teal:           #5eead4;
  --bm-teal-bg:        #0a2a27;
  --bm-teal-line:      #2dd4bf;

  --bm-blue:           #7db4ff;
}

/* ── 2. Maths Category Badge ─────────────────────────────── */

.blog-category-badge.maths {
  background: var(--accent-bg);
  color: var(--accent-primary);
  border-color: var(--accent-border);
}

/* ── 3. Headings ─────────────────────────────────────────── */

.post-content h1,
.course-text h1,
.blog-body h1 {
  color: var(--accent-primary);
}

.post-content h2,
.course-text h2,
.blog-body h2 {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-border);
}

/* h2 underline accent line */
.post-content h2::after,
.course-text h2::after,
.blog-body h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--accent-primary);
  border-radius: 2px;
  margin-top: 8px;
}

.post-content h3,
.course-text h3,
.blog-body h3 {
  color: #4a2e80;
}

[data-theme="dark"] .post-content h3,
[data-theme="dark"] .course-text h3,
[data-theme="dark"] .blog-body h3 {
  color: #c0a8f8;
}

/* ── 4. Blockquote — styled as definition card ────────────── */

.post-content blockquote,
.course-text blockquote,
.blog-body blockquote {
  position: relative;
  background: var(--blockquote-bg);
  border-left: 4px solid var(--blockquote-border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 18px 22px 18px 26px;
  margin: 24px 0;
  color: var(--text-secondary);
  font-size: 0.97rem;
}

/* Maths-specific: subtle "theorem" icon hint */
.post-content blockquote::before,
.course-text blockquote::before,
.blog-body blockquote::before {
  content: '≡';
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 1.4rem;
  color: var(--accent-border);
  opacity: 0.6;
  font-style: normal;
  font-weight: bold;
}

/* ── 5. Formula / Math Display ───────────────────────────── */

.formula,
.math-display {
  background: var(--bg-surface-3);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin: 22px 0;
  text-align: center;
  overflow-x: auto;
  position: relative;
}

.formula::before,
.math-display::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-border));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

[data-theme="dark"] .formula,
[data-theme="dark"] .math-display {
  background: var(--bg-surface-2);
  border-color: var(--accent-border);
}

/* MathJax rendered output */
mjx-container,
.MathJax {
  color: var(--text-primary);
}

[data-theme="dark"] mjx-container,
[data-theme="dark"] .MathJax {
  color: var(--text-primary) !important;
}

/* ── 6. Definition / Theorem Box ─────────────────────────── */

.definition-box,
.theorem-box {
  border: 1.5px solid var(--accent-border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin: 28px 0;
  background: var(--accent-bg);
  position: relative;
  overflow: hidden;
}

.definition-box::before,
.theorem-box::before {
  content: attr(data-label);
  display: inline-block;
  background: var(--accent-primary);
  color: var(--on-accent);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 0 0 var(--radius-sm) 0;
  position: absolute;
  top: 0;
  left: 0;
}

[data-theme="dark"] .definition-box,
[data-theme="dark"] .theorem-box {
  background: var(--accent-bg);
  border-color: var(--accent-border);
}

/* ── 7. List Items ────────────────────────────────────────── */

.post-content ul li,
.post-content ol li,
.course-text ul li,
.course-text ol li,
.blog-body ul li,
.blog-body ol li {
  color: var(--text-primary);
}

[data-theme="dark"] .post-content ul li,
[data-theme="dark"] .post-content ol li,
[data-theme="dark"] .course-text ul li,
[data-theme="dark"] .course-text ol li,
[data-theme="dark"] .blog-body ul li,
[data-theme="dark"] .blog-body ol li {
  color: var(--text-secondary);
}

/* Custom list marker for maths */
.post-content ul,
.course-text ul,
.blog-body ul {
  list-style: none;
  padding-left: 24px;
}

.post-content ul li,
.course-text ul li,
.blog-body ul li {
  position: relative;
}

.post-content ul li::before,
.course-text ul li::before,
.blog-body ul li::before {
  content: '→';
  position: absolute;
  left: -22px;
  color: var(--accent-primary);
  font-weight: bold;
  font-size: 0.9em;
}

/* ── 8. Highlight Box (Maths override) ───────────────────── */

.highlight-box {
  background: var(--highlight-bg);
  border-left-color: var(--highlight-border);
}

.highlight-box strong {
  color: var(--accent-primary);
}

/* ── 9. CTA Box (Maths override) ─────────────────────────── */

.cta-box {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent-primary);
}

[data-theme="dark"] .cta-box {
  background: #110c22;
  border-color: #2e1a52;
  color: #c0a0ff;
}

/* ── 10. Proof / Working section ─────────────────────────── */

.proof-block {
  font-family: var(--font-body);
  font-style: italic;
  border-top: 1px dashed var(--border-medium);
  border-bottom: 1px dashed var(--border-medium);
  padding: 14px 18px;
  margin: 22px 0;
  color: var(--text-secondary);
  position: relative;
}

.proof-block::after {
  content: '□';
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: 1.1rem;
  color: var(--accent-primary);
  font-style: normal;
}

/* ── 11. Probability Table ───────────────────────────────── */

.prob-table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.prob-table thead {
  background: var(--bm-head-bg);
  color: var(--bm-head-fg);
}

.prob-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
}

.prob-table tbody tr {
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface);
  transition: background var(--transition-base);
}

.prob-table tbody tr:nth-child(even) {
  background: var(--bg-surface-2);
}

.prob-table tbody tr:hover {
  background: var(--accent-bg);
}

.prob-table td {
  padding: 11px 16px;
  color: var(--text-primary);
}

[data-theme="dark"] .prob-table tbody tr {
  background: var(--bg-surface);
}

[data-theme="dark"] .prob-table tbody tr:nth-child(even) {
  background: var(--bg-surface-2);
}

[data-theme="dark"] .prob-table td {
  color: var(--text-secondary);
}
/* ── 12. Article components (.bt-*)  ─────────────────────────
 *  Used by the Bayes' theorem / probability posts.
 *  Colours, fonts, radii and shadows all come from the theme
 *  tokens, so light and dark mode need no separate rules.
 * ──────────────────────────────────────────────────────────── */

/* 12.0  Table headers: readable in both modes (all maths posts) */
.post-content th,
.course-text th,
.blog-body th {
  background: var(--bm-head-bg);
  color: var(--bm-head-fg);
}

/* 12.1  Wrapper: inherits the theme's font, size and colour */
.bt-article {
  max-width: 860px;
  margin: 0 auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.bt-article *,
.bt-article *::before,
.bt-article *::after {
  box-sizing: border-box;
}

.bt-article sub,
.bt-article sup {
  font-size: 0.72em;
  line-height: 0;
}

.bt-article h2,
.bt-article h3 {
  scroll-margin-top: 90px;
}

.bt-article h4 {
  margin: 1.3em 0 0.4em;
  font-family: var(--font-ui);
  font-size: 0.95em;
  color: var(--bm-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bt-article hr {
  border: 0;
  border-top: 1px solid var(--border-light);
  margin: 2.2em 0;
}

/* Colour helpers for the four parts of Bayes' formula */
.bt-article .bt-prior      { color: var(--accent-primary); font-weight: 700; }
.bt-article .bt-likelihood { color: var(--bm-ok);          font-weight: 700; }
.bt-article .bt-posterior  { color: var(--bm-blue);        font-weight: 700; }
.bt-article .bt-evidence   { color: var(--bm-warn);        font-weight: 700; }

/* 12.2  Intro and table of contents */
.bt-article .bt-intro {
  padding: 1em 1.2em;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.bt-article .bt-toc {
  margin: 1.5em 0 2em;
  padding: 1em 1.3em;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
}

.bt-article .bt-toc-title {
  margin: 0 0 0.4em;
  font-weight: 800;
  font-size: 1rem;
  color: var(--accent-primary);
}

.bt-article .bt-toc ol {
  margin: 0;
  font-size: 0.93rem;
}

.bt-article .bt-toc li {
  margin-bottom: 0.25em;
}

/* 12.3  Call-out boxes */
.bt-article .bt-box {
  margin: 1.5em 0;
  padding: 1em 1.2em;
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-left: 5px solid var(--accent-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.bt-article .bt-box > :last-child {
  margin-bottom: 0;
}

.bt-article .bt-box-title {
  display: block;
  margin-bottom: 0.4em;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

.bt-article .bt-note {
  background: var(--bm-warn-bg);
  border-color: var(--bm-warn-line);
  border-left-color: var(--bm-warn-line);
}
.bt-article .bt-note .bt-box-title { color: var(--bm-warn); }

.bt-article .bt-tip {
  background: var(--bm-ok-bg);
  border-color: var(--bm-ok-line);
  border-left-color: var(--bm-ok-line);
}
.bt-article .bt-tip .bt-box-title { color: var(--bm-ok); }

.bt-article .bt-warning {
  background: var(--bm-bad-bg);
  border-color: var(--bm-bad-line);
  border-left-color: var(--bm-bad-line);
}
.bt-article .bt-warning .bt-box-title { color: var(--bm-bad); }

/* 12.4  Formulas */
.bt-article .bt-formula {
  position: relative;
  margin: 1.5em 0;
  padding: 1.1em 0.9em;
  text-align: center;
  font-size: 1.2em;
  line-height: 2;
  color: var(--text-primary);
  background: var(--bg-surface-2);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.bt-article .bt-formula::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-border));
}

.bt-article .bt-formula-small {
  font-size: 1.05em;
}

.bt-article .bt-eq {
  margin: 0.6em 0;
  text-align: center;
  font-size: 1.08em;
  line-height: 2;
  color: var(--text-primary);
  overflow-x: auto;
}

/* Stacked fractions */
.bt-article .bt-frac {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  text-align: center;
  margin: 0 0.25em;
  line-height: 1.35;
}

.bt-article .bt-frac > span:first-child {
  padding: 0 0.3em 0.1em;
  border-bottom: 1.5px solid currentColor;
}

.bt-article .bt-frac > span:last-child {
  padding: 0.1em 0.3em 0;
}

/* 12.5  Tables (look comes from the theme; this adds scrolling) */
.bt-article .bt-table-wrap {
  margin: 1.4em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bt-article .bt-table-wrap .bt-table {
  margin: 0;
}

.bt-article .bt-table td,
.bt-article .bt-table th {
  vertical-align: top;
}

.bt-article .bt-table .bt-center {
  text-align: center;
}

/* 12.6  Numbered steps and checklists */
.bt-article ol.bt-steps {
  list-style: none;
  margin: 0.6em 0 1.1em;
  padding: 0;
  counter-reset: bt-step;
}

.bt-article ol.bt-steps > li {
  position: relative;
  margin: 0 0 0.9em;
  padding-left: 2.6em;
  counter-increment: bt-step;
}

.bt-article ol.bt-steps > li::before {
  content: counter(bt-step);
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.85em;
  height: 1.85em;
  line-height: 1.85em;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.82em;
  font-weight: 800;
  color: var(--on-accent);
  background: var(--accent-primary);
  border-radius: 50%;
}

.bt-article ul.bt-check,
.bt-article ul.bt-cross {
  list-style: none;
  padding-left: 0;
}

.bt-article ul.bt-check > li,
.bt-article ul.bt-cross > li {
  position: relative;
  padding-left: 1.8em;
}

.bt-article ul.bt-check > li::before,
.bt-article ul.bt-cross > li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
}

.bt-article ul.bt-check > li::before { content: "\2713"; color: var(--bm-ok); }
.bt-article ul.bt-cross > li::before { content: "\2717"; color: var(--bm-bad); }

/* Working lines inside a solution */
.bt-article .bt-given {
  margin: 0.45em 0 0.8em;
  padding: 0.7em 1em;
  line-height: 1.9;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px dashed var(--accent-primary);
  border-radius: 8px;
  overflow-x: auto;
}

.bt-article .bt-answer {
  margin: 1em 0 0;
  padding: 0.7em 1em;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--bm-ok-ink);
  background: var(--bm-ok-bg);
  border: 2px solid var(--bm-ok-line);
  border-radius: 8px;
}

/* 12.7  Question cards and solutions */
.bt-article .bt-question {
  margin: 2em 0 0;
  padding: 1.2em 1.3em 1em;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-top: 4px solid var(--accent-primary);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--shadow-sm);
}

.bt-article .bt-question > :last-child {
  margin-bottom: 0;
}

.bt-article .bt-q-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.6em;
}

.bt-article .bt-q-label {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--accent-primary);
}

.bt-article .bt-level {
  display: inline-block;
  padding: 0.1em 0.8em;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.8;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.bt-article .bt-level-beginner { color: var(--bm-ok);   background: var(--bm-ok-bg); }
.bt-article .bt-level-easy     { color: var(--bm-teal); background: var(--bm-teal-bg); }
.bt-article .bt-level-medium   { color: var(--bm-warn); background: var(--bm-warn-bg); }
.bt-article .bt-level-advanced { color: var(--bm-bad);  background: var(--bm-bad-bg); }

.bt-article .bt-solution {
  margin: 0 0 2em;
  padding: 1em 1.3em 1.1em;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-light);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.bt-article .bt-solution > :last-child {
  margin-bottom: 0;
}

.bt-article .bt-solution-title {
  display: block;
  margin-bottom: 0.6em;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bm-ok);
}

.bt-article .bt-method {
  display: inline-block;
  margin: 1.6em 0 0.6em;
  padding: 0.3em 0.9em;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--bm-head-fg);
  background: var(--bm-head-bg);
  border-radius: 6px;
}

/* 12.8  Probability tree (pure CSS, circled paths) */
.bt-article .bt-tree-box {
  margin: 1.5em 0;
  padding: 1.1em 0.6em 0.9em;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.bt-article .bt-tree-scroll {
  overflow-x: auto;
  padding-bottom: 0.4em;
  -webkit-overflow-scrolling: touch;
}

.bt-article .bt-t {
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--text-primary);
}

.bt-article .bt-t-w2 { min-width: 300px; }
.bt-article .bt-t-w3 { min-width: 430px; }
.bt-article .bt-t-w4 { min-width: 580px; }
.bt-article .bt-t-w6 { min-width: 700px; }

.bt-article .bt-t-root {
  display: inline-block;
  padding: 0.45em 1.4em;
  font-weight: 800;
  color: var(--bm-head-fg);
  background: var(--bm-head-bg);
  border-radius: 8px;
}

.bt-article .bt-t-kids {
  position: relative;
  display: flex;
  padding-top: 20px;
}

.bt-article .bt-t-kids::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 20px;
  margin-left: -1px;
  border-left: 2px solid var(--bm-rail);
}

.bt-article .bt-t-kids.bt-hot::before {
  margin-left: -1.5px;
  border-left: 3px solid var(--bm-ok-line);
}

.bt-article .bt-t-kid {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 20px 4px 0;
}

.bt-article .bt-t-kid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: -1px;
  border-top: 2px solid var(--bm-rail);
}

.bt-article .bt-t-kid:first-child::before { left: 50%; }
.bt-article .bt-t-kid:last-child::before  { right: 50%; }
.bt-article .bt-t-kid:only-child::before  { display: none; }

.bt-article .bt-t-kid::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 20px;
  margin-left: -1px;
  border-left: 2px solid var(--bm-rail);
}

.bt-article .bt-t-kid.bt-hot::after {
  margin-left: -1.5px;
  border-left: 3px solid var(--bm-ok-line);
}

/* Probability written on a branch */
.bt-article .bt-t-edge {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 0.45em;
  padding: 0.05em 0.65em;
  font-weight: 800;
  color: var(--accent-secondary);
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
}

.bt-article .bt-t-kid.bt-hot > .bt-t-edge {
  color: var(--bm-ok-ink);
  background: var(--bm-ok-bg);
  border: 2px solid var(--bm-ok-line);
}

/* Cause node (E1, E2 ...) */
.bt-article .bt-t-node {
  display: block;
  max-width: 150px;
  margin: 0 auto;
  padding: 0.45em 0.5em;
  background: var(--bg-surface-2);
  border: 2px solid var(--border-medium);
  border-radius: 8px;
}

.bt-article .bt-t-node small {
  display: block;
  font-size: 0.82em;
  color: var(--bm-muted);
}

.bt-article .bt-t-kid.bt-hot > .bt-t-node {
  background: var(--bm-ok-bg);
  border-color: var(--bm-ok-line);
}

/* Final outcome (oval) with its path probability */
.bt-article .bt-t-leaf {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 5.4em;
  min-height: 3.7em;
  padding: 0.4em 0.7em;
  background: var(--bg-surface);
  border: 2px solid var(--border-medium);
  border-radius: 50%;
}

.bt-article .bt-t-leaf small {
  font-size: 0.95em;
  font-weight: 700;
  color: var(--bm-muted);
}

/* THE circled path (numerator) */
.bt-article .bt-t-leaf.bt-ring {
  background: var(--bm-ok-bg);
  border: 4px solid var(--bm-ok-line);
  box-shadow: 0 0 0 4px var(--bm-ok-glow);
}

.bt-article .bt-t-leaf.bt-ring small {
  color: var(--bm-ok-ink);
}

/* Other paths that also give the evidence (part of the denominator) */
.bt-article .bt-t-leaf.bt-ring-alt {
  background: var(--bm-warn-bg);
  border: 3px dashed var(--bm-warn-line);
}

.bt-article .bt-t-leaf.bt-ring-alt small {
  color: var(--bm-warn);
}

/* Legend */
.bt-article .bt-t-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.4em;
  justify-content: center;
  margin: 0.8em 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  color: var(--text-primary);
}

.bt-article .bt-t-legend li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  color: var(--text-primary);
}

/* stop the theme's "→" list marker appearing in the legend */
.bt-article .bt-t-legend li::before {
  content: none;
}

.bt-article .bt-key {
  flex: none;
  display: inline-block;
  width: 1.8em;
  height: 1.15em;
  background: var(--bg-surface);
  border: 2px solid var(--border-medium);
  border-radius: 50%;
}

.bt-article .bt-key-hot {
  background: var(--bm-ok-bg);
  border: 3px solid var(--bm-ok-line);
}

.bt-article .bt-key-alt {
  background: var(--bm-warn-bg);
  border: 2px dashed var(--bm-warn-line);
}

.bt-article .bt-tree-caption {
  margin: 0.7em 0 0;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  line-height: 1.5;
  text-align: center;
  color: var(--bm-muted);
}

.bt-article .bt-tree-caption:empty {
  display: none;
}

/* 12.9  Closing call-out (matches the theme's .cta-box) */
.bt-article .bt-cta {
  margin: 2.2em 0 1em;
  padding: 1.2em 1.4em;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--accent-primary);
  background: var(--accent-bg);
  border: 1.5px solid var(--accent-border);
  border-radius: var(--radius-lg);
}

.bt-article .bt-cta p {
  margin: 0;
}

/* 12.10  Responsive and print */
@media (max-width: 480px) {
  .bt-article .bt-formula {
    font-size: 1rem;
    padding: 0.8em 0.4em;
  }

  .bt-article .bt-question,
  .bt-article .bt-solution {
    padding-left: 0.95em;
    padding-right: 0.95em;
  }

  .bt-article .bt-box {
    padding: 0.9em 1em;
  }
}

@media print {
  .bt-article .bt-toc,
  .bt-article .bt-cta {
    display: none;
  }

  .bt-article .bt-question,
  .bt-article .bt-solution,
  .bt-article .bt-box {
    page-break-inside: avoid;
  }
}