/* Shared callout boxes: TL;DR / Formula+Calculation / Worked Example.
 * Used on public tool (#aboutContent) + blog (.blog-content) pages.
 * TinyMCE editor preview reuses the same colors via content_style.
 */
#aboutContent .tldr-box,
#aboutContent .formula-box,
#aboutContent .calculation-box,
#aboutContent .example-box,
.blog-content .tldr-box,
.blog-content .formula-box,
.blog-content .calculation-box,
.blog-content .example-box {
  border-radius: 8px;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 0.95em;
  line-height: 1.7;
}

/* TL;DR — lime (matches existing .tldr-box) */
#aboutContent .tldr-box,
.blog-content .tldr-box {
  background: #f3f9e1;
  border-left: 4px solid var(--primary-dark, #5f7a00);
  color: #39490a;
}

/* Formula / Calculation — indigo */
#aboutContent .formula-box,
#aboutContent .calculation-box,
.blog-content .formula-box,
.blog-content .calculation-box {
  background: #eef2ff;
  border-left: 4px solid #4f46e5;
  color: #1e1b4b;
}

/* Worked Example — amber */
#aboutContent .example-box,
.blog-content .example-box {
  background: #fefce8;
  border-left: 4px solid #eab308;
  color: #422006;
}

#aboutContent .tldr-box h2, #aboutContent .tldr-box h3, #aboutContent .tldr-box h4,
#aboutContent .formula-box h2, #aboutContent .formula-box h3, #aboutContent .formula-box h4,
#aboutContent .calculation-box h2, #aboutContent .calculation-box h3, #aboutContent .calculation-box h4,
#aboutContent .example-box h2, #aboutContent .example-box h3, #aboutContent .example-box h4,
.blog-content .tldr-box h2, .blog-content .tldr-box h3, .blog-content .tldr-box h4,
.blog-content .formula-box h2, .blog-content .formula-box h3, .blog-content .formula-box h4,
.blog-content .calculation-box h2, .blog-content .calculation-box h3, .blog-content .calculation-box h4,
.blog-content .example-box h2, .blog-content .example-box h3, .blog-content .example-box h4 {
  margin-top: 0;
  color: inherit;
}

/* Dark mode — monochrome glass: same surface, accent left-border only */
[data-theme="dark"] #aboutContent .tldr-box,
[data-theme="dark"] #aboutContent .formula-box,
[data-theme="dark"] #aboutContent .calculation-box,
[data-theme="dark"] #aboutContent .example-box,
[data-theme="dark"] .blog-content .tldr-box,
[data-theme="dark"] .blog-content .formula-box,
[data-theme="dark"] .blog-content .calculation-box,
[data-theme="dark"] .blog-content .example-box {
  background: color-mix(in srgb, var(--surface-1) 78%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 32px -16px rgba(0,0,0,0.25);
  color: var(--text-secondary);
}
[data-theme="dark"] #aboutContent .tldr-box,
[data-theme="dark"] .blog-content .tldr-box {
  border-left: 3px solid var(--primary, #c9f51a);
}
[data-theme="dark"] #aboutContent .formula-box,
[data-theme="dark"] #aboutContent .calculation-box,
[data-theme="dark"] .blog-content .formula-box,
[data-theme="dark"] .blog-content .calculation-box {
  border-left: 3px solid #a5b4fc;
}
[data-theme="dark"] #aboutContent .example-box,
[data-theme="dark"] .blog-content .example-box {
  border-left: 3px solid #facc15;
}
[data-theme="dark"] #aboutContent .tldr-box h2, #aboutContent .tldr-box h3, #aboutContent .tldr-box h4,
[data-theme="dark"] #aboutContent .formula-box h2, #aboutContent .formula-box h3, #aboutContent .formula-box h4,
[data-theme="dark"] #aboutContent .calculation-box h2, #aboutContent .calculation-box h3, #aboutContent .calculation-box h4,
[data-theme="dark"] #aboutContent .example-box h2, #aboutContent .example-box h3, #aboutContent .example-box h4,
[data-theme="dark"] .blog-content .tldr-box h2, [data-theme="dark"] .blog-content .tldr-box h3, [data-theme="dark"] .blog-content .tldr-box h4,
[data-theme="dark"] .blog-content .formula-box h2, [data-theme="dark"] .blog-content .formula-box h3, [data-theme="dark"] .blog-content .formula-box h4,
[data-theme="dark"] .blog-content .calculation-box h2, [data-theme="dark"] .blog-content .calculation-box h3, [data-theme="dark"] .blog-content .calculation-box h4,
[data-theme="dark"] .blog-content .example-box h2, [data-theme="dark"] .blog-content .example-box h3, [data-theme="dark"] .blog-content .example-box h4 {
  color: var(--text-primary);
}