/* Material theme overrides for the blueprint GitHub Pages site.
 *
 * Two responsibilities:
 *   1. Make the diagram surface light + readable in both default and
 *      slate (dark) Material palettes. Mermaid's default colors
 *      wash out in dark mode; we override using Material's
 *      --md-mermaid-* CSS variables.
 *   2. Style the mkdocs-panzoom-plugin full-screen modal so it
 *      stays centered with a soft backdrop on tall diagrams.
 *
 * Pattern adapted from .agents/skills/mkdocs-c4-site/SKILL.md
 * section "Mermaid colors in dark mode".
 */

/* --- Mermaid diagram surface --------------------------------------------- */

/* Light surface for the diagram regardless of theme. Keeps the
 * Mermaid text contrasts readable in dark mode. */
.mermaid {
  background-color: #ffffff;
  border-radius: 6px;
  padding: 4px;
}

.mermaid .nodeLabel,
.mermaid .nodeLabel p {
  color: #1c2d3e !important;
}

/* Slate (dark) palette overrides for Mermaid's variables. */
[data-md-color-scheme="slate"] {
  --md-mermaid-edge-color: #1c2d3e;
  --md-mermaid-label-bg-color: #ffffff;
  --md-mermaid-label-fg-color: #1c2d3e;
  --md-mermaid-node-bg-color: rgba(63, 81, 181, 0.1);
  --md-mermaid-node-fg-color: #5c6bc0;
}

/* --- Panzoom full-screen modal ------------------------------------------- */

.panzoom-fullscreen {
  position: fixed !important;
  top: 5vh !important;
  left: 10vw !important;
  width: 80vw !important;
  height: 86vh !important;
  max-width: 80vw !important;
  max-height: 86vh !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45) !important;
  z-index: 200 !important;
}

body:has(.panzoom-fullscreen)::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 199;
  backdrop-filter: blur(2px);
}

body:has(.panzoom-fullscreen) {
  overflow: hidden;
}