/* SimpleDiagrams help styling.

   Brand colours come from the site's design tokens
   (simplediagrams/static/src/scss/_tokens.scss). Keep the two in step when the
   marketing site's palette changes. */

:root {
  --md-primary-fg-color: #1769aa;
  --md-primary-fg-color--light: #2c8bc6;
  --md-primary-fg-color--dark: #0f4f82;
  --md-accent-fg-color: #1769aa;
  --md-accent-fg-color--transparent: rgba(23, 105, 170, 0.1);

  --md-text-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --md-code-font: ui-monospace, "SFMono-Regular", Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* Dark mode keeps the same hue but lifts it off the dark background, where the
   marketing blue reads almost black. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #2c8bc6;
  --md-accent-fg-color: #61aee0;
  --md-accent-fg-color--transparent: rgba(44, 139, 198, 0.14);
}

/* Screenshots.

   Every screenshot is a window or a panel with its own edges, so a border plus
   a soft shadow keeps it from bleeding into the page background — particularly
   the pale panels, which would otherwise dissolve into white. */
.md-typeset img {
  border-radius: 6px;
}

.md-typeset figure img,
.md-typeset p > img {
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
  max-width: 100%;
}

/* A caption under a screenshot, written as an ordinary emphasised line. */
.md-typeset img + em {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

/* Small inline UI images (a single tool button) should sit in the text line
   rather than become a block with a frame. */
.md-typeset img.sd-inline {
  border: 0;
  box-shadow: none;
  vertical-align: middle;
  height: 1.4em;
  width: auto;
}

/* Keyboard shortcut tables are long and mostly two narrow columns; stop the
   first column from collapsing to one character per line. */
.md-typeset table:not([class]) th:first-child,
.md-typeset table:not([class]) td:first-child {
  white-space: nowrap;
}