/* Screenshots on content pages: framed so the UI does not bleed into the page */
.md-typeset .xp-shot img,
.md-typeset img.xp-shot {
  display: block;
  width: 100%;
  max-width: 900px;
  margin: 1.4rem auto 0.4rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(16, 40, 60, 0.10);
}

/* Caption under a framed screenshot */
.md-typeset figure > figcaption {
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.3rem;
}

/* Images inside grid cards sit flush across the card top */
.md-typeset .grid.cards > ul > li > img:first-child,
.md-typeset .grid.cards > ul > li > p:first-child > img {
  display: block;
  width: 100%;
  margin: -0.8rem -0.8rem 0.8rem;
  width: calc(100% + 1.6rem);
  max-width: none;
  border-radius: 4px 4px 0 0;
}

/* Footer link row, mirroring the LoopCheck site */
.xp-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  align-items: center;
  justify-content: center;
}

.xp-social {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--md-footer-fg-color--light);
  text-decoration: none;
  font-size: 0.68rem;
}

.xp-social:hover {
  color: var(--md-footer-fg-color);
}

.xp-social svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

/* A note that states a current limitation rather than a feature.
   Used where the documentation names something as roadmap. */
.md-typeset .admonition.roadmap,
.md-typeset details.roadmap {
  border-color: #E8A33D;
}

.md-typeset .roadmap > .admonition-title,
.md-typeset .roadmap > summary {
  background-color: rgba(232, 163, 61, 0.1);
}

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

/* Tables of instruments and interfaces get a lot of columns; keep them readable */
.md-typeset table:not([class]) th {
  white-space: nowrap;
}

/* ---------------------------------------------------------------- diagrams */
/* Inline SVG diagrams take their colours from the theme, so they follow the
   light and dark palettes without a second copy of the graphic. */
.xp-overview {
  display: block;
  width: 100%;
  max-width: 780px;
  height: auto;
  margin: 1.6rem auto 0.4rem;
}

.xp-overview .xp-panel {
  fill: var(--md-default-fg-color--lightest);
  stroke: var(--md-default-fg-color--lighter);
  stroke-width: 1;
}

.xp-overview .xp-core {
  fill: var(--md-primary-fg-color);
}

.xp-overview .xp-corestep rect {
  fill: rgba(255, 255, 255, 0.12);
}

.xp-overview .xp-chip rect {
  fill: var(--md-default-bg-color);
  stroke: var(--md-default-fg-color--lighter);
  stroke-width: 1;
}

.xp-overview text {
  font-family: var(--md-text-font-family, sans-serif);
}

.xp-overview .xp-kicker {
  fill: var(--md-primary-fg-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.xp-overview .xp-kickerlight {
  fill: var(--md-primary-bg-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  opacity: 0.85;
}

.xp-overview .xp-sub,
.xp-overview .xp-note {
  fill: var(--md-default-fg-color--light);
  font-size: 11px;
}

.xp-overview .xp-note {
  font-style: italic;
}

.xp-overview .xp-chiptext text {
  fill: var(--md-default-fg-color);
  font-size: 12px;
}

.xp-overview .xp-coretext text {
  fill: var(--md-primary-bg-color);
  font-size: 11px;
  opacity: 0.9;
}

.xp-overview .xp-coretext .xp-corehead {
  font-size: 13px;
  font-weight: 700;
  opacity: 1;
}

.xp-overview .xp-arrow {
  stroke: var(--md-accent-fg-color);
  stroke-width: 2;
  fill: none;
}

.xp-overview .xp-arrowhead {
  fill: var(--md-accent-fg-color);
}

.xp-overview .xp-caption {
  fill: var(--md-default-fg-color--light);
  font-size: 12px;
  font-style: italic;
}

.xp-overview .xp-num {
  fill: var(--md-accent-fg-color);
}

.xp-overview .xp-numtext {
  fill: #fff;
  font-size: 13px;
  font-weight: 700;
}

.xp-overview .xp-stephead {
  fill: var(--md-default-fg-color);
  font-size: 13px;
  font-weight: 700;
}

/* Material sets .md-typeset figure to width: fit-content, which collapses an
   inline SVG to its 300px intrinsic default. Both rules need the .md-typeset
   prefix to win on specificity. */
.md-typeset figure.xp-figure {
  width: 100%;
  max-width: 820px;
  margin: 1.6rem auto 0.6rem;
}

.md-typeset figure.xp-figure .xp-overview {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}