/* Documentation figures — framed product screenshots.
 * Loaded via `extra_css` in mkdocs.yml. Scoped to the rendered markdown
 * body (`.typography`) so it never touches the theme chrome.
 * Uses the theme's shadcn CSS variables, so the frame adapts to light/dark. */

.typography img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  box-shadow:
    0 1px 2px rgb(16 24 40 / 6%),
    0 8px 24px rgb(16 24 40 / 6%);
}

/* The paragraph wrapping a screenshot: breathing room + centered. */
.typography p:has(> img) {
  margin: 1.75rem 0 0.5rem;
  text-align: center;
}

/* An italic line on its own immediately after a screenshot renders as a caption. */
.typography p:has(> img) + p > em:only-child {
  display: block;
  max-width: 42rem;
  margin: 0 auto 1.25rem;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--muted-foreground, #6b7280);
}