/* Minimal “admonition-like” styling for <details> */
details.admon {
  margin: 1rem 0;
  border: 1px solid var(--fg, #ccc);
  border-left: 0.4rem solid #999;
  border-radius: 0.4rem;
  background: var(--bg, #fff);
}
details.admon[open] {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

details.admon > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.6rem 0.8rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.03);
}
details.admon > summary::-webkit-details-marker {
  display: none;
}

details.admon .admon-body {
  padding: 0.8rem 0.9rem 0.9rem 0.9rem;
}

/* Simple “types” via classes */
details.note {
  --bg: #f8fbff;
  --fg: #b6d4fe;
  border-left-color: #3b82f6;
}
details.tip {
  --bg: #f8fff8;
  --fg: #b7f0c2;
  border-left-color: #22c55e;
}
details.warn {
  --bg: #fffaf5;
  --fg: #ffd8b5;
  border-left-color: #f59e0b;
}
details.danger {
  --bg: #fff7f7;
  --fg: #ffb4b4;
  border-left-color: #ef4444;
}