/* ==========================================================================
   Callouts (admonitions) — Obsidian/Quartz style. Author as:
     <blockquote class="callout" data-callout="warning">
       <div class="callout-title">Warning</div>
       <div class="callout-content"><p>…</p></div>
     </blockquote>
   Types: note (default), info, tip, success, question, warning, danger, example, quote.
   ========================================================================== */

.callout {
  --callout-color: 68, 138, 255;
  --cicon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2020h9%22/%3E%3Cpath%20d=%22M16.5%203.5a2.12%202.12%200%200%201%203%203L7%2019l-4%201%201-4Z%22/%3E%3C/svg%3E");
  margin: 1rem 0;
  border: 1px solid color-mix(in srgb, rgb(var(--callout-color)) 28%, var(--lightgray));
  border-left: 3px solid rgb(var(--callout-color));
  border-radius: 6px;
  padding: 0.7rem 1rem;
  background: color-mix(in srgb, rgb(var(--callout-color)) 9%, transparent);
  box-shadow: inset 0 1px 0 var(--skeu-edge-light), inset 0 -1px 0 var(--skeu-edge-dark), 0 2px 6px var(--skeu-edge-dark);
}
.callout-title { display: flex; align-items: center; gap: 0.5rem; color: rgb(var(--callout-color)); font-weight: 600; }
.callout-title::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0;
  background: rgb(var(--callout-color));
  -webkit-mask: var(--cicon) center / contain no-repeat;
  mask: var(--cicon) center / contain no-repeat;
}
.callout-content { margin-top: 0.45rem; }
.callout-content > :first-child { margin-top: 0; }
.callout-content > :last-child { margin-bottom: 0; }
.callout-content p, .callout-content li { color: var(--darkgray); }

.callout[data-callout="info"] { --callout-color: 0, 184, 212; --cicon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%2210%22/%3E%3Cpath%20d=%22M12%2016v-4%22/%3E%3Cpath%20d=%22M12%208h.01%22/%3E%3C/svg%3E"); }
.callout[data-callout="tip"] { --callout-color: 0, 191, 166; --cicon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M8.5%2014.5A2.5%202.5%200%200%200%2011%2012c0-1.38-.5-2-1-3-1.07-2.14-.22-4.05%202-6%20.5%202.5%202%204.9%204%206.5%202%201.6%203%203.5%203%205.5a7%207%200%201%201-14%200c0-1.15.43-2.29%201-3a2.5%202.5%200%200%200%202.5%202.5z%22/%3E%3C/svg%3E"); }
.callout[data-callout="success"] { --callout-color: 0, 200, 83; --cicon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M22%2011.08V12a10%2010%200%201%201-5.93-9.14%22/%3E%3Cpath%20d=%22m9%2011%203%203L22%204%22/%3E%3C/svg%3E"); }
.callout[data-callout="question"] { --callout-color: 100, 221, 23; --cicon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%2210%22/%3E%3Cpath%20d=%22M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203%22/%3E%3Cpath%20d=%22M12%2017h.01%22/%3E%3C/svg%3E"); }
.callout[data-callout="warning"] { --callout-color: 255, 145, 0; --cicon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3z%22/%3E%3Cpath%20d=%22M12%209v4%22/%3E%3Cpath%20d=%22M12%2017h.01%22/%3E%3C/svg%3E"); }
.callout[data-callout="danger"] { --callout-color: 255, 60, 90; --cicon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2014a1%201%200%200%201-.78-1.63l9.9-10.2a.5.5%200%200%201%20.86.46l-1.92%206.02A1%201%200%200%200%2013%2010h7a1%201%200%200%201%20.78%201.63l-9.9%2010.2a.5.5%200%200%201-.86-.46l1.92-6.02A1%201%200%200%200%2011%2014z%22/%3E%3C/svg%3E"); }
.callout[data-callout="example"] { --callout-color: 124, 77, 255; --cicon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M8%206h13%22/%3E%3Cpath%20d=%22M8%2012h13%22/%3E%3Cpath%20d=%22M8%2018h13%22/%3E%3Cpath%20d=%22M3%206h.01%22/%3E%3Cpath%20d=%22M3%2012h.01%22/%3E%3Cpath%20d=%22M3%2018h.01%22/%3E%3C/svg%3E"); }
.callout[data-callout="quote"] { --callout-color: 150, 158, 170; --cicon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2021c3%200%207-1%207-8V5c0-1.25-.76-2.02-2-2H4c-1.25%200-2%20.75-2%201.97V11c0%201.25.75%202%202%202%201%200%201%200%201%201v1c0%201-1%202-2%202s-1%200-1%201v2c0%201%200%201%201%201z%22/%3E%3Cpath%20d=%22M15%2021c3%200%207-1%207-8V5c0-1.25-.76-2.02-2-2h-4c-1.25%200-2%20.75-2%201.97V11c0%201.25.75%202%202%202h.75c0%202.25.25%204-2.75%204v3c0%201%200%201%201%201z%22/%3E%3C/svg%3E"); }