/* Callout styles — Obsidian-compatible callout rendering
 * See CALL_OUTS.md for the full spec.
 * Color per type is controlled via --callout-color; themes may override.
 */

/* ── Base ────────────────────────────────────────────────────────── */

.callout {
  margin: var(--spacing-md, 1rem) 0;
  border-radius: var(--radius-base, 6px);
  border: 1px solid color-mix(in srgb, var(--callout-color, #888) 35%, transparent);
  border-left: 4px solid var(--callout-color, #888);
  overflow: hidden;
}

.callout-title {
  padding: 0.45rem 0.85rem;
  font-weight: 600;
  font-size: 0.875em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: color-mix(in srgb, var(--callout-color, #888) 14%, transparent);
  color: var(--callout-color, #555);
}

.callout-content {
  padding: 0.6rem 0.85rem;
  background: color-mix(in srgb, var(--callout-color, #888) 5%, var(--surface-raised, transparent));
}

.callout-content > * + * {
  margin-top: 0.5rem;
}

.callout-content p:first-child {
  margin-top: 0;
}

/* ── Foldable (<details>) ────────────────────────────────────────── */

details.callout {
  /* Remove default disclosure triangle */
}

details.callout > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

details.callout > summary::-webkit-details-marker {
  display: none;
}

details.callout > summary::marker {
  display: none;
}

/* Fold indicator: rotate ▶ when closed, ▼ when open */
details.callout > summary .callout-type-icon::after {
  content: ' ▶';
  font-size: 0.7em;
  opacity: 0.65;
  margin-left: 0.2em;
}

details.callout[open] > summary .callout-type-icon::after {
  content: ' ▼';
}

/* ── Type icons (CSS content, no external dependencies) ─────────── */

.callout-note      { --callout-color: #478be6; }
.callout-note      .callout-type-icon::before { content: "✏️"; }

.callout-abstract  { --callout-color: #7c6bf2; }
.callout-abstract  .callout-type-icon::before { content: "📋"; }

.callout-info      { --callout-color: #5ab0ef; }
.callout-info      .callout-type-icon::before { content: "ℹ️"; }

.callout-todo      { --callout-color: #5ab0ef; }
.callout-todo      .callout-type-icon::before { content: "☑️"; }

.callout-tip       { --callout-color: #4ab787; }
.callout-tip       .callout-type-icon::before { content: "🔥"; }

.callout-success   { --callout-color: #4ab787; }
.callout-success   .callout-type-icon::before { content: "✅"; }

.callout-question  { --callout-color: #f5a842; }
.callout-question  .callout-type-icon::before { content: "❓"; }

.callout-warning   { --callout-color: #f5a842; }
.callout-warning   .callout-type-icon::before { content: "⚠️"; }

.callout-failure   { --callout-color: #e05d44; }
.callout-failure   .callout-type-icon::before { content: "❌"; }

.callout-danger    { --callout-color: #e05d44; }
.callout-danger    .callout-type-icon::before { content: "⚡"; }

.callout-bug       { --callout-color: #e05d44; }
.callout-bug       .callout-type-icon::before { content: "🐛"; }

.callout-example   { --callout-color: #9b59b6; }
.callout-example   .callout-type-icon::before { content: "📌"; }

.callout-quote     { --callout-color: #888; }
.callout-quote     .callout-type-icon::before { content: "💬"; }