/* Material caps figcaption at 24rem, so a caption under a full-width photo
   wraps into a narrow column with wide empty gutters either side. Let it use
   the figure's width instead — including inside the side-by-side pinout grid,
   where 24rem is wider than the cell and stretches the figure past its image. */
.md-typeset figcaption {
  max-width: 100%;
  font-size: 0.85em;
}

/* Material shrink-wraps figures with `width: fit-content`. When a caption block
   wraps a .grid, the grid never gets the width its auto-fit columns need and
   every cell stacks instead of sitting side by side. Give those figures the
   full content width. */
.md-typeset figure:has(.grid) {
  width: 100%;
}

/* Material sizes grid columns by auto-fit, so how many land on a row depends on
   the viewport. Pin the counts a figure's caption refers to by position: three
   across, or two-by-two for four. */
.md-typeset figure > .grid:has(> :last-child:nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.md-typeset figure > .grid:has(> :last-child:nth-child(4)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media screen and (max-width: 44.9375em) {
  .md-typeset figure > .grid:has(> :last-child:nth-child(3)),
  .md-typeset figure > .grid:has(> :last-child:nth-child(4)) {
    grid-template-columns: 1fr;
  }
}

/* An image narrowed to match its neighbour's height would otherwise hug the
   left edge of its cell, leaving the gap all on one side. Centre it. */
.md-typeset figure > .grid > img[width] {
  justify-self: center;
}

/* ANSI Z535 signal words: DANGER (will injure) > WARNING (could injure or
   destroy hardware) > CAUTION (recoverable mistake) > NOTICE (information).
   Material ships danger/warning/note but has no `caution`, so define it here
   in ANSI's amber, reusing the warning glyph. */
.md-typeset .admonition.caution,
.md-typeset details.caution {
  border-color: #f5b800;
}

.md-typeset .admonition.caution:focus-within,
.md-typeset details.caution:focus-within {
  box-shadow: 0 0 0 0.2rem #f5b8001a;
}

.md-typeset .caution > .admonition-title,
.md-typeset .caution > summary {
  background-color: #f5b8001a;
}

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

.md-typeset .caution > .admonition-title::after,
.md-typeset .caution > summary::after {
  color: #f5b800;
}

/* Spec cards are headerless two-column tables written as `| | |`, which still
   emits an empty <thead> row taking a full row of padding. Drop it. */
.md-typeset .admonition table:not([class]) thead:has(th:empty) {
  display: none;
}

/* Fallback for engines without :has() — collapses the row rather than hiding it. */
.md-typeset .admonition table:not([class]) thead th:empty {
  padding: 0;
  border: 0;
}

/* A standalone spec card spans the full content width, which strands a narrow
   two-column table in a lot of empty space. Let the card hug its table instead,
   centred on the page. Scoped to direct children of the content so the paired
   cards inside a .grid keep filling their cells. */
.md-typeset > .admonition.abstract {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}