.callout-note {
  background-color: #f5f7fa;
  border-left: 4px solid #4a90e2;
}
.callout-note > .callout-header {
  background-color: #e8f0fe;
  color: #1a73e8;
  font-weight: bold;
}

/* These callout methods are not yet working - debugging */

/* Make .callout-comp look different enough to confirm it works */
.callout.callout-note.callout-comp {
  border-left: 6px solid #0ea5e9;      /* strong left rail */
  background: #f8fafc;                 /* light tint */
}

.callout.callout-note.callout-comp .callout-title {
  font-weight: 700;
}

/* Computational examples: cool accent, strong left rail, tight spacing */
.callout.callout-comp {
  --callout-border-left: 4px solid #3b82f6; /* Tailwind-ish blue-500 */
  --callout-color: #0f172a;                 /* slate-900 text */
  --callout-bg: #f8fafc;                    /* slate-50 */
}
.callout.callout-comp .callout-title {
  font-weight: 600;
}

/* Stronger selector to override theme styles - debugging.  But not working yet. */
.callout.callout-note.callout-comp {
  border-left: 6px solid #0ea5e9 !important; /* your custom border */
  background: #f8fafc !important;            /* your custom background */
}

/* Historical notes: warm accent, subtle tint */
.callout.callout-history {
  --callout-border-left: 4px solid #a16207; /* amber-700 */
  --callout-bg: #fff7ed;                    /* orange-50 */
}

/* External links: minimalist—border only, no fill */
.callout.callout-link {
  --callout-border-left: 3px solid #0ea5e9; /* sky-500 */
  --callout-bg: transparent;
}