/* ==========================================================================
   Signal Admonitions for Material for MkDocs

   Load this file after Material and after project/component stylesheets.
   It intentionally targets only Material admonitions and collapsible
   admonitions, not every <details> element, so API widgets remain isolated.
   ========================================================================== */

:root {
  --signal-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.15' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --signal-icon-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.15' viewBox='0 0 24 24'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M8.6 15.4a6 6 0 1 1 6.8 0c-.9.6-1.4 1.4-1.4 2.6h-4c0-1.2-.5-2-1.4-2.6Z'/%3E%3C/svg%3E");
  --signal-icon-important: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.15' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 3 20h18L12 3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --signal-icon-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.15' viewBox='0 0 24 24'%3E%3Cpath d='M7.9 2h8.2L22 7.9v8.2L16.1 22H7.9L2 16.1V7.9L7.9 2Z'/%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --signal-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.15' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.3 2.7 2.7L16.6 9'/%3E%3C/svg%3E");
  --signal-icon-example: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.15' viewBox='0 0 24 24'%3E%3Cpath d='m8 9-4 3 4 3'/%3E%3Cpath d='m16 9 4 3-4 3'/%3E%3Cpath d='m14 5-4 14'/%3E%3C/svg%3E");
  --signal-icon-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.15' viewBox='0 0 24 24'%3E%3Cpath d='M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-2 6-4 6v2Z'/%3E%3Cpath d='M17 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-2 6-4 6v2Z'/%3E%3C/svg%3E");
  --signal-icon-decision: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='5' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M6 8v3a5 5 0 0 0 5 5h4'/%3E%3Cpath d='M6 8v11'/%3E%3C/svg%3E");
}

.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) {
  --signal: #2b6fed;
  --tone: #174ea6;
  --signal-icon: var(--signal-icon-info);

  position: relative;
  display: grid;
  grid-template-columns: 2.125rem minmax(0, 1fr);
  column-gap: 0.78rem;
  row-gap: 0;
  margin: 1.15rem 0 1.25rem;
  padding: 1rem 1.1rem 1rem 1.25rem;
  border: 1px solid color-mix(in oklab, var(--signal) 24%, var(--md-default-fg-color--lightest)) !important;
  border-left: 1px solid color-mix(in oklab, var(--signal) 24%, var(--md-default-fg-color--lightest)) !important;
  border-radius: 0.4rem;
  background: color-mix(in oklab, var(--signal) 6%, var(--md-default-bg-color)) !important;
  box-shadow: 0 1px 0 color-mix(in oklab, var(--md-default-fg-color) 7%, transparent);
  overflow: hidden;
}

.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
)::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 0.4rem 0 0 0.4rem;
  background: var(--signal);
  content: "";
}

.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) > :is(.admonition-title, summary) {
  position: relative;
  grid-column: 2;
  min-height: 1.62rem;
  margin: 0 0 0.32rem !important;
  padding: 0.05rem 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--tone);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) > summary {
  cursor: pointer;
  list-style: none;
}

.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) > summary::-webkit-details-marker {
  display: none;
}

.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) > :is(.admonition-title, summary)::before {
  position: absolute;
  top: -0.02rem;
  left: calc(-2.125rem - 0.78rem);
  width: 2rem;
  height: 2rem;
  border: 1px solid color-mix(in oklab, var(--signal) 30%, var(--md-default-fg-color--lightest));
  border-radius: 50%;
  background: color-mix(in oklab, var(--signal) 11%, var(--md-default-bg-color)) !important;
  content: "";
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) > :is(.admonition-title, summary)::after {
  position: absolute;
  top: -0.02rem;
  left: calc(-2.125rem - 0.78rem);
  width: 2rem;
  height: 2rem;
  margin: 0 !important;
  background: var(--signal) !important;
  content: "";
  transform: none !important;
  -webkit-mask: var(--signal-icon) center / 1.08rem 1.08rem no-repeat !important;
  mask: var(--signal-icon) center / 1.08rem 1.08rem no-repeat !important;
}

.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) > :not(.admonition-title, summary) {
  grid-column: 2;
  min-width: 0;
}

.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) > :is(.admonition-title, summary) + * {
  margin-top: 0 !important;
}

.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) > :last-child {
  margin-bottom: 0 !important;
}

.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) p {
  color: color-mix(in oklab, var(--md-default-fg-color) 88%, var(--md-default-fg-color--light));
  line-height: 1.5;
  margin: 0.52rem 0 0 !important;
}

.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) p + p {
  margin-top: 0.58rem !important;
}

.md-typeset .admonition-intent {
  margin-left: 0.48rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.72rem;
  font-weight: 650;
}

.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) .admonition-intent:first-child {
  margin-left: 0;
}

.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) ul,
.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) ol {
  margin-top: 0.45rem;
}

.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) li + li {
  margin-top: 0.2rem;
}

/* Nested admonitions keep their own rail and icon, but lose extra elevation. */
.md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) {
  margin-top: 0.9rem;
  box-shadow: none;
}

/* Type tokens */
.md-typeset :is(.admonition.note, details.note, .admonition.info, details.info) {
  --signal: #2b6fed;
  --tone: #174ea6;
  --signal-icon: var(--signal-icon-info);
}

.md-typeset :is(.admonition.tip, details.tip) {
  --signal: #0c8b72;
  --tone: #046652;
  --signal-icon: var(--signal-icon-tip);
}

.md-typeset :is(.admonition.success, details.success) {
  --signal: #0c8b72;
  --tone: #046652;
  --signal-icon: var(--signal-icon-success);
}

.md-typeset :is(
  .admonition.abstract,
  details.abstract,
  .admonition.question,
  details.question,
  .admonition.important,
  details.important
) {
  --signal: #7257d7;
  --tone: #533aa9;
  --signal-icon: var(--signal-icon-important);
}

.md-typeset :is(.admonition.warning, details.warning, .admonition.caution, details.caution) {
  --signal: #b66a00;
  --tone: #825000;
  --signal-icon: var(--signal-icon-important);
}

.md-typeset :is(
  .admonition.danger,
  details.danger,
  .admonition.failure,
  details.failure,
  .admonition.bug,
  details.bug
) {
  --signal: #cf3044;
  --tone: #981f2e;
  --signal-icon: var(--signal-icon-danger);
}

.md-typeset :is(.admonition.example, details.example) {
  --signal: #68717c;
  --tone: #414b57;
  --signal-icon: var(--signal-icon-example);
}

.md-typeset :is(.admonition.quote, details.quote) {
  --signal: #68717c;
  --tone: #414b57;
  --signal-icon: var(--signal-icon-quote);
}

.md-typeset :is(.admonition.decision, details.decision) {
  --signal: #7b4ab0;
  --tone: #56337d;
  --signal-icon: var(--signal-icon-decision);
}

[data-md-color-scheme="slate"] .md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) {
  border-color: color-mix(in oklab, var(--signal) 35%, var(--md-default-fg-color--lightest)) !important;
  background: color-mix(in oklab, var(--signal) 13%, var(--md-default-bg-color)) !important;
  box-shadow: 0 1px 0 color-mix(in oklab, black 20%, transparent);
}

[data-md-color-scheme="slate"] .md-typeset :is(
  .admonition,
  details.note,
  details.abstract,
  details.info,
  details.tip,
  details.success,
  details.question,
  details.warning,
  details.caution,
  details.important,
  details.failure,
  details.danger,
  details.bug,
  details.example,
  details.quote,
  details.decision
) > :is(.admonition-title, summary) {
  color: var(--signal);
}

@media screen and (max-width: 560px) {
  .md-typeset :is(
    .admonition,
    details.note,
    details.abstract,
    details.info,
    details.tip,
    details.success,
    details.question,
    details.warning,
    details.caution,
    details.important,
    details.failure,
    details.danger,
    details.bug,
    details.example,
    details.quote,
    details.decision
  ) {
    grid-template-columns: 1.8rem minmax(0, 1fr);
    column-gap: 0.65rem;
    padding: 0.88rem 0.86rem 0.9rem 1rem;
  }

  .md-typeset :is(
    .admonition,
    details.note,
    details.abstract,
    details.info,
    details.tip,
    details.success,
    details.question,
    details.warning,
    details.caution,
    details.important,
    details.failure,
    details.danger,
    details.bug,
    details.example,
    details.quote,
    details.decision
  ) > :is(.admonition-title, summary)::before {
    left: calc(-1.8rem - 0.65rem);
    width: 1.62rem;
    height: 1.62rem;
  }

  .md-typeset :is(
    .admonition,
    details.note,
    details.abstract,
    details.info,
    details.tip,
    details.success,
    details.question,
    details.warning,
    details.caution,
    details.important,
    details.failure,
    details.danger,
    details.bug,
    details.example,
    details.quote,
    details.decision
  ) > :is(.admonition-title, summary)::after {
    top: 0;
    left: calc(-1.8rem - 0.65rem);
    width: 1.62rem;
    height: 1.62rem;
    -webkit-mask-size: 0.92rem 0.92rem !important;
    mask-size: 0.92rem 0.92rem !important;
  }
}
