/* Admonitions (!!! note, !!! warning, ...) in the design-system callout style:
   full rounded frame, soft shadow, tinted title strip, and a round icon with the
   glyph cut out so the strip color shows through. Colors are Material's own per-type
   palette; only the shape changes. Font family and sizes are left as they are. */

:root {
  --adm-icon-pencil: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cmask%20id='m'%3E%3Crect%20width='24'%20height='24'%20fill='white'/%3E%3Cpath%20transform='translate(6.48%206.48)%20scale(.46)'%20fill='black'%20d='M20.71%207.04c.39-.39.39-1.04%200-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41%200l-1.84%201.83%203.75%203.75M3%2017.25V21h3.75L17.81%209.93l-3.75-3.75L3%2017.25z'/%3E%3C/mask%3E%3Ccircle%20cx='12'%20cy='12'%20r='12'%20mask='url(%23m)'/%3E%3C/svg%3E");
  --adm-icon-exclam: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cmask%20id='m'%3E%3Crect%20width='24'%20height='24'%20fill='white'/%3E%3Crect%20x='10.8'%20y='5.2'%20width='2.4'%20height='8.8'%20rx='1.2'%20fill='black'/%3E%3Ccircle%20cx='12'%20cy='17.9'%20r='1.5'%20fill='black'/%3E%3C/mask%3E%3Ccircle%20cx='12'%20cy='12'%20r='12'%20mask='url(%23m)'/%3E%3C/svg%3E");
  --adm-icon-info: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cmask%20id='m'%3E%3Crect%20width='24'%20height='24'%20fill='white'/%3E%3Ccircle%20cx='12'%20cy='6.5'%20r='1.5'%20fill='black'/%3E%3Crect%20x='10.8'%20y='9.6'%20width='2.4'%20height='8.8'%20rx='1.2'%20fill='black'/%3E%3C/mask%3E%3Ccircle%20cx='12'%20cy='12'%20r='12'%20mask='url(%23m)'/%3E%3C/svg%3E");
  --adm-icon-check: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cmask%20id='m'%3E%3Crect%20width='24'%20height='24'%20fill='white'/%3E%3Cpath%20d='M7%2012.3l3.4%203.4%206.6-7'%20fill='none'%20stroke='black'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle%20cx='12'%20cy='12'%20r='12'%20mask='url(%23m)'/%3E%3C/svg%3E");
}

.md-typeset .admonition,
.md-typeset details {
  --adm: #448aff;
  --adm-icon: var(--adm-icon-pencil);
  background-color: #ffffff;
  border: 2px solid var(--adm) !important;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  padding: 0 0.8rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: color-mix(in srgb, var(--adm) 10%, #ffffff) !important;
  color: #1f1f21;
  margin: 0 -0.8rem;
  padding: 0.6rem 0.8rem 0.6rem 2.9rem;
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--adm) !important;
  -webkit-mask-image: var(--adm-icon) !important;
  mask-image: var(--adm-icon) !important;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  height: 22px;
  width: 22px;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
}

/* The title strip is full-bleed, so the first/last body paragraph needs its own spacing */
.md-typeset .admonition > :nth-child(2),
.md-typeset details > :nth-child(2) {
  margin-top: 0.8rem;
}

/* Per-type color (Material palette) and glyph */
.md-typeset .admonition.note, .md-typeset details.note,
.md-typeset .admonition.seealso, .md-typeset details.seealso { --adm: #448aff; }

.md-typeset .admonition.abstract, .md-typeset details.abstract,
.md-typeset .admonition.summary, .md-typeset details.summary,
.md-typeset .admonition.tldr, .md-typeset details.tldr,
.md-typeset .admonition.info, .md-typeset details.info,
.md-typeset .admonition.todo, .md-typeset details.todo { --adm: #00b8d4; --adm-icon: var(--adm-icon-info); }

.md-typeset .admonition.tip, .md-typeset details.tip,
.md-typeset .admonition.hint, .md-typeset details.hint,
.md-typeset .admonition.important, .md-typeset details.important { --adm: #00bfa5; --adm-icon: var(--adm-icon-check); }

.md-typeset .admonition.success, .md-typeset details.success,
.md-typeset .admonition.check, .md-typeset details.check,
.md-typeset .admonition.done, .md-typeset details.done { --adm: #00c853; --adm-icon: var(--adm-icon-check); }

.md-typeset .admonition.question, .md-typeset details.question,
.md-typeset .admonition.help, .md-typeset details.help,
.md-typeset .admonition.faq, .md-typeset details.faq { --adm: #64dd17; }

.md-typeset .admonition.warning, .md-typeset details.warning,
.md-typeset .admonition.caution, .md-typeset details.caution,
.md-typeset .admonition.attention, .md-typeset details.attention { --adm: #ff9100; --adm-icon: var(--adm-icon-exclam); }

.md-typeset .admonition.failure, .md-typeset details.failure,
.md-typeset .admonition.fail, .md-typeset details.fail,
.md-typeset .admonition.missing, .md-typeset details.missing { --adm: #ff5252; --adm-icon: var(--adm-icon-exclam); }

.md-typeset .admonition.danger, .md-typeset details.danger,
.md-typeset .admonition.error, .md-typeset details.error { --adm: #ff1744; --adm-icon: var(--adm-icon-exclam); }

.md-typeset .admonition.bug, .md-typeset details.bug { --adm: #f50057; --adm-icon: var(--adm-icon-exclam); }

.md-typeset .admonition.example, .md-typeset details.example { --adm: #7c4dff; }

.md-typeset .admonition.quote, .md-typeset details.quote,
.md-typeset .admonition.cite, .md-typeset details.cite { --adm: #9e9e9e; }

/* ---- Warning / error: the design-system info box (gray, no frame) ----------------
   Same family as the info / info-moderate / warning / error boxes: #F5F5F5 background,
   12px radius, colored icon on the left, bold heading with the text aligned beneath it.
   Warning uses the orange triangle (apricot-600), error the red circle (red-600). */
:root {
  --adm-icon-triangle: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cmask%20id='m'%3E%3Crect%20width='24'%20height='24'%20fill='white'/%3E%3Crect%20x='10.9'%20y='8.6'%20width='2.2'%20height='6'%20rx='1.1'%20fill='black'/%3E%3Ccircle%20cx='12'%20cy='17.7'%20r='1.3'%20fill='black'/%3E%3C/mask%3E%3Cpath%20d='M12%203.4L21.6%2020.2H2.4z'%20fill='black'%20stroke='black'%20stroke-width='2'%20stroke-linejoin='round'%20mask='url(%23m)'/%3E%3C/svg%3E");
}

.md-typeset .admonition.warning, .md-typeset details.warning,
.md-typeset .admonition.caution, .md-typeset details.caution,
.md-typeset .admonition.attention, .md-typeset details.attention { --adm: #dc6803; --adm-icon: var(--adm-icon-triangle); }

.md-typeset .admonition.danger, .md-typeset details.danger,
.md-typeset .admonition.error, .md-typeset details.error,
.md-typeset .admonition.failure, .md-typeset details.failure,
.md-typeset .admonition.fail, .md-typeset details.fail,
.md-typeset .admonition.missing, .md-typeset details.missing,
.md-typeset .admonition.bug, .md-typeset details.bug { --adm: #d92d20; --adm-icon: var(--adm-icon-exclam); }

.md-typeset .admonition.warning, .md-typeset details.warning,
.md-typeset .admonition.caution, .md-typeset details.caution,
.md-typeset .admonition.attention, .md-typeset details.attention,
.md-typeset .admonition.danger, .md-typeset details.danger,
.md-typeset .admonition.error, .md-typeset details.error,
.md-typeset .admonition.failure, .md-typeset details.failure,
.md-typeset .admonition.fail, .md-typeset details.fail,
.md-typeset .admonition.missing, .md-typeset details.missing,
.md-typeset .admonition.bug, .md-typeset details.bug {
  background-color: #f5f5f5;
  border: 0 !important;
  border-radius: 12px;
  box-shadow: none;
  overflow: visible;
  padding: 16px 20px 16px 54px;
  position: relative;
}

.md-typeset .admonition.warning > .admonition-title, .md-typeset details.warning > summary,
.md-typeset .admonition.caution > .admonition-title, .md-typeset details.caution > summary,
.md-typeset .admonition.attention > .admonition-title, .md-typeset details.attention > summary,
.md-typeset .admonition.danger > .admonition-title, .md-typeset details.danger > summary,
.md-typeset .admonition.error > .admonition-title, .md-typeset details.error > summary,
.md-typeset .admonition.failure > .admonition-title, .md-typeset details.failure > summary,
.md-typeset .admonition.fail > .admonition-title, .md-typeset details.fail > summary,
.md-typeset .admonition.missing > .admonition-title, .md-typeset details.missing > summary,
.md-typeset .admonition.bug > .admonition-title, .md-typeset details.bug > summary {
  background-color: transparent !important;
  color: #121212;
  margin: 0;
  padding: 0;
}

.md-typeset .admonition.warning > .admonition-title::before, .md-typeset details.warning > summary::before,
.md-typeset .admonition.caution > .admonition-title::before, .md-typeset details.caution > summary::before,
.md-typeset .admonition.attention > .admonition-title::before, .md-typeset details.attention > summary::before,
.md-typeset .admonition.danger > .admonition-title::before, .md-typeset details.danger > summary::before,
.md-typeset .admonition.error > .admonition-title::before, .md-typeset details.error > summary::before,
.md-typeset .admonition.failure > .admonition-title::before, .md-typeset details.failure > summary::before,
.md-typeset .admonition.fail > .admonition-title::before, .md-typeset details.fail > summary::before,
.md-typeset .admonition.missing > .admonition-title::before, .md-typeset details.missing > summary::before,
.md-typeset .admonition.bug > .admonition-title::before, .md-typeset details.bug > summary::before {
  left: -34px;
  top: -1px;
  transform: none;
}

.md-typeset .admonition.warning > :nth-child(2), .md-typeset details.warning > :nth-child(2),
.md-typeset .admonition.caution > :nth-child(2), .md-typeset details.caution > :nth-child(2),
.md-typeset .admonition.attention > :nth-child(2), .md-typeset details.attention > :nth-child(2),
.md-typeset .admonition.danger > :nth-child(2), .md-typeset details.danger > :nth-child(2),
.md-typeset .admonition.error > :nth-child(2), .md-typeset details.error > :nth-child(2),
.md-typeset .admonition.failure > :nth-child(2), .md-typeset details.failure > :nth-child(2),
.md-typeset .admonition.fail > :nth-child(2), .md-typeset details.fail > :nth-child(2),
.md-typeset .admonition.missing > :nth-child(2), .md-typeset details.missing > :nth-child(2),
.md-typeset .admonition.bug > :nth-child(2), .md-typeset details.bug > :nth-child(2) {
  margin-top: 0.3rem;
}

.md-typeset .admonition.warning > :last-child, .md-typeset details.warning > :last-child,
.md-typeset .admonition.caution > :last-child, .md-typeset details.caution > :last-child,
.md-typeset .admonition.attention > :last-child, .md-typeset details.attention > :last-child,
.md-typeset .admonition.danger > :last-child, .md-typeset details.danger > :last-child,
.md-typeset .admonition.error > :last-child, .md-typeset details.error > :last-child,
.md-typeset .admonition.failure > :last-child, .md-typeset details.failure > :last-child,
.md-typeset .admonition.fail > :last-child, .md-typeset details.fail > :last-child,
.md-typeset .admonition.missing > :last-child, .md-typeset details.missing > :last-child,
.md-typeset .admonition.bug > :last-child, .md-typeset details.bug > :last-child {
  margin-bottom: 0;
}

/* ---- Note / info: the gray info box with the gray "i" icon ---------------------- */
.md-typeset .admonition.note, .md-typeset details.note,
.md-typeset .admonition.seealso, .md-typeset details.seealso,
.md-typeset .admonition.abstract, .md-typeset details.abstract,
.md-typeset .admonition.summary, .md-typeset details.summary,
.md-typeset .admonition.tldr, .md-typeset details.tldr,
.md-typeset .admonition.info, .md-typeset details.info,
.md-typeset .admonition.todo, .md-typeset details.todo {
  --adm: #757575;
  --adm-icon: var(--adm-icon-info);
  background-color: #f5f5f5;
  border: 0 !important;
  border-radius: 12px;
  box-shadow: none;
  overflow: visible;
  padding: 16px 20px 16px 54px;
  position: relative;
}

.md-typeset .admonition.note > .admonition-title, .md-typeset details.note > summary,
.md-typeset .admonition.seealso > .admonition-title, .md-typeset details.seealso > summary,
.md-typeset .admonition.abstract > .admonition-title, .md-typeset details.abstract > summary,
.md-typeset .admonition.summary > .admonition-title, .md-typeset details.summary > summary,
.md-typeset .admonition.tldr > .admonition-title, .md-typeset details.tldr > summary,
.md-typeset .admonition.info > .admonition-title, .md-typeset details.info > summary,
.md-typeset .admonition.todo > .admonition-title, .md-typeset details.todo > summary {
  background-color: transparent !important;
  color: #121212;
  margin: 0;
  padding: 0;
}

.md-typeset .admonition.note > .admonition-title::before, .md-typeset details.note > summary::before,
.md-typeset .admonition.seealso > .admonition-title::before, .md-typeset details.seealso > summary::before,
.md-typeset .admonition.abstract > .admonition-title::before, .md-typeset details.abstract > summary::before,
.md-typeset .admonition.summary > .admonition-title::before, .md-typeset details.summary > summary::before,
.md-typeset .admonition.tldr > .admonition-title::before, .md-typeset details.tldr > summary::before,
.md-typeset .admonition.info > .admonition-title::before, .md-typeset details.info > summary::before,
.md-typeset .admonition.todo > .admonition-title::before, .md-typeset details.todo > summary::before {
  left: -34px;
  top: -1px;
  transform: none;
}

.md-typeset .admonition.note > :nth-child(2), .md-typeset details.note > :nth-child(2),
.md-typeset .admonition.seealso > :nth-child(2), .md-typeset details.seealso > :nth-child(2),
.md-typeset .admonition.abstract > :nth-child(2), .md-typeset details.abstract > :nth-child(2),
.md-typeset .admonition.summary > :nth-child(2), .md-typeset details.summary > :nth-child(2),
.md-typeset .admonition.tldr > :nth-child(2), .md-typeset details.tldr > :nth-child(2),
.md-typeset .admonition.info > :nth-child(2), .md-typeset details.info > :nth-child(2),
.md-typeset .admonition.todo > :nth-child(2), .md-typeset details.todo > :nth-child(2) {
  margin-top: 0.3rem;
}

.md-typeset .admonition.note > :last-child, .md-typeset details.note > :last-child,
.md-typeset .admonition.seealso > :last-child, .md-typeset details.seealso > :last-child,
.md-typeset .admonition.abstract > :last-child, .md-typeset details.abstract > :last-child,
.md-typeset .admonition.summary > :last-child, .md-typeset details.summary > :last-child,
.md-typeset .admonition.tldr > :last-child, .md-typeset details.tldr > :last-child,
.md-typeset .admonition.info > :last-child, .md-typeset details.info > :last-child,
.md-typeset .admonition.todo > :last-child, .md-typeset details.todo > :last-child {
  margin-bottom: 0;
}

/* ---- Tinted boxes: background and icon color follow the case (info blue, warning amber, error red) ---- */
.md-typeset .admonition.note, .md-typeset details.note,
.md-typeset .admonition.seealso, .md-typeset details.seealso,
.md-typeset .admonition.abstract, .md-typeset details.abstract,
.md-typeset .admonition.summary, .md-typeset details.summary,
.md-typeset .admonition.tldr, .md-typeset details.tldr,
.md-typeset .admonition.info, .md-typeset details.info,
.md-typeset .admonition.todo, .md-typeset details.todo { --adm: #0058d2; background-color: #e8f0fb; }
.md-typeset .admonition.warning, .md-typeset details.warning,
.md-typeset .admonition.caution, .md-typeset details.caution,
.md-typeset .admonition.attention, .md-typeset details.attention { --adm: #dc6803; background-color: #feefc6; }
.md-typeset .admonition.danger, .md-typeset details.danger,
.md-typeset .admonition.error, .md-typeset details.error,
.md-typeset .admonition.failure, .md-typeset details.failure,
.md-typeset .admonition.fail, .md-typeset details.fail,
.md-typeset .admonition.missing, .md-typeset details.missing,
.md-typeset .admonition.bug, .md-typeset details.bug { --adm: #d92d20; background-color: #fee4e2; }

/* Heading 2px larger than Material default */
.md-typeset .admonition-title,
.md-typeset summary { font-size: calc(0.64rem + 2px); }