/* ==========================================================================
   Custom styling for the Initiative documentation.

   Adds two purpose-built callout (admonition) styles used throughout the docs:

     !!! screenshot "..."   — marks exactly where a picture should go, and what
                              it should show. Renders as a dashed purple box with
                              a camera icon so writers/editors can spot every
                              place an image is still needed.

     !!! techspec "..."     — "for the technically curious" boxes that hold the
                              precise technical detail (how something is enforced,
                              which standard applies) without cluttering the
                              plain-language flow. Often used collapsed: ??? techspec
   ========================================================================== */

:root {
  --md-admonition-icon--screenshot: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%2015.2a3.2%203.2%200%201%200%200-6.4%203.2%203.2%200%200%200%200%206.4zM9%202%207.17%204H4a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2h-3.17L15%202H9zm3%2015a5%205%200%201%201%200-10%205%205%200%200%201%200%2010z%22/%3E%3C/svg%3E');
  --md-admonition-icon--techspec: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M22.7%2019l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9%206%206%209%201.6%204.7C.4%207.1.9%2010.1%202.9%2012.1c1.9%201.9%204.6%202.4%206.9%201.5l9.1%209.1c.4.4%201%20.4%201.4%200l2.3-2.3c.5-.4.5-1.1.1-1.4z%22/%3E%3C/svg%3E');
}

/* --- Screenshot placeholder ------------------------------------------------ */
.md-typeset .admonition.screenshot,
.md-typeset details.screenshot {
  border-color: #7c4dff;
  border-left-width: 0.2rem;
  border-left-style: dashed;
}

.md-typeset .screenshot > .admonition-title,
.md-typeset .screenshot > summary {
  background-color: rgba(124, 77, 255, 0.1);
}

.md-typeset .screenshot > .admonition-title::before,
.md-typeset .screenshot > summary::before {
  background-color: #7c4dff;
  -webkit-mask-image: var(--md-admonition-icon--screenshot);
          mask-image: var(--md-admonition-icon--screenshot);
}

/* A small "what to capture" caption convention inside screenshot boxes. */
.md-typeset .screenshot .caption {
  font-size: 0.75rem;
  opacity: 0.8;
}

/* --- Technical-detail callout ---------------------------------------------- */
.md-typeset .admonition.techspec,
.md-typeset details.techspec {
  border-color: #00897b;
}

.md-typeset .techspec > .admonition-title,
.md-typeset .techspec > summary {
  background-color: rgba(0, 137, 123, 0.1);
}

.md-typeset .techspec > .admonition-title::before,
.md-typeset .techspec > summary::before {
  background-color: #00897b;
  -webkit-mask-image: var(--md-admonition-icon--techspec);
          mask-image: var(--md-admonition-icon--techspec);
}

/* --- Small niceties -------------------------------------------------------- */

/* Give the landing/section "cards" a little more breathing room. */
.md-typeset .grid.cards > ul > li {
  border-radius: 0.4rem;
}

/* Keep wide tables readable rather than overflowing the page. */
.md-typeset table:not([class]) {
  font-size: 0.78rem;
}