/* Shared article callouts. Layout-specific calculators and tables stay in page styles. */
:root {
  --article-callout-bg: rgba(45,139,49,.10);
  --article-callout-success-bg: rgba(45,139,49,.12);
  --article-callout-warning-bg: rgba(184,74,69,.11);
  --article-callout-info-bg: rgba(91,158,255,.10);
}
.article-body .article-callout:not(:where([data-site-app], [data-site-app] *)) {
  background: var(--article-callout-bg);
  border-left: 4px solid var(--article-panel-border);
  border-radius: var(--r1);
  padding: var(--s3);
  margin: var(--s4) 0;
  color: var(--td-med);
}
.article-body .article-callout--success:not(:where([data-site-app], [data-site-app] *)),
.article-body .article-callout--cta:not(:where([data-site-app], [data-site-app] *)) { background: var(--article-callout-success-bg); }
.article-body .article-callout--warning:not(:where([data-site-app], [data-site-app] *)) { background: var(--article-callout-warning-bg); }
.article-body .article-callout--info:not(:where([data-site-app], [data-site-app] *)) { background: var(--article-callout-info-bg); }
.article-body .article-callout :is(h2:not(:where([data-site-app], [data-site-app] *)), h3, h4) { color: var(--td-hi); }
.article-body .article-callout :is(p:not(:where([data-site-app], [data-site-app] *)), li) { color: var(--td-med); }
.article-body .article-callout--cta:not(:where([data-site-app], [data-site-app] *)) { text-align: center; margin: var(--s5) 0; }
.article-body .article-callout--cta h3:not(:where([data-site-app], [data-site-app] *)) { margin-bottom: var(--s2); }
.article-body .article-callout--cta > p:first-of-type:not(:where([data-site-app], [data-site-app] *)) { font-size: 1.1rem; margin-bottom: var(--s3); }
.article-body .article-callout--cta > p:last-of-type:not(:where([data-site-app], [data-site-app] *)) { margin-top: var(--s2); font-size: .9rem; opacity: .7; }

@media (prefers-color-scheme: light) {
  :root {
    --article-callout-bg: rgba(45,139,49,.08);
    --article-callout-success-bg: rgba(45,139,49,.08);
    --article-callout-warning-bg: rgba(184,74,69,.08);
    --article-callout-info-bg: rgba(43,91,173,.08);
  }
}

@media (max-width: 640px) {
  .article-body .article-callout:not(:where([data-site-app], [data-site-app] *)) { padding: var(--s2); --button-padding: .75rem 1rem; --button-size: .9rem; }
}